相关问题
- computed 和 watch 的实现原理
- computed 和 watch 的适用场景
回答关键点
响应变化 属性 侦听
- computed 是模板表达式的声明式描述，会创建新的响应式数据。
- 而 watch 是响应式数据的自定义侦听器，用于响应数据的变化。
- 除此之外，computed 还具有可缓存，可依赖多个属性，getter 函数无副作用等特点。watch 则更适用于异步或开销大的操作。
computed
computed 是计算属性，它会根据你所依赖的数据动态显示新的计算结果 计算属性将被加入到 Vue 实例中。所有 getter 和
setter 的 this 上下文自动地绑定为 Vue 实例
- 初始化：为 computed 属性创建 lazy watcher（此处 watcher 指双向绑定中的监听器，下同）。
- 首次模板渲染：渲染 watcher 检测到 computed 属性时，会调用 computed 属性的 getter 方法，而 computed 属性的 getter 方法会调用依赖属性的 getter，从而形成链式调用，同时保存引用关系用于更新。取得计算结果后 lazy watcher 会将结果缓存，并返回给渲染 watcher 进行模板渲染。
- 多次模板渲染：直接取 lazy watcher 中的缓存值给到渲染 watcher 进行渲染。
- 依赖属性更新：根据首次模板渲染阶段构建的依赖关系向上通知 lazy watcher 进行重新计算，缓存计算结果并通知渲染 watcher 重新渲染更新页面。
通过计算出来的属性不需要调用直接可以在 DOM 里使用
基础例子
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
template: `
<div>
<p>我是原始值: "{{ message }}"</p>
<p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用
</div>
`,
computed: {
// 计算属性的 getter
computedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
结果：
我是原始值: "Hello"
我是计算属性的值: "olleH"
如果不使用计算属性，那么 message.split(‘’).reverse().join(‘’) 就会直接写到 template 里，那么在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响
而且计算属性如果依赖不变的话，它就会变成缓存，computed 的值就不会重新计算
所以，如果数据要通过复杂逻辑来得出结果，那么就推荐使用计算属性
watch
一个对象，键是 data 对应的数据，值是对应的回调函数。值也可以是方法名，或者包含选项的对象，当 data
的数据发生变化时，就会发生一个回调，他有两个参数，一个 val （修改后的 data 数据），一个 oldVal（原来的 data 数据）
-
watch 本质上是为每个监听属性 setter 创建了一个 watcher，当被监听的属性更新时，调用传入的回调函数。常见的配置选项有 deep 和 immediate，对应原理如下：
- deep：深度监听对象，为对象的每一个属性创建一个 watcher，从而确保对象的每一个属性更新时都会触发传入的回调函数。主要原因在于对象属于引用类型，单个属性的更新并不会触发对象 setter，因此引入 deep 能够很好地解决监听对象的问题。同时也会引入判断机制，确保在多个属性更新时回调函数仅触发一次，避免性能浪费。
- immediate：在初始化时直接调用回调函数，可以通过在 created 阶段手动调用回调函数实现相同的效果。
Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性
基础例子
new Vue({
data: {
n: 0,
obj: {
a: "a"
}
},
template: `
<div>
<button @click="n += 1">n+1</button>
<button @click="obj.a += 'hi'">obj.a + 'hi'</button>
<button @click="obj = {a:'a'}">obj = 新对象</button>
</div>
`,
watch: {
n() {
console.log("n 变了");
},
obj:{
handler: function (val, oldVal) {
console.log("obj 变了")
},
deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
},
"obj.a":{
handler: function (val, oldVal) {
console.log("obj.a 变了")
},
immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
}
}
}).$mount("#app");
注意：不应该使用箭头函数来定义 watcher 函数，因为箭头函数没有 this，它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例
deep 控制是否要看这个对象里面的属性变化
immediate 控制是否在第一次渲染是执行这个函数
vm.$watch() 的用法和 watch 回调类似
vm.$watch('data属性名', fn, {deep: .., immediate: ..})
vm.$watch("n", function(val, newVal){
console.log("n 变了");
},{deep: true, immediate: true})
总结
- computed：需要处理复杂逻辑的模板表达式。
- watch：需要执行异步或开销较大的操作。
从表现上看，computed 会创建新的属性，而 watch 可以通过将属性设置在 data 中，再监听依赖属性变化，调用 handler 方法更新属性的方式达到同样的效果。因此不难得出 computed 的使用场景可以被 watch 覆盖这一结论。但在具体的使用上还是优先考虑 computed，因为相同场景下 watch 所需的代码量和性能开销一般来说会比 computed 大，具体可以参照 computed vs watched。在 computed 无法满足需求的情况下再考虑使用 watch，也可以有效避免 watch 滥用，提升性能。
Vue3 与 Vue2 区别
Vue3 中 computed 和 watch 的原理以及在 Options API 中的使用方式和 Vue2 保持一致。但在 Vue3 的新特性组合式（Composition）API 中，使用方式和功能相比 Vue2 有了明显差别。使用方式由原来在组件中声明改为直接从 Vue 中导入使用，各自的调用方式和参数也发生了改变，功能更加多样，同时 Vue3 还引入了 watchEffect 作为 watch 的补充，以求用更简洁的代码来覆盖更广的使用场景
