vue原理之observer

向右看齐 2023-01-16 09:36 95阅读 0赞

上节课我们讲了vue五种类型中的vue 实现data响应  
这节课我们讲第二中类型observer

## Observer ##

**功能  
负责把 data 选项中的属性转换成响应式数据  
data 中的某个属性也是对象，把该属性转换成响应式数据  
数据变化发送通知**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA5Nzk0NA_size_16_color_FFFFFF_t_70_pic_center]

## 具体代码实现如下 ##

class Observer { 
            constructor(data) { 
                this.walk(data)
            }
            // 1. 判断数据是否是对象，如果不是对象返回 
            // 2. 如果是对象，遍历对象的所有属性，设置为 getter/setter
            walk(data) { 
                if (!data || typeof data != 'object') { 
                    return
                }
                Object.keys(data).forEach(key => { 
                    this.defineReactive(data, key, data[key])
                })
            }
            // 定义响应式成员 即对data总的数据实现setter和getter
            defineReactive(data, key, val) { 
                const that = this
                // 如果 val 是对象，继续设置它下面的成员为响应式数据 
                this.walk(val)
                Object.defineProperty(data, key, { 
                    enumerable: true,
                    configurable: true,
                    get() { 
                        return val;
                    },
                    set(newValue) { 
                        if (val === newValue) { 
                            return
                        }
                        // 如果 newValue 是对象，设置 newValue 的成员为响应式 
                        that.walk(newValue)//这里不用this 因为在set方法中 在function的内部 会开启新的作用域 此时的this执行data对象 
                        val = newValue;
                    }
                })
            }
        }

整体代码如下：

// 具体实现步骤
    // 1： 通过属性 保存选项的数据
    // 2： 把data中的成员 转换为getter和setter 注入到vue实例中 方便使用
    // 3：调用observer对象 监听数据变化
    // 4：调用compiler 解析指令和插值表达式
    class Vue { 
        constructor(options) { 
            // 通过属性 保存选项的数据
            this.$options = options || { };//如果我们在调用vue构造函数的时候 没有传入参数 我们初始化一个空对象
            this.$data = options.data || { };
            this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el;//如果我们是传入的选择器 则将选择器转换为dom对象
            // 把data中的成员 转换为getter和setter 注入到vue实例中 方便使用
            this._proxyData(this.$data)
            // 调用observer对象 监听数据变化
            new Observer(this.$data)
            // 调用compiler 解析指令和插值表达式 
        }
        _proxyData(data) { //vue传过来的参数 转换为getter和setter
            // 遍历data的所有属性
            Object.keys(data).forEach(key => { 
                Object.defineProperty(this, key, { 
                    // 可遍历 可枚举
                    enumerable: true,
                    configurable: true,
                    get() { 
                        return data[key]
                    },
                    set(newValue) { 
                        if (newValue === data[key]) { 
                            return
                        } else { 
                            data[key] = newValue;
                        }
                    }
                })
            })
            // 把data中的属性 注入到vue实例中
    
        }
    }
    class Observer { 
        constructor(data) { 
            this.walk(data)
        }
        // 1. 判断数据是否是对象，如果不是对象返回 
        // 2. 如果是对象，遍历对象的所有属性，设置为 getter/setter
        walk(data) { 
            if (!data || typeof data != 'object') { 
                return
            }
            Object.keys(data).forEach(key => { 
                this.defineReactive(data, key, data[key])
            })
        }
        // 定义响应式成员 即对data总的数据实现setter和getter
        defineReactive(data, key, val) { 
            const that = this
            // 如果 val 是对象，继续设置它下面的成员为响应式数据 
            this.walk(val)
            Object.defineProperty(data, key, { 
                enumerable: true,
                configurable: true,
                get() { 
                    return val;
                },
                set(newValue) { 
                    if (val === newValue) { 
                        return
                    }
                    // 如果 newValue 是对象，设置 newValue 的成员为响应式 
                    that.walk(newValue)//这里不用this 因为在set方法中 在function的内部 会开启新的作用域 此时的this执行data对象 
                    val = newValue;
                }
            })
        }
    }
    
    let vm = new Vue({ 
        el: '#app',
        data: { 
            msg: 'hello',
            count: 123,
            person: { 
                name: 'zs'
            }
        }
    })
     vm.msg={ 'sex':'ada'}

上一篇：[vue原理代码的基本实现][vue]  
下一篇：[详解vue原理中的编译compiler][vue_compiler]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA5Nzk0NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/b2d6b670e9ec444b93e5bf992e1abf8b.png
[vue]: https://blog.csdn.net/weixin_43097944/article/details/116107335?spm=1001.2014.3001.5501
[vue_compiler]: https://blog.csdn.net/weixin_43097944/article/details/116131309