Vue中computed&methods&watch的比较

一、computed&watch介绍

1.computed介绍

 （1）定义

     computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新

（2）用法

       计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。而方法却会执行。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

2.watch介绍

（1）介绍

   vue中用watch来监视data数据的变化，当被监视的数据发生变化watch中定义的相关方法便会被调用。

（2）用法

      若用watch时，Date.now() 将改变，watch是响应式依赖

watch: {
            temp(val, oldVal) {
                    console.log('这是之前的值：'+oldval+'这是之后的值：'+val)
            },
            
        }

二、computed&methods&watch的用法比较

1.computed&watch

computed支持缓存，只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存，数据变,直接会触发相应的操作
computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化，而watch支持异步
computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值;而watch监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值
computed：一个属性受到多个属性影响，如：购物车商品结算。
watch：一个数据影响多条数据，如：搜索数据。数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择

2.computed&methods

当computed与methods都能实现的功能时，建议使用computed,因为有缓存。