Vue的数据响应式原理 (Vue2的原理)
通过相关的方法,实现当数据改变时可以触发一个函数(实现数据改变的监听效果)
在vue里实现了一个Observe的构造函数,可以利用该函数,把普通对象中的属性添加getter和setter方法,其中核心的属性就是Object.definProperty。一旦数据改变时,则会触发对应的setter函数,setter函数触发就会告知对应的监听器,监听器监听到之后,触发render函数,重新渲染页面
<script>
function Observer (data) {
this.data = data
this.init()
}
// 创建一个方法init
Observer.prototype.init = function () {
// 获取到data
let data = this.data
// 获取data中所有的key并且进行遍历
Object.keys(data).forEach(key => {
// data 是对象 key是属性 data[key]是值
this.defineReactive(data, key, data[key])
})
}
Observer.prototype.defineReactive = function (obj, key, value) {
if (typeof value === 'object') {
new Observer(value)
}
// 调用Object.definProperty
Object.defineProperty(obj, key, {
get () {
return value
},
set (newValue) {
// 如果设置后的值相同,则不需要进行操作
if (value === newValue) {
return
}
if (typeof newValue === 'object') {
value = new Observer(newValue).data
} else {
value = newValue
}
}
})
}
const data = {
msg: "Hello Vue",
num: 1,
obj: {
a: 1,
b: 2,
c: {
a: 1
}
}
}
const _data = new Observer(data).data
</script>