【备战春招】第十六天+vue复习

学习课程：前端工程师2022版-vue基础入门

lesson37：computed方法生成计算属性2-9 computed方法生成计算属性-慕课网体系课 (imooc.com)

lesson38：watch 和 watchEffect 的使用和差异性

2-10 watch 和 watchEffect 的使用和差异性（1）-慕课网体系课 (imooc.com)

讲师：Dell老师

今天继续昨天的课程安排，学习了computed方法生成计算属性和watch 和 watchEffect 的使用和差异性。

计算属性实际上是一个方法，它可以完成各种复杂的逻辑，包括运算、函数调用等，并最终返回一个值。之前的章节中介绍了模版插值的语法，我们知道模板内的可以使用表达式进行计算，例如：{{ count * number }}。但有时候我们的计算逻辑并非如此简单，当模板中放入太多的复杂逻辑会让模板过于繁琐且难以维护。计算属性 computed 的使用可以解决此类问题。 computed 在项目中会大量使用，在使用时需要注意的是 computed 必须有一个返回值。使用 computed 并不难，难点在于如何编写其内部的复杂逻辑。每一个计算属性都包含一个 getter 和一个 setter，我们上面的两个示例都是计算属性的默认用法，只是利用了 getter 来读取。在你需要时，也可以提供一个 setter函数 ， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter函数，执行一些自定义的操作。

计算属性是基于它的依赖缓存的。计算属性的改变取决于其所依赖数据的变化，所以只要依赖数据不发生改变，计算属性就不会更新。当我们重复获取计算属性时它也不会重复计算，只会获取缓存的值。而我们每次调用 methods 都会重新计算一遍，这样将会消耗一部分性能。当然，如何你不希望对数据进行缓存，那么可以用方法来代替。

侦听器 watch 是 Vue 提供的一种用来观察和响应 Vue 实例上的数据变化的属性。当被侦听的数据发生变化时，会触发对应的侦听函数。

侦听器 watch 实际是 vue 实例上的一个对象属性。当我们需要对 vue 实例上某个属性进行侦听时，我们以需要被侦听的属性名作为 watch 对象的键，以一个函数 function 作为该键的值。函数 function 接收两个参数：侦听数据变化之后的值newValue；侦听数据变化之前的值oldValue。

它具备一定惰性 lazy，参数可以拿到原始和当前值，可以侦听多个数据的变化，用一个侦听器承载。

继续加油！