春招冲刺（九）：计算属性和监视属性总结

计算属性和监视属性总结

Q1：计算属性

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

//写法1：完整版
computed:{
  fullName:{
    get(){
      return this.firstName + '-' + this.lastName
    },
    set(value){
      const arr = value.split('-')
      this.firstName = arr[0]
      this.lastName = arr[1]
    }
  }
}

//写法2：函数版（简写）
computed:{
    	fullName(){
		    return this.firstName + '-' + this.lastName
    	}
    }

总结：

• 定义：要用的属性不存在，需要通过已有属性计算得来。
• 原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。
• get函数什么时候执行？
  • 初次读取时会执行一次
  • 当依赖的数据发生改变时会被再次调用
• 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
• 备注：
  • 计算属性最终会出现在vm上，直接读取使用即可
  • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
  • 如果计算属性确定不考虑修改，可以使用计算属性的简写形式

Q2：监视属性

<h2>今天天气好{{info}}!</h2>
<button @click="changeWeather">点击切换天气</button>

// 写法1：
new Vue({
            el:'#root', 
            data:{ 
                isHot:true,
            },
            // 根据isHot的bool值决定显示什么文字
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽' 
                }
            },
            // 按钮点击改变isHot的值
            methods:{
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
            // 监视isHot的值，要是改变了就输出
            watch:{
                isHot:{
                        immediate:true, //初始化时让handler调用一下
                        //handler什么时候调用？当isHot发生改变时
                        handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue)
                      }
                }
            }
        })

总结：

• 当被监视的属性变化时，回调函数自动调用，进行相关操作
• 监视的属性必须存在，才能进行监视
• 监视有两种写法：
• 创建Vue时传入watch配置

通过vm.$watch监视

// 写法2：
vm.$watch('isHot',{
	immediate:true,
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
})

// 写法3：简写。如果监视属性除了handler没有其他配置项的话，可以进行简写。
isHot(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue,this)
}

深度监视

<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>

new Vue({
            el:'#root', 
            data:{ 
                isHot:true,
                numbers:{
                    a:1,
                    b:1,
                }
            },
            watch:{
                //监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
                    handler(){
                        console.log('numbers改变了')
                    }
                },
              
              //监视多级结构中某个属性的变化
              'numbers.a':{
                  handler(){
                      console.log('a被改变了')
                  }
              } 
            }
        })

总结：

• Vue中的watch默认不监测对象内部值的改变（一层）
• 在watch中配置deep:true可以监测对象内部值的改变（多层）

Q3：computed和watch的不同

• 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
• 是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
• 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
• computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
  https://blog.csdn.net/web22050702/article/details/125530363

Q4：运用场景

• 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
• 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

参考链接

• https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091937&idx=1&sn=1d08ebe716e00555e18aa34896ffa7a7&chksm=be5bc8cc892c41daaefa76d5747d5e1eccd2934c3c178e70e16702d729aa2e40409621ffa137&scene=27