[JavaScript知识库] 尚硅谷Vue学习—

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 尚硅谷Vue学习——计算属性 -> 正文阅读

[JavaScript知识库]尚硅谷Vue学习——计算属性

1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Pbject.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
?? ?初次读取时会执行一次。
?? ?当依赖的数据产生变化时会再次调用
4.优势：与methods方法相比，内部具有缓存的机制，效率更高，调试方便
5.备注：
?? ?计算属性最终会出现在vm上，直接读取使用即可。
?? ?如果计算属性需要被修改，则必须去写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_计算属性实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓: <input type="text" v-model="firstName"><br><br>
        名: <input type="text" v-model="lastName"><br><br>
        姓名: <span>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip =  false // 阻止 vue 在启动时生成生产提示

    const vm = new Vue({
        el:"#root",
        data:{
            firstName:'才疏学浅',
            lastName:'小缘同学'
        },
        computed:{
            fullName:{
                //get有什么用？当有人读取fullName时，get就会被调用，且且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
                get(){
                    return this.firstName + '的' + this.lastName
                },
                //set什么时候调用？当fullName被修改时
                set(value){
                    const arr = value.split('的')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
</script>
</html>