vue3.0里给数据添加响应式有很多api可用,有时傻傻分不清,分享一下个人的理解。

<>一、reactive

reactive 用于为对象添加响应式状态。
接收一个js对象作为参数,返回一个具有响应式状态的副本。

* 获取数据值的时候直接获取,不需要加.value
* 参数只能传入对象类型 import { reactive } from 'vue' // 响应式状态 const state = reactive({
count: 0 }) // 打印count的值 console.log(state.count)
<>二、ref

ref 用于为数据添加响应式状态。
由于reactive只能传入对象类型的参数,而对于基本数据类型要添加响应式状态就只能用ref了,同样返回一个具有响应式状态的副本。

*
获取数据值的时候需要加.value。(对于基本数据类型,ref是自己的实现方式且性能优于reactive,而对于对象类型,ref可以理解为是通过reactive包装实现的)
* 参数可以传递任意数据类型,传递对象类型时也能保持深度响应式,所以适用性更广。
* vue 3.0 setup里定义数据时推荐优先使用ref,方便逻辑拆分和业务解耦。 import { ref } from 'vue' //
为基本数据类型添加响应式状态 const name = ref('Neo') // 为复杂数据类型添加响应式状态 const state = ref({
count: 0 }) // 打印name的值 console.log(name.value) // 打印count的值 console.log(state.
value.count)
<>三、toRef

toRef 用于为源响应式对象上的属性新建一个ref,从而保持对其源对象属性的响应式连接。
接收两个参数:源响应式对象和属性名,返回一个ref数据。
例如使用父组件传递的props数据时,要引用props的某个属性且要保持响应式连接时就很有用。

* 获取数据值的时候需要加.value
* toRef后的ref数据如果是复杂类型数据时,不是原始数据的拷贝,而是引用,改变结果数据的值也会同时改变原始数据 import {
defineComponent, toRef } from 'vue' export default defineComponent({ props: [
title], setup (props) { // 创建变量myTitle const myTitle = toRef(props, 'title')
console.log(myTitle.value) } })
<>四、toRefs

toRefs 用于将响应式对象转换为结果对象,其中结果对象的每个属性都是指向原始对象相应属性的ref。
常用于es6的解构赋值操作,因为在对一个响应式对象直接解构时解构后的数据将不再有响应式,而使用toRefs可以方便解决这一问题。

* 获取数据值的时候需要加.value
* toRefs后的ref数据如果是复杂类型数据时,不是原始数据的拷贝,而是引用,改变结果数据的值也会同时改变原始数据
* 作用其实和 toRef 类似,只不过 toRef 是对一个个属性手动赋值,而 toRefs 是自动解构赋值。 import {
defineComponent, toRefs } from 'vue' export default defineComponent({ props: [
title], setup (props) { // 使用了解构赋值语法创建了变量myTitle const { myTitle } = toRefs(
props) console.log(myTitle.value) } })
<>五、结语

尽量不要混着用,reactive 和 ref 选一种,toRef 和 toRefs 选一种,不然代码会很乱。

推荐 ref 和 toRefs 一把梭。

技术
今日推荐
阅读数 148
阅读数 49
阅读数 46
阅读数 39
阅读数 39
阅读数 30
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信