Vue3中ref与reactive有什么区别

本篇内容介绍了“Vue3中ref与reactive有什么区别”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

关键点

reactive() 只接受对象作为参数， 不支持 JS 原始类型 （String， Boolean，Number，BigInt，Symbol，null，undefined）。【相关推荐：vue.js教程】

ref() 会在后台调用 reactive()

因 reactive() 支持对象，而 ref() 内部调用 reactive()，故两个方法都支持对象

但是， ref() 有一个 .value 属性可以用来重新赋值，而 reactive() 不可重新赋值（会丢失响应性）

使用场景

ref()

当数值类型是 JS 原始类型时使用 (例如 'string', true, 23)

当赋值对象，且后续需要被重新赋值时 (例如一个数组 - 更多请见这里)

reactive()

当数值类型是对象，且不需要重新赋值时使用，ref() 内部也是调用 reactive()，无需徒增开销

总结

ref() 似乎是正确的选择，因为它支持全部的对象类型，而且可以通过 .value 重新赋值。 ref() 很好，但是当你熟悉 API 之后，就知道 reactive() 开销更小，可能发现这个更能满足需求。

ref() 案例

通过使用 ref() 来初始化，但是 ref() 对需要重新赋值的对象比较友好，例如数组。

setup() {
    const blogPosts = ref([]);
    return { blogPosts };
}
getBlogPosts() {
    this.blogPosts.value = await fetchBlogPosts();
}

上面采用 reactive() 的话，需要属性赋值取代对象赋值。

setup() {
    const blog = reactive({ posts: [] });
    return { blog };
}
getBlogPosts() {
    this.blog.posts = await fetchBlogPosts();
}

reactive() 案例

reactive() 适合对一组归属相同的数据初始化：

const person = reactive({
  name: 'Albert',
  age: 30,
  isNinja: true,
});

上面的代码比下面的更符合逻辑

const name = ref('Albert');
const age = ref(30);
const isNinja = ref(true);

“Vue3中ref与reactive有什么区别”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！