vue3 reactive的使用及解析

Vue 3 中的 reactive 函数是其响应式系统的核心部分，用于创建一个响应式对象。下面详细介绍 reactive 的使用和实现原理。

使用 reactive

1.基本使用：reactive 函数接收一个普通对象并返回该对象的响应式副本。任何对该响应式对象的修改都会自动被 Vue 捕捉到，从而触发视图的更新。

import { reactive } from 'vue';

const state = reactive({ count: 0 });

// 当 state.count 改变时，任何使用此状态的 Vue 组件都将更新。
state.count++;

2.与组件一起使用：在 Vue 组件中，reactive 对象通常用于存储和管理状态。

<script>
import { reactive } from 'vue';

export default {
    setup() {
        const state = reactive({ count: 0 });
        return { state };
    }
};
</script>

3.嵌套对象：reactive会递归地将嵌套对象转换为响应式。

const nestedState = reactive({
    inner: {
        count: 0
    }
});

// inner 也是响应式的
nestedState.inner.count++;

实现原理

Vue 3 的响应式系统是基于 ES6 的 Proxy 特性实现的。与 Vue 2 使用的 Object.defineProperty() 相比，Proxy 可以直接监听对象和数组的变化，而无需遍历属性。

1. Proxy：当创建一个响应式对象时，reactive 函数通过 new Proxy() 为目标对象创建一个代理。这个代理可以拦截对象的多种操作，如属性读取、属性设置、属性删除等。

2. 依赖收集：当读取代理对象的某个属性时，代理会收集当前活动的副作用（例如，正在渲染的组件），并在这些副作用中注册这个属性。这就是所谓的“依赖收集”。

3. 派发更新：当修改代理对象的属性时，代理会通知所有注册的副作用（例如，重新渲染组件）。这样，当状态改变时，Vue 可以自动更新依赖于这个状态的任何部分。

4. 响应式嵌套对象：reactive 还会递归地将嵌套对象包装在 Proxy 中，确保整个对象树都是响应式的。

5. 性能优化：Vue 3 的响应式系统利用了 Proxy 的优势，减少了初始化时的开销，并且只有在需要时才进行依赖收集和更新派发，这提高了整体性能。

源码概览

Vue 3的源码使用TypeScript编写，对于reactive，其核心实现主要在reactivity包中。这里简化并解释了主要的部分。

1.reactive函数：reactive函数首先检查传入的对象是否已经是一个Proxy。如果是，它直接返回该Proxy；如果不是，它会创建一个新的Proxy。

function reactive(target) {
    if (isReactive(target)) {
        return target;
    }
    return createReactiveObject(target, ...);
}

2.createReactiveObject函数：这个函数实际上使用new Proxy创建了响应式对象。

function createReactiveObject(target, baseHandlers) {
    if (!isObject(target)) {
        return target;
    }
    const proxy = new Proxy(target, baseHandlers);
    return proxy;
}

3.BaseHandlers：baseHandlers是一个包含get和set陷阱（traps）的对象。这些陷阱在访问和修改代理对象时被触发。

const baseHandlers = {
    get(target, key, receiver) {
        // 依赖收集...
        return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
        // 派发更新...
        return Reflect.set(target, key, value, receiver);
    },
    // 其他陷阱如deleteProperty, has等
};

以上只是源码的部分内容，完整源码可自行去github查看。

总结

Vue 3的reactive函数通过使用Proxy为JavaScript对象创建一个响应式的代理。这个代理可以拦截对象的基本操作，如读取和设置属性。Vue利用这些能力进行依赖收集和触发组件的重新渲染，从而实现了其响应式系统。这种方法提高了性能并允许Vue处理更复杂的响应式数据结构。这个源码解析给出了一个高层次的概述，Vue的响应式系统实际上包含更多的细节和优化。