【Vue3 第四章】ref 系列

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

一、ref()

ref() 方法接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value

ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。

如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。

若要避免这种深层次的转换，请使用 shallowRef() 来替代。

ref 接受的数据类型：基本类型，引用类型。

作用：把参数加工成一个响应式对象，全称为reference对象(简称为ref对象) 。

核心原理：如果参数是基本类型那么形成响应式依赖于Object.defineProperty( )的get( )和set( )，如果ref的参数是引用类型，底层ref会借助reactive的proxy 定义响应式变成这样：reactive({value:‘xiaxia’})。

二、shallowRef()

shallowRef() 方法是ref() 的浅层作用形式

和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。

shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。

注：shallowRef 与 ref 不能一起使用，不然 ref 的变化会影响 shallowRef 造成视图的更新

三、 triggerRef()

triggerRef() 强制触发依赖于一个浅层 ref (shallowRef) 的副作用，这通常在对浅引用的内部值进行深度变更后使用。

四、customRef()

customRef() 创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。

customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象（手动收集依赖并派发更新）。

一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。

可以用于创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用

五、isRef()

isRef() 方法用于检查某个值是否为 ref

import { ref, isRef, unref } from 'vue'

const str = "Hello World!"
const refStr = ref("Hello Ref Data!")

// isRef() 方法用于检查某个值是否为 ref
console.log("isRef检测：", isRef(str));//isRef检测： false
console.log("isRef检测：", isRef(refStr));//isRef检测： true

六、unref()

unref() 如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。

import { ref, isRef, unref } from 'vue'

const str = "Hello World!"
const refStr = ref("Hello Ref Data!")

// unref() 如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。
const strResult = unref(str);
const refStrResult = unref(refStr);
console.log("strResult:", strResult, "refStrResult:", refStrResult);//strResult: Hello World! refStrResult: Hello Ref Data!

七、ref 用于获取 DOM 元素