vue中的计算属性和监听属性

vue中的计算属性

计算属性

• 定义
  • 要用的属性不存在，要通过已有的属性计算得来，已有的属性可以是自己的定义的也可以是从其它组件传递而来的。
• 原理：和数据的双向绑定一样，利用了Object.defineproperty方法提供的setter和getter
• 在计算属性中get函数的执行
  • 在初次读取时会执行一次
  • 当依赖的数据发生变化时会被再次调用
• 优势：其实我们自己写方法也能实现计算属性的效果，但是计算属性内部有缓存机制（复用），效率更高，调试方便
• 备注
  • 计算属性最终是在Vue的实例上的，所以我们直接用即可，和data中的属性一样
  • 一般计算属性我们只读取，但如果要修改的话，那必须配置set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<template>
<h1>{{fullName}}</h1>
</template>
computed:{
//完整的写法
fullName:{
	get(){
	retuen this.name
	}
	set(value){
	this.name = value
	}
}
//简写
fullName(){
return this.name
}//此时就想当于是getter
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

监听属性

监听属性watch

• 当被监听的属性发生变化时，回调函数自动调用。
• 监听的属性必须存在，才能进行监视，不会报错但是回调函数的参数都为undefined
• 监听属性的写法

watch:{
	//当有除回调函数的其它配置项时只能完整的写
	fullName:{
	//还有很多配置属性
	immediate:true,//初始化时让handler调用，默认false
	deep:true,//开启深度监视，为了效率默认是不开的
	handler(newValue,oldValue){}
	}
	//当只有回调函数时就可以简写成下面这样
	fullName(newValue,oldValue){}
}
还可以通过下面这样，vm是vue的实例
vm.$watch('fullName',handler(){})
简写
vm.$watch('fullName',function(newValue,oldValue){})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

watch中的深度监视

• Vue中的watch默认不监视对象内部值的改变
• 配置deep为true可以监听对象内部值的改变
• Vue自身是可以监听对象内部值改变的，但是提供的watch是不能监听的

计算属性和监听属性的区别

大部分情况下两者能实现功能都差不多，根据需求选择。
但是当根据变化要做异步处理时，此时只能使用监听属性，原因是计算属性必须返回一个值，当进行异步操作时此时就会有this指向问题。
原则：
1.被vue管理的函数，最好写成普通函数，这时this的指向才是组件实例对象或者vue实例
2.不被vue管理的函数最好写成箭头函数（定时器的回调，promise的回调，ajax的回调）,写成监听函数此时this才能指向组件实例对象或者vue实例