关键点Reactive() 只接受对象作为参数, 不支持 js 原始类型 (String, Boolean, Number, BigInt, Symbol, null, undefined)ref() 会在后台调用 reactive()因
Reactive()
只接受对象作为参数, 不支持 js 原始类型 (String, Boolean, Number, BigInt, Symbol, null, undefined)
ref()
会在后台调用 reactive()
因 reactive()
支持对象,而 ref()
内部调用 reactive()
,故两个方法都支持对象
但是, ref()
有一个 .value
属性可以用来重新赋值,而 reactive()
不可重新赋值(会丢失响应性)
ref()
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);
--结束END--
本文标题: Vue.js 3 中 ref 和 reactive 有何区别?
本文链接: https://www.lsjlt.com/news/33008.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0