大家可能都知道,关于Vue的双向绑定,很多人都知道,核心是 Object.defineProperty() 方法,那接下来我们就简单介绍一下!
语法:
Object.defineProperty(obj, prop, descriptor)
其中:
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。
其实,简单点来说,就是通过此方法来定义一个值。
调用,使用到了 get 方法,
赋值,使用到了 set 方法。
vue 双向绑定内部核心就是利用了两个类, Dep 类和 watcher 类
每个在页面上使用了的属性、数组、对象都会有一个 Dep 类,访问属性的时候 get 方法会收集对应的 watcher
同样渲染 watcher 也会收集对应的 Dep
vue 内部实现双向绑定过程:简单来说就是初始化 data 的时候会调用 observe 方法给,data 里的属性重写 get 方法和 set 方法,到渲染真实 dom 的时,渲染 watcher 会去访问页面上使用的属性变量,给属性的 Dep 都加上渲染函数,每次修改数据时通知渲染 watcher 更新视图
打开 src/core/observer/index.js
export function observe(data) {
// 不是对象或者数组直接
return if (typeof data !== 'object' || data == null) { return } // 这里的 data 就是创建 vue 传入的 data 属性
return new Observe(data)
}
class Observe{
constructor(value) {
//添加 Dep
this.dep = new Dep()
//用于数组改变了可以获取到 Dep 进行更新视图
Object.defineProperty(value, '__ob__', {
value: this,
enumerable: false,
})
//vue 对数组做了特别的处理 数组重写了一些方法
if (Array.isArray(value)) {
//如果是数组重写数组方法,再进行尝试监听
value.__proto__ = arrayMethods;
//尝试监听数组内部的属性。
this.observeArray(value)
} else {
//递归处理对象
this.walk(value)
}
}
walk(data) {
Object.keys(data).forEach((key, index) => {
defineProperty(data,key,data[key])
} )
}
observeArray(value) {
value.forEach(item => {
observe(item)
})
}
}