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>

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

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

总结:

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

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

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

如果这篇文章对您有帮助，您可以打赏我

技术交流QQ群：15129679