ref、reactive、toRef、toRefs的区别

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。
参数可以传递任意数据类型，传递对象类型时也能保持深度响应式，所以适用性更广。
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) {// 创建变量myTitleconst 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) {// 使用了解构赋值语法创建了变量myTitleconst { myTitle } = toRefs(props)console.log(myTitle.value)}
})

五、结语

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

推荐 ref 和 toRefs 一把梭。

ref、reactive、toRef、toRefs的区别相关推荐

vue3学习笔记（ref, reactive, setup, hook...）
目录一.搭建项目二.常用的Composition API 1.ref函数(实现响应式) 2.reactive函数 3.vue2和vue3响应式的区别 4. setup参数 5.计算属性和监视 6. ...
vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 1.什么是setup语法糖起初 ...
手写简单vue3响应式原理(reactive ref toRef toRefs)
reactive ref toRef toRefs // 判断对象是否是对象 const isObject = val => val !== null && typeof val ...
vue中ref、reactive和 toRefs toRef
ref和reactive都是响应式的引用,其原理是通过 proxy 对数据进行封装,当数据变化时,触发模版等内容的更新, ref 处理基础类型的数据(string,number..),reactive ...
vue3中的ref，toRef，toRefs三个的作用
1. ref的使用 ref 接受一个原始值,返回一个具有响应式的对象,对象有一个value属性,其值就是所传递的原始值. ref是做的一个拷贝关系,修改对象msg的值,不会影响对象obj,视图会发生变 ...
敲黑板！vue3重点！一文了解Composition API新特性：ref、toRef、toRefs
一文了解Composition API新特性:ref.toRef.toRefs 一.
VUE3 reactive与toRefs函数
Vue3.0中还为我们提供了一个对象式响应的reactive函数 . Reactive函数创建一个响应式对象. 一:Reactive函数其实,在我看来,reactive函数就是VUE3.0为我们提 ...
（转）Spring中Bean的命名问题（id和name区别）及ref和idref之间的区别
Spring中Bean的命名 1.每个Bean可以有一个id属性,并可以根据该id在IoC容器中查找该Bean,该id属性值必须在IoC容器中唯一: 2.可以不指定id属性,只指定全限定类名,如: & ...
vue3——ref reactive函数
ref:定义一个响应式的数据使用方法:const xxx = ref(value) 修改时通过xxx.value = *** 修改例如 <template><h1>一个人的 ...

ref、reactive、toRef、toRefs的区别

一、`reactive`

二、`ref`

三、`toRef`

四、`toRefs`

五、结语

ref、reactive、toRef、toRefs的区别相关推荐

最新文章

热门文章

ref、reactive、toRef、toRefs的区别

一、reactive

二、ref

三、toRef

四、toRefs

五、结语

ref、reactive、toRef、toRefs的区别相关推荐

最新文章

热门文章

一、`reactive`

二、`ref`

三、`toRef`

四、`toRefs`