Vue原理「十八」-- computed和watch的区别及原理
计算属性 computed
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理
场景：
购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化，
这里的这个总金额使用computed属性来进行计算是最好的选择。（适合多对一的场景）
多对一的场景使用：
<p>{{luFei_Name}}</p>
vm = new Vue({
el:"#app",
data: {
// 路飞的全名：蒙奇·D·路飞
firstName: '蒙奇',
secName: 'D',
thirdName: '路飞'
},
computed: {
luFei_Name: function () {
return this.firstName + this.secName + this.thirdName
}
}
})
// 将“路飞”改为“海军王”
vm.thirdName = '海军王' // 蒙奇·D·海军王
computed使用缓存实例：
new Vue({
el: '#app',
// 设置两个button，点击分别调用getMethodsDate,getComputedDate方法
template:
'<div id="app">
<button @click="getMethodsDate">methods</button>
<button @click="getComputedDate">computed</button>
</div>',
methods: {
getMethodsDate: function () {
alert(new Date())
},
// 返回computed选项中设置的计算属性——computedDate
getComputedDate: function () {
alert(this.computedDate)
}
},
computed: {
computedDate: function () {
return new Date()
}
}
注意
1、两次点击computed返回的时间是相同的！！
两次点击computed返回的时间是相同的！！
两次点击computed返回的时间是相同的！！
2、两次点击methods返回的时间是不同的
原因：
new Date()不是依赖型数据（不是放在data等对象下的实例数据），所以computed只提供了缓存的值，而没有重新计算
只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。
总结：
- 支持缓存，只有依赖数据发生改变，才会重新进行计算；
- 不支持异步，当computed内有异步操作时无效，无法监听数据的变化；
- computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
- 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是多对一或者一对一，一般用computed
- 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
侦听属性 watch
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
将对象写成字符串的形式：
vm = new Vue({
el:"#app",
// （多个）船员名称数据 --> 依赖于 --> （1个)一一一名称数据 一个数据变化 ---> 多个数据全部变化
data: {
haiZeiTuan_Name: '一一一',
suoLong: '一一一索隆',
naMei: '一一一娜美',
xiangJiShi: '一一一香吉士'
},
watch: {
haiZeiTuan_Name: function (newName) { //函数的名字需是上面data内的数据，只能监控一个对象或一个变量
this.suoLong = newName + '索隆'
this.naMei = newName + '娜美'
this.xiangJiShi = newName + '香吉士'
}
}
})
vm.haiZeiTuan_Name = '二二二'
总结：
- 不支持缓存，数据变，直接会触发相应的操作；
- watch支持异步；
- 监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值；
- 当一个属性发生变化时，需要执行对应的操作；适用一对多的情况
- 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行，
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
计算属性 method与 侦听属性 watch区别
watch只能监听一个对象或变量（对象或变量必须是上面data内的数据，对象的话可以写成字符串形式“object.xxx”：对象内部的xxx），比如上面watch的案例，他的内部可以写多个数据与这个监听的数据进行关联，当该数据发生改变的时候，所有的内部数据也都会随着改变，可以做一些开销大的操作，可以进行异步操作
computed是计算属性，需写成函数的形式（可自定义函数名），该函数内部的变量依赖于data内的数据，但内部定义的变量可以缓存，当外面数据没有更改的时候，他是不会触发的，当所依赖的数据进行更改后，他才会重新计算，更新数据，他的内部可以监听多个依赖的数据，他不会进行异步操作
