0
点赞
收藏
分享

微信扫一扫

vue3中ref和reactive的区别

大家都知道vue3在9月18号晚上发布了,在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,今天我们来聊聊两种定义定义数据方式有什么不同

 

<template>
<div>
{{ name }}
{{ userInfo }}
</div>
</template>

<script>
import { ref, reactive } from "vue";
// setup 在init执行的
export default {
name: 'HelloWorld',
setup (props, context) {

const name = ref('啊sir')
console.log(name)
const userInfo = reactive({
age: 33,
school: '中学4年级'
})
console.log(userInfo)
return {
name,
userInfo
}
}
}
</script>

 

vue3中ref和reactive的区别_基本数据类型

 

 我们发现ref定义的数据打印结果需要.value才能获取到结果,而reactive则不需要

官方也推荐我们在定义数据的时候,reactive定义复杂的数据类型的数据,ref推荐定义基本数据类型,所以如果要使用reactive定义基本数据类型的话,我们需要在reactive中将数据包装一下

 

总结:

reactive 和 ref 都是用来定义响应式数据的 reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型

ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value

使用ref定义基本数据类型,ref也可以定义数组和对象。

举报

相关推荐

0 条评论