上手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方法，

<div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        全名：<span>{{fullName}}</span>
</div>

<script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: "#root",
            data: {
                firstName: '张',
                lastName: '三'
            },
            
            computed: {
                 fullName: {
                     // 当读取fullName时，get就被调用，返回值作为fullName的值
                     // 1，初次读取fullName时，2.所依赖的数据发生变化时，get被调用
                     get() {
                         console.log(this) //此处的this是vue对象
                         return this.firstName + '-' + this.lastName
                     },
                     //fullName被修改时，set被调用
                     set(value){
                         console.log('set',value)
                         const arr = value.split('-')
                         this.firstName = arr[0]
                         this.lastName = arr[1]
                     }
                 }             
            },

        })
    </script>

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

<script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: "#root",
            data: {
                firstName: '张',
                lastName: '三'
            },
            // 只考虑读取，没有修改时，计算属性可以简写
            computed: {
                
                // 简写形式
                fullName(){
                    console.log(this)
                    return this.firstName + '-' + this.lastName
                }
            },
        })
    </script>

结果如下：

2. watch（侦听器）简介

2.1 使用场景：

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

2.2 使用方式：

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

2.3 小案例：

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

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

<div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
</div>

<script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },

            // 监视的watch实现
             watch: {
                 isHot:{
                     immediate:true, //初始化时，调用handler，默认是false
                     //当isHot发生改变时，回调函数handler被调用
                     handler(newValue,oldValue){
                         console.log('isHot被修改了',newValue,oldValue)
                     }
                 }
             }

        })
    </script>

 实现监视的另一种实现方法：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可以进行异步操作。