响应式系统：Vue3 应用程序中的动态魔力

2023-09-11 11:32:42

剖析 Vue3 的响应式系统：揭秘 ref 与 reactive 的奥秘

欢迎来到 Vue3 响应式系统的探索之旅！在本文中，我们将深入剖析 ref 和 reactive，揭开它们如何赋能你的 Vue 应用程序响应式魔法的神秘面纱。

ref：捕捉难以捉摸的 DOM 元素

想象一下，你正在构建一个 Todo 应用程序，想要在用户点击按钮时获取输入框的文本值。对于这样的场景，ref 就是你的理想选择。

<template>
  <input type="text" ref="inputRef" />
  <button @click="logInputValue">Log Input Value</button>
</template>

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

export default {
  setup() {
    const inputRef = ref(null);

    const logInputValue = () => {
      console.log(inputRef.value.value);
    };

    return {
      inputRef,
      logInputValue,
    };
  },
};
</script>

通过使用 ref("inputRef")，我们将输入框元素的引用赋给 inputRef 变量。在 logInputValue 函数中，我们可以通过访问 inputRef.value 来获取输入框的 DOM 元素，并进一步获取其值。

reactive：让对象变得响应起来

reactive() 函数是 Vue3 中的另一项利器，它可以将普通 JavaScript 对象转换为响应式对象。当响应式对象中的任何属性发生改变时，Vue 应用程序将自动检测并更新。

<template>
  <div>{{ message }}</div>
</template>

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

export default {
  setup() {
    const message = ref('Hello, world!');
    const object = reactive({
      foo: 'bar',
      baz: 123,
    });

    return {
      message,
      object,
    };
  },
};
</script>