vue Watch和Computed的使用总结

01. 监听器watch

（1）作用

• watch：用于监听data中的数据变化，只在被监听的属性值发生变化时执行

（2）属性和方法

• immediate：表示在组件创建后，立即监听属性，在最初绑定值的时候，设置为：immediate: true
• handler：监听对象的时候使用，发生变化时，执行handler中的方法~
• deep：表示深度监听对象、数组内部的属性的变化，设置为：deep: true

（3）监听对象

• 可以监听对象的直接赋值操作
  • 但不能监听对象属性的添加、修改、删除

由于 vue 会在初始化实例时，会对属性执行 getter/setter 转化过程

所以属性必须在 data 对象上存在，才能让 vue 转换它，这样才能让它是响应式的

因此，vue 无法检测到对象属性的添加、删除、修改等操作

默认情况下 handler 只监听对象内部属性的引用的变化

因此，我们只有进行赋值操作的时候，它才会监听到

• 可以直接监听对象的某一个属性值
  • 如果这个属性是基本类型的值，就可以正常监听

• 可以使用deep属性进行深度监听
  • 只能监听原有属性的变化，不能监听新增属性
  • vue 无法监听 this.$set 修改原有属性的变化

这是因为，this.$set()就是相当于在data中对初始值进行改变

它可以触发监听，但变化体现不出来，即newval === oldval

（4）监听数组

• 可以监听
  • 数组的直接赋值操作
  • 通过数组方法的添加、修改、删除操作
  • 通过this.$set()方法进行的数组操作

数组方法如pop()、push()等，和this.$set(arr, index, newval)方法

它们可以触发监听，但无法体现变化，即newval === oldval

• 无法监听
  • 无法监听数组的非数组方法的添加、删除、修改操作
  • 无法监听直接通过索引值改变数组的变化
  • 无法监听直接修改数组长度的变化

02. 计算属性computed

（1）计算属性的set方法

• 计算属性可以写为一个 object，而非 function，只是 function 形式是我们默认使用它的 get 方法，当写为 object 时，我们还可以使用它的 set 方法

当执行 this.fullname = 'aresn liang'，computed 的 set 就会调用，firstname 和 lastname 就会被赋值为 aresn 和 liang

computed 可以依赖其它 computed，甚至是其它组件的 data

（2）区别

• 计算属性和监听器
  • 计算属性computed是：监听依赖值的变化
    • 只要依赖值不变，都会直接读取缓存进行复用
    • 计算属性不能响应异步操作中数据的变化
    • 需要人为调用
  • 监听器watch是：监听属性值的变化
    • 只要属性值发生变化，都可以触发一个回调函数
    • 监听器可以响应异步操作中数据的变化
    • 自动触发
• 计算属性和方法
  • methods 是一个方法，它可以接受参数，而 computed 不能
  • computed 是可以缓存的，methods 不会
    

（3）使用场景

• 当一个属性受多个属性影响的时候就需要用到computed
• 当一条数据影响多条数据的时候就需要用watch，如搜索数据

以上就是vue watch和computed的使用总结的详细内容，更多关于vue watch和computed的使用的资料请关注其它相关文章！