Vue:watch、computed、method之间的区别

1,793 阅读3分钟

一:watch

官方给出了一句解释叫做当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。这句话怎么理解?看看它的例子就明白了,watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态 用于监听单个值。并对进行相关的操作

  • 组件初始化不会触发监听
  • 如果需要初始化后首次也进行监听,则需要写handler, 设置immediate: true;
watch: {
    obj: {
        handler () {
            console.log('object changed')
        }
    }
    immediate: true
}
  • 当监听对象时,默认只会监听对象的引用,如果需要对对象里面的属性值进行监听,有如下两种方式
  1. 设置deep: true; 这关属性是对对象内的所有属性值都进行监听,性能消耗较大,如果只需要对对象内的某些值进行监听,则用下面一种方式更好
  2. 设置监听对象的特定值:'obj.a'; 加上引号写对象值即可, 如下
watch: {
    'obj.a': {
        handler () {
            console.log('object changed')
        }
    }
    immediate: true
}

二:computed 计算属性

computed用于监听需要依赖其他属性而进行计算得来的值,computed会缓存计算值,如果依赖的值没有改变则不会重新进行计算;只要依赖的数据不更改他就不会重新计算更新,而methods里面的方法是每次刷新都会去执行的

三:method

methods里面的方法只要有其他数据更新就会重新执行一遍
computed和watch监听处理时注意不要对会触发自身更新的属性进行修改,否则会进行无限循环更新

根据上面的学习和自己使用的经验做一个总结:

  1. computed是计算属性,是依赖其他属性计算得出的结果;watch是监听某一个值的变化执行对应的方法
  2. computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算;watch在每次监听的值变化时,都会执行回调。如果一个值依赖多个属性(多对一),用computed肯定是更加方便的。如果一个值变化后会引起一系列操作,或者一个值变化会引起一系列值的变化(一对多),用watch更加方便一些
  3. watch的回调里面会传入监听属性的新旧值,通过这两个值可以做一些特定的操作;computed通常就是简单的计算
  4. methods里面的方法不包含主动监听的能力,且相对于computed来讲没有缓存能力,每次会重新执行(在SPA切换的时候比较明显);但比较灵活,可以手动去调取
  5. 它们并没有哪个更底层。watch和computed的共同之处就是每个定义的属性都单独建立了一个Watcher对象,当然这个能力是方法所不具有的