Vue中ref与reactive的区别
2023-12-24 09:27:19
ref响应式变量
ref 函数传入一个值作为参数,返回基于该参数的响应式ref对象
ref 接受参数,并将其包裹在一个带有 value property 的对象中返回,然后可以使用该 property 访问或更改响应式变量的值
将值封装在一个对象中,看似没有必要,但为了保持 JavaScript 中不同数据类型的行为统一,这是必须的。这是因为在 JavaScript 中,Number或 String等基本类型是通过值传递的,而不是通过引用传递的,在任何值周围都有一个封装对象,这样我们就可以在整个应用中安全地传递它,而不必担心在某个地方失去它的响应性。
?
let { createApp, ref } = Vue;
createApp({
setup() {
const count = ref(0); //声明
const event = () => { //修改事件
count.value++;
};
return { count, event };
}
}).mount('#app')
reactive
let { createApp, reactive } = Vue;
createApp({
setup() {
const count = reactive({
a: 0
}); //声明
const event = () => { //修改事件
count.a++;
};
return { count, event };
}
}).mount('#app')
区别
ref主要用于基本类型的响应,比如String Number boolean,想要修改需要使用.value先获取value值进行修改
reactive主要用于声明引用类型,修改时对应修改即可
但是,在模板区域中使用的时候,ref因为Componsition API的封装,直接使用就行,不用加.value,但在setup函数中使用的时候必须加
注意!使用这两个的时候一定要先引入,再return出去
?
文章来源:https://blog.csdn.net/Z_B_L/article/details/135178298
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!