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

lxf2023-04-25 17:42:01

首页 > 沸点
> 正文

前言

大家好，我叫JetTsang，之前都是在AdminJS潜水来着，现在偶尔做一些内容输出吧。

我们平时的面试过程当中，问到Vue，几乎都会问到响应式的问题，因为在Vue的实现当中，响应式系统的实现就占据很大一个篇幅。这是Vue声明式编程的基石。那么如何理解响应式数据呢？相信结合源码以及手写实现会有一个更深入的理解。

问题引出

什么是响应式数据？

响应式数据，意思是当数据发生变化后，会触发副作用的执行，从而达到某些目的。这与Vue所推崇的声明式编程简直不谋而合。利用代理模式，拦截到数据的变化，从而可以具备驱动视图变化的能力。这不就是能实现声明式编程里面核心的响应式部分了吗？比如说，我所声明的视图里，使用到了数据，当这个数据改变后，视图跟着数据变化同步更新。

响应式数据的实现

在Vue2 当中可以这样实现

    // 定义一下基础数据对象

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)

可以在控制台看到

面试官：请你说说对Vue响应式数据的理解其实对数组也是可以进行defineProperty的，但Vue的设计者明显考虑了性能和使用上的平衡，因此对数组做了特殊处理，待会在源码揭秘环节可以更细节的看到。

补充完善对数组的响应式处理 vue2当中，对会改变数组本身的方法（shift unshift push pop splice sort reverse）进行了重写，从而实现数组的响应式

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

}

可以看到，新的原型已经挂在上面了

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

Vue 2 当中的缺陷是什么？

不难看出，Vue2当中的缺陷基本上是由于defineProperty的局限性导致的，总结一下是：

defineProperty需要递归去添加getter和setter，比较浪费性能
权衡之后数组不采用defineProperty，而是重写了原型上的会改变数组本身的方法（shift unshift push pop splice sort reverse）
新增和删除不能实现被监听到，需要额外的 $s e t 和 set 和$ delete 这两个API
对ES6的新数据结构Map和Set不支持响应式

那么Vue 3当中又做了哪些改变呢？

Vue 3 基于 ProxyAPI可以去除以上缺点

Vue3 采用Proxy这个API来实现数据的代理，从而实现整个响应式系统，抛弃了一些兼容性，同时获得更好的性能提升


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);