<!DOCTYPE html>
<html lang="en">
<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计算，提高性能）
// 补充：其实computed计算属性缓存，其实一开始页面刷新就是去computed容器里面找是否有这个缓存的属性值，如果没有，而刚好页面加载需要读取，那么就自动执行computed里的get()回调函数执行，进行计算return后的值并保存在computed对象容器里。那么下一次只要没改变依赖的数据从而触发set回调的操作的话，那么就第一时间去computed容器缓存里取数据，也就不会进行重复计算啦。我是小曹，有更多问题欢迎留言！
</script>
</body>
</html>
