揭秘 Vue 3 响应式：ref 和 reactive 的神奇世界

前端

2023-09-13 09:33:36

各位前端大神，今天我们踏上激动人心的旅程，一起探索 Vue 3 中 ref 和 reactive 的奥妙世界。这些强大工具携手合作，赋予了 Vue 3 非凡的响应式能力，让我们的代码生机勃勃。

ref 和 reactive 的起源

Vue 3 的响应式系统依托于 Proxy 对象。在组件实例化过程中，组件的 data 对象会被转换成响应式的 Proxy 对象。如此一来，数据中的任何变动都能被 Vue 3 敏锐捕捉，进而触发更新。

ref 的使命在于获取 DOM 元素或组件实例的引用。它充当了组件与外部世界之间的桥梁，允许我们直接操作 DOM 或访问组件的内部状态。

reactive 则赋予普通 JavaScript 对象响应式能力。通过包裹对象，reactive 确保其属性的变化能实时反映在 UI 中，无需手动调用 this.$forceUpdate()。

响应式原理的揭秘

Vue 3 响应式系统采用依赖收集机制。当响应式数据发生变化时，Vue 3 会收集所有依赖于该数据的组件。然后，它会触发这些组件重新渲染，将更新后的数据反映到界面中。

这种机制依赖于 Proxy 对象的 getter 和 setter 函数。当读取或修改响应式数据时，这些函数会被触发，Vue 3 借此收集依赖关系并调度更新。

ref 和 reactive 的应用场景

ref 适用于以下场景：

获取 DOM 元素的引用，以便进行直接操作或事件处理。
获取组件实例的引用，以便调用方法或访问内部状态。
解决跨组件通信问题，例如通过提供者和注入机制传递数据。

reactive 则适用于以下场景：

将普通 JavaScript 对象转换为响应式对象，实现数据绑定的双向流。
避免手动调用 this.$forceUpdate()，简化数据更新流程。
轻松创建嵌套响应式对象，构建复杂的数据结构。

示例代码

以下示例展示了 ref 和 reactive 的使用：

<template>
  <div ref="myRef">
    <button @click="updateRef">更新 ref</button>
  </div>
</template>

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

export default {
  setup() {
    const myRef = ref(null);
    const data = reactive({
      name: 'Vue 3',
      version: 3
    });

    const updateRef = () => {
      console.log(myRef.value.getBoundingClientRect());
    };

    return {
      myRef,
      data,
      updateRef
    };
  }
};
</script>