本篇文章带大家了解一下Vue.js 3 中 ref 和 reactive,介绍一下ref和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: 'Albert', age: 30, isNinja: true, });
上面的代码比下面的更符合逻辑
const name = ref('Albert'); const age = ref(30); const isNinja = ref(true);
更多编程相关知识,请访问:编程视频!!
以上是Vue3中 ref VS reactive,浅谈它们间有何区别?的详细内容。更多信息请关注PHP中文网其他相关文章!