<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浅谈computed的原理</title> </head>
<body> <div id="app"> <p> 姓<input type="text" v-model="firstName"></p> <p> 名<input type="text" v-model="lastName"></p> <p> 姓名<input type="text" v-model='fullName'>单项数据绑定</p> <!-- 这里有访问fullName 所以相当于get访问时调用一次 在页面加载的时候就调用 --> <p> 姓名1<input type="text"><input type="text" v-model="fullName1"></p> <p> 姓名2<input type="text"><input type="text" v-model='fullName2'></p>
------ <p> 姓名2<input type="text"><input type="text" v-model='fullName2'></p> <p> 姓名2<input type="text"><input type="text" v-model='fullName2'></p> <p> 姓名2<input type="text"><input type="text" v-model='fullName2'></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { firstName: 'A', lastName: 'B', fullName1: '' }, computed: { /* 1、vue控制的所有回调的this都是vm/组件对象 2、vue的vm定义一些与data中的属性对应的属性 同名 比如log.vue中的this其实相当于log.new String('abc') 一个有值的string类型 为什么不是打印'abc'呢， 同理Vue也是构造函数，所以打印的结果 你可以看到里面有一个_data属性与data属性同名，就是vm实例对象构造的 换句话说vm实例对象上的_data里的值是get方法得到了包装类里的实参data的值
getter方法：当通过vm.xxx = value 读取新的值时,读取data对象中同名属性的值 setter方法：当通过vm.xxx = value 指定新的值时，值就保留在data中对应的属性上 数据代理：vm._data.xxx ===> vm.data 通过vm代理对vm内部的data对象的属性的操作（读/写)
*/ fullName() { console.log('fullName get()', this);
return this.firstName + '-' + this.lastName }, fullName2: { get() { console.log('fullName2 get()');
return this.firstName + '-' + this.lastName }, // 监视属性值变化的时候 该做什么（更新firstName和lastName） set(val) { console.log('fullName2 set()'); this.firstName = val.split('-')[0] this.lastName = val.split('-')[1] } } }, watch: { firstName: function (value) { console.log('watch firstName'); this.fullName1 = value + '-' + this.lastName } } }) // $watch说明前面调用者是new Vue的实例对象 实例使用$调用属性用于区别你自己定义的方法，代表这是Vue的方法 vm.$watch('lastName', function (value) { console.log('watch lastName'); this.fullName1 = this.firstName + '-' + value
}) // 看到这里相信大家也明白了watch和computed的区别，虽然watch的浅显用法是和computed的get（）函数是一样的 // 但是watch在页面一开始的时候并不会监听 只会读取data中定义的数据先，而computed可以不用在data中定义，页面一加载凡是用到了这个值就会触发get方法 // 然后就是watch有深度监听的作用（计算属性特征：有缓存，多次读取只执行一次getter计算，提高性能）
</script> </body>
</html>