Vue3的proxy优化了什么？为什么说更快了？

面经
1.2k words
  • 使用基于proxy初始化时懒处理，用户访问才做拦截处理，初始化更快一些，不是运行的时候更快了。
  • Vue3的响应式系统是其最核心的部分之一，它基于 ES6的 Proxy ,对象进行了全新的实现，与 Vue2基于 Object.defineProperty 的实现相比，不仅更高效还更强大。

主要概念:

  • Reactive:使用 reactive 函数可以将普通的 JavaScript 对象转化为响应式对象。
  • Ref:使用 ref 函数可以创建一个包含响应式值的单一引用。
  • Computed:computed 函数用于创建依赖于响应式对象的计算属性。
  • Watch 和 WatchEffect:允许你观察响应式数据的变化，并执行相应的操作。

工作原理:

  • 依赖追踪: 当你访问响应式对象的某个属性时，Vue 会自动“记住”这个访问，并将当前的“效果”(effect，通常是一个组件的渲染函数或一个 watcher)添加到这个属性的依赖列表中。
  • 响应式更新: 当你修改响应式对象的某个属性时，Vue 会找到依赖这个属性的所有效果，并将它们标记为“脏”(stale)以便重新执行或染。
  • 批量更新: Vue3的响应式系统会聪明地批量更新效果，以避免不必要的重复执行这一切都是自动、高效地完成的。
  • 嵌套属性: 由于使用了 Proxy，Vue3能够自动地使对象的嵌套属性也变成响应式的。Vue3的响应式系统同样支持数组，并能捕捉到数组的变异操作
  • 懒求值:computed 属性具有懒求值(lazy-evaluation)的特性，只有当其依赖的数据发生变化时，才会重新求值。

性能优化:

  • Shallow Reactive 和 Shallow Ref:可以用来创建“浅”响应式对象，即不会深入到嵌套属性。
  • Readonly:可以用来创建只读的响应式对象。
  • Batching:通过异步队列和 nextTick，Vue3能更智能地处理大量响应式更新，减少 DOM 操作和计算。
  • Suspense 和异步组件:与Vue的响应式系统结合，能够高效管理异步操作和状态。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { reactive, ref, computed, watch } from "vue";

// 创建响应式对象
const state = reactive({ count: 0 });

// 创建 ref
const countRef = ref(0);

// 创建计算属性
const double = computed(() => state.count * 2);

// 创建 watcher
watch(
  () => state.count,
  (newVal, oldVal) => {
    console.log(`count changed: ${oldVal} => ${newVal}`);
  }
);

// 修改状态，触发响应
state.count++;
countRef.value++;
Comments