const a = {
get a(){
// 实际上是存储在,compiler.data中的
// 因为有$data,会对data直接修改
const obj = get b(){
// 保存在values 闭包当中的
// 处理依赖收集 -- computed
return {
get c(){
// 与 b的逻辑一致
},
set c(){
// 1. 获取 闭包/values 中的数据
// 2. 解绑
// 3. copyPaths
// --- 全量数据修改
// 4. init 初始化
// -- 1. 事件流,广播
// -- a. 通知给
// -- 2. observe 对整个对象,进行监听/订阅
// -- 初始化的内容
}
}
}
obj.on("b",()=>{
// -- b. 接收到 c 修改的通知
// 触发 b.c 事件的修改
})
return obj
}
}
a.on("set",()=>{
// -- c.触发 a.b.c 事件的修改
})
vm ={
a
}
vm.on("set",()=>{
// -- d.最终渲染
observer.emit('change:a.b.c', mutation);
check(key); // --》 binging保证存在
// 渲染 --> binging 对象 update的执行
})
2. 初始化逻辑 - 确定对象信息
Emitter
-- Compiler 编译器 : 一个组件/viewModel 对应一个编译器
- data
-- el节点的初始化
-- 初始化和编译是两部分
-- bindings 所有的依赖修改
-- emitter
-- setupObserver 初始化
-- observer 事件流开始初始化
-- 最外层 依赖收集的get 和 binging。update() 的 set,在此处进行初始化
-- 生命周期 与 data的初始化 [开始进入生命周期阶段]
-- 在初始化前,this依然可以使用data中的属性
但是,data中的属性,此时并没有进行初始化[普通属性,而非访问器属性]
-- 对整个属性进行挂载/observer 处理
-- 对所有的属性进行初始化 迭代处理 [此时,a.b.c属性的修改,在事件上,已经打通,可以正确的获取到]
-- $data 的binging处理
-- compile 编译
-- 遍历所有的节点信息
-- 分析里面所有的指令和属性
-- binging的内容进行初始化
-- computed 的处理
-- 依赖收集
-- 对computed函数,进行执行
3. 看内容 -- 例子 vs 核心对象