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也可以定义数组和对象。