vue1源码07

27 阅读1分钟
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 核心对象