在有些情况中,看似methods computed(计算属性) watch(侦听属性)三种方法都可以用,这三者用哪个更适合呢?那就要要先明白三者之间的不同之处
1.执行情况
methods中方法在每次调用时都会执行
而computed和watch则会在相关数据改变时才会执行
computed具有缓存作用,计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值(即:计算的属性依赖于一个或多个数据的变化,这些数据中存在任一个变化,computed该计算属性都会执行,不变化,则取缓存中的数据)
watch监听的数据变动(该数据必须来源于data和prop中的数据)会影响依赖于该数据的属性/数据的变动
示例:
执行结果:
与computed相比 watch的实现方法
上述可见,从执行情况来讲,对于性能开销比较大的计算,推荐computed和watch,若不期望存在缓存,用methods;
同时,computed与watch也可以实现同样的效果,而与watch(上面代码是命令式且重复的)相比,computed在书写上较为简洁,通常更好的做法是使用计算属性而不是命令式的 watch 回调;但当需要在数据变化时执行异步或开销较大的操作时,watch是最有用的
示例:
此外
computed可以实现对象的深层监听;而watch只有对对象重新赋值时视图才会更新;当然,watch借助handler和deep也可以实现深度监听
示例:
总体来讲 三者的区别大致先写到这,后序持续更新,小伙伴们根据实际情况选用合适的即可
有不同意见也欢迎评论区留言