Vue3 ref()：定义响应式数据（附带实例）

ref() 是 Vue3 组合式 API 中常见的用来定义响应式数据的函数。

ref() 函数接收一个任意类型的数据参数作为响应式数据，由 Vue 内部保存。ref() 函数返回一个响应式的 ref 对象，通过 ref 对象的 value 属性可以读取或者更新内部保存的数据。

我们知道，要想让模板操作 ref 对象，需要将 ref 对象添加到 setup() 函数返回的对象中。由于 ref 对象是响应式的，因此在模板中操作 ref 对象比较特殊，不需要我们亲自添加 .value 去操作它内部的数据，只需要指定 ref 对象就可以实现操作，因为模板在编译时会自动添加 .value 来读取或更新 value 属性值。

将上面所述过程通过代码来演示，具体如下：

<div id="app">
  <!-- 在模板中不用添加.value，内部模板在编译时会自动添加 -->
  <p>count: {{count}}</p>
  <button @click="increaseCount">增加 count</button>
</div>

<script>
const { createApp, ref } = Vue;

createApp({
  setup() {
    // 通过调用 ref 函数产生 ref 对象 count，并指定内部保存的数据的初始值为 0
    const count = ref(0);
    // 读取 ref 对象中的 value 属性值
    console.log(count.value); // 0
    // 定义更新 ref 响应式数据的函数
    const increaseCount = () => {
      // 先读取 value 属性值，加 1 后再更新到 value 属性上
      count.value = count.value + 1
    };
    // 返回包含 ref 对象和更新函数的对象
    return {
      count,
      increaseCount,
    };
  },
}).mount('#app');
</script>

运行代码后，页面上显示的是 count 的初始值 0，如下图所示：


点击“增加count”按钮后，显示的数量会自动增加 1，如下图所示：


ref() 函数除了可以接收基础类型的数据，还可以接收对象或数组类型的数据。无论是在 JavaScript 代码中，还是在模板代码中，我们都可以进行读取或更新数据操作。

需要注意的是，只有在 JavaScript 代码中才能通过添加 .value 来操作，而在模板中则不能通过添加 .value 来操作，请思考下方代码：

<div id="app">
  <!-- 在模板中不用添加.value，内部模板在编译时会自动添加 -->
  <p>person: {{person}}</p>
  <button @click="setNewPerson">指定新的人</button>
</div>

<script>
const { createApp, ref } = Vue;

createApp({
  setup(props, context) {
    // 创建 ref 对象，并指定内部初始值为一个人员信息
    const person = ref({ name: 'Tom', age: 12 });

    function setNewPerson() {
      // 指定 value 为一个新的人员信息
      person.value = { name: 'Jack', age: 23 };
    }

    return {
      person,
      setNewPerson
    };
  },
}).mount('#app');
</script>

运行代码后，页面上显示的是 Tom 的信息，如下图所示：


点击“指定新的人”按钮后，就变为了 Jack 的信息，如下图所示：


数组和对象的读取与更新采用的是相同的方式，这里不多做讲解。至此，读者可能会有这样一个疑问：如果点击按钮不是指定一个新的人员信息，而是更新对象中的 nam e或 age 属性值（如 person.value.age=24），那么页面会自动更新吗？答案是会更新，但这涉及 reactive() 函数。