Vue 双向数据绑定原理

您所在的位置：网站首页 › vue给属性赋值 › Vue 双向数据绑定原理

Vue 双向数据绑定原理

2023-05-19 19:01| 来源: 网络整理| 查看: 265

大家可能都知道，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) }) } }

Dep 类的实现src/core/observer/dep.js

let id = 0 export class Dep{ constructor() { this.subs = []; this.id = id++ } //给 watcher 添加 Dep depend() { Dep.target.addDep(this) } //给 dep 添加对应的 watch addSub(watch) { this.subs.push(watch) } //调用 watcher 里的渲染函数 notify() { this.subs.forEach((watcher) => { if (watcher) { watcher.upDate() } }) } } const targetStack = [] // 渲染阶段，访问页面上的属性变量时，给对应的 Dep 添加 watcher export function pushTarget(watcher) { targetStack.push(watcher) Dep.target = watcher } // 访问结束后删除 export function popTarget() { targetStack.pop() Dep.target = targetStack[targetStack.length - 1] }

每个属性、对象、数组上都有一个 Dep 类型，Dep 类主要就是收集用于渲染的 watcher

watcher 类 src/core/observer/watcher.js接着看看defineProperty方法

export class Watcher { constructor(vm,expOrFn,cb,options) { this.vm = vm this.expOrFn = expOrFn this.deps = []; this.set = {} this.id = id++ if (typeof expOrFn === 'function') { this.getters = expOrFn } this.value = this.get(); } addDep(dep) { let id = dep.id //去重防止 dep 添加 watch 多次 if (!this.set[id]) { // watcher 添加 dep this.deps.push(dep) //重点！给 dep 添加 watch dep.addSub(this) this.set[id] = true; } } get() { //标记 target pushTarget(this) // 重点，这里会去访问我们给属性重写的 get 方法，添加 watcher 依赖 this.getters.call(this.vm, this.vm); //弹出target防止data上每个属性都产生依赖，只有页面上使用的变量需要依赖 popTarget() return value } upDate() { this.get(this) } }

接着看看defineProperty方法

function defineProperty(data, key, value) { //childDep 这个 dep 只会存在 {} 或 [] 里面 let childDep = observe(value) //这个 dep 会存在每个属性里面 let dep = new Dep(); Object.defineProperty(data, key, { get() { //渲染的期间给每个放在页面上的变量添加 watcher //只有渲染阶段才会 Dep.target ，有正常访问 target 是没有的 if (Dep.target) { //给属性 dep 添加 watcher dep.depend() if (childDep) { //给属性是数组或者是对象的添加 watcher childDep.dep.depend() if (Array.isArray(value)) { //如果是数组递归数组给数组里面的数组添加 watcher dependArray(value) } } } return value }, set(newValue) { if(newValue == value)return //更新数组或者对象的时候也要创建一个新的 dep 给 childDep childDep = observe(newValue) value = newValue //更新视图 dep.notify() } }) }

初始化 data 属性时，递归给 data 的属性，重写 get set，同时会给它们身上都添加一个 Dep 类，

渲染阶段 Dep 类会收集 watcher 。每次修改数据会调用 dep.notify() 更新视图

【本文地址】

Vue 双向数据绑定原理

Vue 双向数据绑定原理

今日新闻

推荐新闻