ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue3相应式原理 [打印本页]

作者: 铁佛 时间: 2024-11-24 17:42
标题: Vue3相应式原理
Vue 3 的相应式体系基于 Proxy 对象实现，具有更高的性能和灵活性，相比 Vue 2 使用的 Object.defineProperty 有明显的改进。以下是 Vue 3 相应式原理的关键部分：

1. 焦点机制

Vue 3 相应式体系的焦点是 reactive API，它使用 Proxy 拦截对对象的访问和修改，从而实现数据的追踪和更新。
1.1 reactive 的实现

import { reactive } from 'vue';
const state = reactive({
count: 0,
info: {
name: 'Vue',
version: 3
}
});

复制代码

在上述代码中：

reactive 会将传入的普通对象转换为相应式对象。
Vue 通过 Proxy 拦截对对象的利用（如 get、set），从而实现依赖网络和变革关照。

1.2 依赖网络与追踪

相应式体系的工作过程可以分为以下几步：

依赖网络：当某个相应式属性被访问时，Vue 会记载哪个组件或函数依赖了该属性。
触发更新：当相应式属性的值发生变革时，Vue 关照全部依赖该属性的函数重新执行。

依赖网络是通过 Effect 函数 实现的：

import { effect } from 'vue';
effect(() => {
console.log(state.count);
});

复制代码

在执行 effect 时，Vue 会自动订阅 state.count，因此当 state.count 的值发生变革时，该 effect 会重新运行。

2. Proxy 的焦点拦截点

Vue 3 的相应式体系通过 Proxy 提供的拦截机制，完成以下利用：
2.1 get：读取属性

当访问对象的属性时，Vue 会触发 get 拦截器，从而完成依赖网络：

const handler = {
get(target, key, receiver) {
const result = Reflect.get(target, key, receiver);
console.log(`读取属性 ${key}: ${result}`);
return result;
}
};

复制代码

2.2 set：修改属性

当修改对象的属性时，Vue 会触发 set 拦截器，从而关照依赖更新：

const handler = {
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
console.log(`设置属性 ${key}: ${value}`);
// 触发依赖更新
return result;
}
};

复制代码

2.3 track 和 trigger

Vue 3 将依赖追踪和触发分成了两个步骤：

track：在 get 中调用，用于记载依赖。
trigger：在 set 中调用，用于关照依赖更新。

3. 相应式工具

Vue 3 提供了一些内置工具和方法，资助开发者处理相应式对象。
3.1 reactive 和 ref

reactive：将对象或数组转换为相应式对象。
ref：用于包装单个值，使其具有相应式能力。

import { ref } from 'vue';
const count = ref(0);
effect(() => {
console.log(count.value); // 监听 count 的变化
});
count.value++; // 触发更新

复制代码

3.2 computed

computed 用于创建基于相应式数据的派生状态，并具有缓存功能。

import { computed } from 'vue';
const doubled = computed(() => count.value * 2);
console.log(doubled.value); // 自动计算并缓存结果

复制代码

4. 与 Vue 2 的对比

特性Vue 2 (Object.defineProperty)Vue 3 (Proxy)支持的数据类型仅支持对象和数组支持对象、数组、Map、Set 等多种类型深度相应式初始化时递归遍历对象按需追踪，性能更优新增/删除属性相应式需要 Vue.set 或 Vue.delete原生支持性能初始化开销较大，动态追踪效率低初始化开销小，动态追踪效率高

5. 总结

Vue 3 的相应式体系使用 Proxy 和优化的依赖追踪机制（track、trigger），实现了：

更灵活的相应式能力（支持 Map、Set 等）。
更高的性能（按需追踪，避免冗余盘算）。
更简便的 API（无需手动处理新增/删除属性）。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)