【面试题】面试官：请你说说对Vue响应式数据的理解

    // 定义一下基础数据对象
const obj = {
    name: "Jettsang",
    age: 25,
    arr:[1,2,3],
    msg:{
        phoneCode:'12345678901',
        address:'唐宁街10号'
    }
}
// vue 2 定义响应式，其实对defineProperty的封装
function defineReactive(target,key ,value){
    // 对value进行递归定义响应式（如果value是对象的话）
    observer(value)
    Object.defineProperty(target,key,{
        get(){
            // 在这里收集依赖，记录下watcher
            return value
        },
        set(newVal){
            if(value !== newVal){
                value = newVal
                // 别忘了对新的值定义响应式，因为新的值可能是对象
                observer(newVal)
                // 触发watcher通知视图更新
            }
        }
    })
}
function observer(data){
    if(typeof data !=='object' || typeof data == null){
        return data
    }
// 这里是enumerable对象，用for in 遍历
    for(let key in data )
    {
    // 定义响应式
        defineReactive(data,key,data[key])
    }
}
observer(obj)
复制代码

function observer(data) {
    if (typeof data !== 'object' || typeof data == null) {
        return data
    }
    // 增加对数组的特殊处理
    if (Array.isArray(data)) {
        setArrayProto(data)
        return
    }
    for (let key in data) {
        defineReactive(data, key, data[key])
    }
}
// 定义需要重写的方法
const OVERRIDE_METHODS = ['push', 'pop', 'unshift', 'shift', 'reverse', 'sort', 'splice']
// 定义重写proto上数组方法的函数
function setArrayProto(data) {
    const prototype = Array.prototype
    // 这里的create方法会将 newPrototype的原型指向prototype
    // 因此通过原型链接仍然可以获取其他的Array原型方法
    const newPrototype = Object.create(prototype)
    OVERRIDE_METHODS.forEach(method=>{
        newPrototype[method] = function(...args){
            // 这里可以加入响应式逻辑
            // 。。。
            // 注意this的指向
            prototype[method].call(this,...args)
        }
    })
    data.__proto__ = newPrototype
}
复制代码

function reactive(target){
    return new Proxy(target,{
        get(target,key){
            const value = target[key]
            // 如果是对象，需要代理该对象
            // 注意了，这里是触发getter才会去响应式，可以节省性能
            if(typeof value =='object'){
                return reactive(value)
            }
            // 这里可以加收集依赖的逻辑了
            // 。。。
            return Reflect.get(target,key)
        },
        set(target,key,value){
            const oldValue = target[key]
            // 如果值不相等，才去设置
            if(oldValue !== value){
                Reflect.set(target,key,value)
            }
            // 触发副作用函数：比如刷新视图
            // 。。。
            return true
        }
    })
}
const proxyObj = reactive(obj)
console.log(proxyObj);
复制代码