首页  >  文章  >  web前端  >  Vue3中 ref VS reactive,浅谈它们间有何区别?

Vue3中 ref VS reactive,浅谈它们间有何区别?

青灯夜游
青灯夜游转载
2021-10-25 10:06:185371浏览

本篇文章带大家了解一下Vue.js 3 中 ref 和 reactive,介绍一下ref和reactive中的区别,希望对大家有所帮助!

Vue3中 ref VS reactive,浅谈它们间有何区别?

关键点

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

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

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

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

使用场景

<strong>ref()</strong>

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

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

<strong>reactive()</strong>

当数值类型是对象,且不需要重新赋值时使用,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: &#39;Albert&#39;,
  age: 30,
  isNinja: true,
});

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

const name = ref(&#39;Albert&#39;);
const age = ref(30);
const isNinja = ref(true);

更多编程相关知识,请访问:编程视频!!

以上是Vue3中 ref VS reactive,浅谈它们间有何区别?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文转载于:learnku.com。如有侵权,请联系admin@php.cn删除