vue。js的响应式原理

Vue.js的响应式原理
Vue.js 是一个 MVVM 框架,实现了数据的双向绑定。Vue 通过数据劫持和观察者模式,实现数据的响应式更新。当数据发生变化时,Vue 会触发DOM 更新,达到双向绑定的效果。

数据劫持observer
Vue 利用 Object.defineProperty() 劫持 data 中的属性,当这些属性修改时可以触发对应的更新。

var data = { name: ‘John’ }
observe(data)

function observe(obj) {
if (!obj || typeof obj !== ‘object’) return
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}

function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function() {
// …
},
set: function(newVal) {
console.log(属性 ${key} 已更新,新值为:, newVal)
}
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
上面代码在data对象上定义了name属性的getter和setter,在name属性修改时会触发setter函数,实现对属性修改的监听。

Vue 无法检测对象的添加和删除属性。我们可以使用Vue.set(object, key, value)方法添加属性,或者this.$set(object, key, value)方法。

观察者模式
Vue 利用观察者模式,实现数据更新后的DOM渲染。每个组件实例对应一个观察者watcher,在数据更新时会通知watcher重新渲染。这里是观察者模式的实现:

class Watcher {
constructor(vm, exprOrFn, callback) {
this.vm = vm
// 保存旧值,用于对比非深层监听
this.oldValue = this.getOldValue()
}

getOldValue() {
Dep.target = this
let oldValue = compileUtil.getVal(this.expr, this.vm)
Dep.target = null
return oldValue
}

update() {
let newValue = compileUtil.getVal(this.expr, this.vm)
if (newValue !== this.oldValue) {
this.callback(newValue)
this.oldValue = newValue
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
compileUtil.getVal()会触发getter函数,添加watcher到属性的订阅器dep中。属性更新时,会调用watcher的update()方法重新渲染。

模板编译
Vue 在实例化时会编译模板,解析指令和插值表达式,并用更新函数替换它们。

{{ msg }}

1 编译结果:

_s(msg)

1 _s()会作为更新函数,在数据变化重新渲染页面。

所以输入框的v-model和双大括号,本质上添加的都是数据更新所对应的更新函数,从而实现了双向绑定。

总结
Vue 的响应式原理主要通过:

Object.defineProperty()劫持data属性的getter/setter
观察者模式:属性变化触发setter,通知订阅者watcher更新
模板编译:解析指令和插值,绑定更新函数
virtual DOM更新真实DOM
Vue3则使用Proxy替代defineProperty,以更好地支持对象的响应式。
————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/ximing020714/article/details/131715347