计算属性computed与侦听器watch的联系与区别

计算属性

格式

（1）简写

computed: {
  所计算的属性名() {  // 简写时，为函数
    return XXX
  }
}

（2）完整

computed: {
  所计算的属性名: {
    get() { //get调用时机：1.初次读取computed中的属性时。2.所依赖的数据修改时
      return XXX
    },
    // newValue为修改后的值，若想修改所计算的名称的值，则需要修改该计算属性所依赖的属性值
    set(newValue) { // set调用时机：所计算的名称被修改时
      console.log(newValue)
    },
  }
}

特性

1.具有缓存机制，只有所依赖的属性值变化，计算属性才会重新计算，否则会立即返回之前的计算结果，不用重复执行getter()；

2.所计算的属性不需要提前在data中定义；

3.不可异步

4.计算属性与Data实现的底层原理一致，都使用了Object.defineProperty()方法提供的getter()与setter()。

计算属性vs方法

1.计算属性可实现的，方法也可实现，结果相同；

2.计算属性有缓存，所依赖的属性值无变化，就不会调用getter()函数重新计算；而方法每次都会在重新渲染时再次执行函数。

3.某些场景下，计算属性性能更好

侦听器

格式

（1）简写

watch: {
  // 属性名改变，此函数便会执行
  // 属性名也可写成路径形式：'some.nested.key'(newValue, oldValue){}
  属性名(newValue, oldValue) {  
    // 逻辑
  }
}

（2）完整

watch: {
  属性名: {
    handler(newValue, oldValue) {
      //逻辑
    },
    // watch默认是浅层侦听，被赋新值时，才会触发函数
    // 若侦听嵌套属性变化，需要深层监听器，即deep为true
    deep: true,  // 选用
    // 初始化时执行（立即执行）
    immediate: true  // 选用
    // 一次性侦听器（新），避免重复调用
    once:  true  // 选用
  }
}

特性

1.无缓存机制；

2.属性名需要提前在data中定义；

3.可以异步；

侦听器vs计算属性

1.计算属性能完成的，侦听器都可以完成；

2.侦听器可以异步，但计算属性不可以；

结论

1.方法多用于与用户交互的场景，如点击、输入等；

2.计算属性多用于不需要重新计算的场景，如获取系统权限、信息等；

3.侦听器多用于侦听数据变化后，再执行自定义逻辑或方法的场景，如组件自适应页面大小等。

学习自用，欢迎大家批评指正~