Vue核心 计算属性和侦听属性

计算属性

1. 使用场景：要用的属性不存在，需要通过已有属性计算得来。

   对于Vue而言，简单来说data配置项中的就是属性。因此计算属性名并不在data中存在，但它必须由data中的属性计算得来，否则Vue检测不到涉及属性的变化。

2. 底层原理：底层借助了Object.defineproperty()方法提供的getter和setter方法。

3. get函数何时执行？

   • 初次读取会执行一次、
   • 当依赖的数据发生改变时会被再次调用。

4. 优势：与methods实现相比，内部有缓存机制，效率更高（计算属性的get只会被执行一次），调试方便。

注意：

• 计算属性最终会出现在vm上，直接读取使用。计算属性在vm中就不再是一个对象，仅仅是get函数的返回值。
• 如果计算属性要被修改，必须使用set函数去响应修改，且set中引起计算时依赖的数据发生改变。
• 如果计算属性确定不考虑修改其他依赖的数据，可以使用计算属性的简写形式。

代码示例：

Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				//完整写法
				/* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
				//简写
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})

侦听属性

1. 使用场景：当被侦听的属性变化时，回调函数自动调用，进行相关操作。

2. 侦听的属性必须存在，才能进行监视，既可以侦听data，也可以侦听计算属性。

3. 配置项属性immediate: false，改为true，则初始化调用一次handler(newValue, oldValue)。

4. 侦听有两种写法：

   • 创建Vue时传入watch: {}配置

     watch:{
     		//正常写法
     		isHot:{
     		// immediate:true, //初始化时让handler调用一下
     		// deep:true,//深度监视
     		handler(newValue,oldValue){
     			console.log('isHot被修改了',newValue,oldValue)
     			}
     		}, 
     		//简写
     		/* isHot(newValue,oldValue){
     			console.log('isHot被修改了',newValue,oldValue,this)
     		} */
     			}

   • 通过vm.$watch()侦听

     //正常写法
     	vm.$watch('isHot',{
     		immediate:true, //初始化时让handler调用一下
     		deep:true,//深度监视
     		handler(newValue,oldValue){
     			console.log('isHot被修改了',newValue,oldValue)
     		}
     	}) 
     //简写
     	/* vm.$watch('isHot',(newValue,oldValue)=>{
     		console.log('isHot被修改了',newValue,oldValue,this)
     	}) */

5. 如何选择：

   1. 如果在创建Vue实例时，就知道要侦听什么属性，就直接使用watch配置项。
   2. 创建实例的时候不知道监测谁，后续根据用户的行为发现需要监视某个属性，就使用 vm.$watch() 。

深度侦听

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

注意：

• Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不开启。
• 使用watch时根据监视数据的具体结构，决定是否采用深度监视。

计算属性VS侦听属性

• computed能完成的功能，watch都可以完成。
• watch能完成的功能，computed不一定能完成，例如watch可以执行异步操作。

注意：

• 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。

• 所有不被Vue管理的函数（定时器的回调函数、Ajax回调函数、Promise回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。

• 目前为止最好使用普通函数的情况：

  (因为vue所管理的，若使用箭头函数会改变this的指向)

  1. 配置在methods中的。
  2. 完整写法的计算属性中的get()、set()以及简写的计算属性。
  3. 完整写法的监视属性中的handler()以及简写的监视属性