深入理解vue核心之一数据响应式

vue响应式在初始化的时候混入响应式initState文件，利用的是Object.defineProerty进行数据劫持在改方法里面绑定get方法和set方法，每一个组件会生成一个Watcher,它主要是保存更新函数 值发生变化调用更新函数updateComponent 再进行diff算法 对比实现更新 具体可以查看源码 下面实现小demo说明响应式。

// 第一步 定义一个对象
const obj = { foo: ‘foo’, bar: ‘bar’, baz: { a: 1 }}
// 第二步 实现响应式更新函数
observe(obj)

function observe(obj) {
// 如果要对数组做响应式 必须覆盖数组默认方法
if (typeof obj !== ‘object’ || obj == null) {
// 希望传入的是obj
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}

function defineReactive(obj, key, val) {
// 递归 因为有可能val是对象
observe(val)

// 对传入obj进行访问拦截
Object.defineProperty(obj, key, {
get() {
console.log('get ’ + key);
return val
},
set(newVal) {
if (newVal !== val) {
console.log('set ’ + key + ‘:’ + newVal);
// 如果传入的newVal依然是obj，需要做响应化处理
observe(newVal)
val = newVal
}
}
})
}
// 第三步 然后再对改对象进行更新
obj.foo = ‘xxxx’;

下期预告:这里只是数据响应式, 如何实时将数据动态显示在页面 需要编写一个编译器 下期带来编译器的deom