上手Vue：深度理解computed、watch及其区别

computed（计算属性）与watch（侦听器），是Vue中常用的属性，那么什么时候该如何computed，什么时候该使用watch呢？

1. computed - 计算属性 简介

1.1 使用场景：

当我们要显示在页面中的数据不在data中，可以通过计算data中的数据得到时，我们可以采用computed

1.2 使用方式：

在computed对象中定义computed属性，在页面中使用{{方法名}}来显示计算的结果

1.3 小案例：

在文本框中输入姓或者名，当姓发生变化时，全名发生变化，当名发生变化时，全名发生变化

 案例代码如下所示：fullName是computed属性，可以设置get和set方法，

        姓：


        名：


        全名：{{fullName}}

只考虑读取，没有修改时，计算属性可以简写

结果如下：

2. watch（侦听器）简介

2.1 使用场景：

侦听属性是观察和响应 Vue 实例上的数据变动

2.2 使用方式：

通过 Vue实例对象的$watch()或 watch 配置来监视指定的属性，当属性变化时, 回调函数自动调用, 在函数内部进行计算

2.3 小案例：

点击按钮，切换天气，页面展示：今天天气很炎热或凉爽

 案例代码如下所示：当isHot发生变化时，就打印到控制台

        
今天天气很{{info}}
        切换天气

 实现监视的另一种实现方法：vm为Vue的一个实例对象

         // 监视的另一种实现方法
         vm.$watch('isHot', {
          immediate: true, 
            //当isHot发生改变时，回调函数handler被调用
           handler(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue)
            }
        })

 3. computed与watch的区别总结：

3.1 computed能完成的功能,watch都可以完成。

注意： computed可以缓存，如果computed依赖的值不变，它就不会去执行,用上次的结果

  但是watch无论依赖的值有没有变，每次都会去执行

3.2 watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。