Vue - 监视属性和 Vue检测数据改变的原理

---

一、监视属性 - watch

通过vm对象的$watch() 或 watch 配置来监视指定的属性

1. watch的使用

watch后面跟的是一个配置对象.

watch配置对象里面放的参数

1. 要监听哪个数据
   要监听的数据后面跟的也是一个配置对象 :

要监听的数据里面放的参数

1. handler函数 :
   • handler函数什么时候调用 ?
     • 当监听的数据发生改变时.
   • handler函数提供了两个参数, newValue 和 oldValue
     • newValue : 修改后的数据.
     • oldValue : 修改前的数据
2. immediate : 立即执行, 默认是false.

二、Vue检测数据改变的原理

1. Vue是如何检测对象里面数据的变化

Vue底层写了一个构造函数, 叫做Observer , 它能创建一个检测的实例对象. 用于监视data中属性的变化.
它收到一个对象作为参数.

2. Observer大概实现流程

function Observer(obj) {
	// 1. 汇总对象中所有的属性形成一个数组
	const keys = Object.keys(obj)
	// 遍历
	keys.forEach((k)=>{
		// 这里的this是Observer的实例对象.
		Object.defineProperty(this, k,{
			get(){
				return obj[k]
			},
			set(val){
				obj[k] = val
			}
		})
	})
}

Vue实现数据响应式的原理就是setter

三、Vue.set()方法

Vue后添加的数据不参与响应式, 因为后添加的数据没有getter和setter

可以使用Vue提供的set()方法实现后添加的数据也有响应式的功能

1. set()方法的使用

set() 方法有三个参数.

• target : 往谁的身上添加属性.
• key : 属性名
• val : 属性值

还有一个方法, vm.$set() 和 Vue的set()方法使用方法和完成的功能是一样的

2. set()方法注意事项

vm 和 根数据 vm.data 不允许作为target.

三、Vue检测数据改变的原理 - 数组

Vue监听数组数据改变不是通过响应式, 而是通过修改数组的方法

1. 哪些数组的方法是响应式的呢

Vue对数组的检测是靠数组身上的常用修改数组的方法实现的.