揭秘vue3中ref()和reactive()的终极用法

Vue.js 中的 ref() 和 reactive()：数据绑定的秘密武器

ref() 函数：让基本数据类型动起来

想象一下你在做一份表单，每个输入框都对应一个不同的数据值。在 Vue.js 3 中，你可以使用 ref() 函数将这些基本数据类型（如字符串和数字）变成响应式数据。这意味着，当你在输入框中输入内容时，视图会自动更新，显示你的输入。

代码示例：

<template>
  <input type="text" ref="name" />
</template>

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

export default {
  setup() {
    const name = ref(''); // 包装基本数据类型字符串
    return {
      name
    };
  }
};
</script>

reactive() 函数：赋予对象生命

而 reactive() 函数是用来处理对象的。它能将一个普通对象转换成响应式对象。这意味着，当对象中的任何属性改变时，视图也会自动更新。

代码示例：

<template>
  <div>{{ user.name }}</div>
</template>

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

export default {
  setup() {
    const user = reactive({ name: 'John' }); // 包装用户对象
    return {
      user
    };
  }
};
</script>

ref() 和 reactive() 的对比

• 包装类型： ref() 只能包装基本数据类型，而 reactive() 可以包装对象。
• 返回类型： ref() 返回一个引用，而 reactive() 返回一个代理对象。
• 数据类型： ref() 包装的基本数据类型是可变的，而 reactive() 包装的对象是不可变的。

用法场景

• ref()： 当你需要频繁改变基本数据类型时，例如表单输入中的数据。
• reactive()： 当你需要频繁改变对象及其属性时，例如用户数据。

最佳实践

• 尽量使用 ref() 来包装基本数据类型，reactive() 来包装对象。
• 避免在 ref() 和 reactive() 中使用复杂逻辑，将其放在 computed() 函数中。
• 避免在 ref() 和 reactive() 中产生副作用，将其放在 methods() 函数中。

常见问题

• 为什么我对 ref() 包装的基本数据类型直接赋值时，视图没有更新？

因为 ref() 包装的基本数据类型是可变的。你需要使用 ref().value 访问它的值，或使用 ref().set() 方法对其进行修改。

• 为什么我对 reactive() 包装的对象的属性直接赋值时，视图没有更新？

因为 reactive() 包装的对象是不可变的。你需要使用 reactive().propertyName 访问它的属性，或使用 reactive().set() 方法对其进行修改。

结论

ref() 和 reactive() 是 Vue.js 3 中数据绑定的核心，它们使创建响应式应用程序变得轻而易举。通过理解它们的差异和最佳实践，你可以构建高效且用户友好的界面。