Vue3.0 ref、reactive、toRef、toRefs、customRef的区别

一、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包装了一层具有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的某个属性且要保持响应式连接时就很有用。

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) } })

五、customRef

(1)customRef 用于自定义返回一个ref对象,可以显式地控制依赖追踪和触发响应,接受工厂函数
(2)两个参数分别是用于追踪的 track 与用于触发响应的 trigger,并返回一个一个带有 get 和 set 属性的对象

使用:

import {customRef} from 'vue'; function useDebouncedRef(value) { return customRef((track, trigger) => { return { get() { track() return value }, set(newValue) { value2=newValue trigger() }, } }) } ``` 通过customRef返回的ref对象,和正常ref对象一样,通过x.value修改或读取值

注:文章转摘于抽疯的稻草绳

【END】

本文链接:

版权声明:本blog所有文章除声明转载外,均采用 BY-NC-SA 3.0 许可协议。转载请注明来自 简单才是真

阅读 25 | 发布于 2022-02-08
暂无评论