计算属性和监听器

计算属性和监听器。

计算属性

1、计算属性的完整书写
计算属性是依赖于某个属性的，当依赖的属性值产生变化的时候计算属性也随之变化
计算属性是只读属性，它完整书写是有getter和setter两个属性，当依赖属性变化时会自动触发getter函数，当计算属性改变时会触发setter函数，原则上计算属性只有getter，没有setter。

data(){
	return {
	 massage:"123"
	 }
 },
computed:{
    changeDate:{
		set(){
		// 当changeData变化时触发该函数
		 	...
		 },
		 get(){
		 // 当massage值变化时自动触发函数
		 return this.massage
		 }
	}
}

1、计算属性具有缓存功能，依赖值变化时触发getter函数，即便多次调用也只执行一次
2、计算属性是属性，并非方法，在template中可以直接引用该属性 {{changeDate}}
3、计算属性简写时写成一个函数，即getter函数，这也就是为什么计算属性是一个属性但是写成一个方法的原因
4、计算属性内的getter函数不允许进行异步操作和更改dom！！！计算属性最大的功能是计算值并返回值，减少因为复杂计算导致的性能消耗！需要进行异步操作或者更改dom的请使用监听器

computed:{
	changeDate:function(){
	// 相当于上面的get（）函数
	 return this.massage
	}
}

监听器

watch监听属性的变化，当属性变化时触发对应的函数，完整写法：

data(){
	return {
	massage:'123'}
	},
watch:{
	massage:{
		 handler(newValue,oldValue){
			 // 值变化时自动执行该函数
			 },
		 deep: true, // 是否开启深度监听 ，默认false
		 immediate: true // 在属性初始化的时候强制执行回调，默认 false
		 flush: 'post' // 是否在dom更新后执行函数
	 }
}

1、监听器内可以执行异步或者更改dom的操作
2、简易写法，简易写法的话，deep和immediate两个值都为默认值false

watch:{
	massage:function(newValue,oldValue){
		// 值变化执行
	 }
}

3、deep深度监听没有开启的情况下，无法监听对象属性的变化或者数组内容的变化
如果对一个对象开启深度监听，将会监听该对象所有的属性变化，极其耗费性能

data(){
	return {
	massage:{	
		name："123",
		age:18,
		...
		}
	}
},
watch:{
	massage:{
		 handler(newValue,oldValue){
			 // 值变化时自动执行该函数
			 },
		 deep: true, // 开启深度监听后，可以监听massage对象的所有属性值，如name,age...
	 }
}

如果只想监听对象的某一个属性值的变化，只需要写 “ . ”即可

data(){
	return {
	massage:{	
		name："123",
		age:18,
		...
		}
	}
},
watch:{
	“massage.name”:{
		 handler(newValue,oldValue){
			 // 值变化时自动执行该函数
			 },
		 deep: true, // 记得开启深度监听后，只监听name属性变化
	 }
}

4、当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: ‘post’ 选项

5、监听器的另一种使用方法this.$watch()

export default {
  created() {
    this.$watch('question', (newQuestion) => {
      // ...
    })
  }
}

该方法有两个好处，一是可以在特定的条件下开启监听器，二是可以停止监听。
一般情况下，直到组件销毁才会停止监听，但是在特色情况下我们使用该方式进行监听，可以使用unwatch停止监听

const unwatch = this.$watch('foo', callback)

// ...当该侦听器不再需要时
unwatch()

监听器和计算属性的区别

1、监听器可以进行异步和dom的操作，计算属性不行
2、计算属性主要作用是对属性进行复杂计算时用于缓存计算值，只要依赖的值不变化，计算属性不会再次执行，而是直接返回上一次计算的结果，提高性能。
监听器主要时在监听值的变化并进行对应的操作。
他们俩对应的使用场景和使用方法都不一样，千万别混淆