【Vue3 知识第六讲】ref、 shallowRef、unref、isRef 等系列知识应用

最新推荐文章于 2024-03-19 16:58:51 发布

MagnumHou

最新推荐文章于 2024-03-19 16:58:51 发布

阅读量1.6k

点赞数

分类专栏：前端开发 Vue 文章标签： javascript vue.js ref toref 数据引用

本文链接：https://blog.csdn.net/qq_39335404/article/details/132663417

版权

前端开发同时被 2 个专栏收录

86 篇文章 4 订阅

订阅专栏

Vue

64 篇文章 15 订阅

订阅专栏

文章目录

一、ref()

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

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

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

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

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

相较于reactive包裹对象完成响应式，ref更具优势，因为当改变reactive中保存的对象的内存地址时（也就是换一个全新的对象），由于vue3的响应式是通过创建代理对象，在代理对象的set方法中放入该实例的渲染函数的方法构建的，而替换整个对象，而不是修改对象内部的属性值，其并不会调用set方法，所以页面并不会响应式，但是如果使用ref包裹对象，那么此对象仅仅是ref对象的一个value属性，所以更改内存地址时，也仅仅是修改ref对象的value属性，依然会调用代理对象的set方法，完成响应式dom更新

<script setup>
	import { ref } from 'vue'
	
	// 声明基本数据类型的数据
	// 定义一个非响应式的数据，此数据只能在数据层进行修改，视图层不会同步更新
	let num = 1;
	console.log("num:", num)
	num = 100;
	console.log("num:", num)
	setTimeout(() => {
	    num = 1000
	    console.log("num:", num)
	}, 5000)
	
	// 利用 ref 定义一个响应式数据：数据层数据的修改可以相应到视图层，反之亦可
	let str = ref("Hello Ref!!")
	console.log("str:", str, str.value)
	setTimeout(() => {
	    str.value = "Hello 我是响应式数据！！！"
	    console.log(str.value)
	}, 8000);// 更新时间在非响应式数据之后，会影响后者；在非响应式数据之前更新，则不会影响后者
	// 需要注意的是：非响应式的数据更改后不会更新视图，但是如果非响应式数据更新后，去更新响应式数据，那么更新后的非响应式数据也会受响应式数据更新的影响，视图层响应会重新匹配最新的数据进行更新（响应式和非响应式数据）
	
	// 利用 ref 定义一个复杂的数据类型
	let obj = ref({
	    name: "Jack",
	    age: 23,
	    sex: "男"
	})
	console.log("obj:", obj)
	setTimeout(() => {
	    // obj.value = {}
	    obj.value.name = "Lucy"
	    obj.value.sex = "女"
	},3000)
</script>
<template>
	    <div>
	        <div>{{ num }}</div>
	        <strong>{{ str }}</strong>
	        <ul>
	            <li v-for="item,key in obj">{{ item }} ~ {{ key }}</li>
	        </ul>
	    </div>
</template>

ref 接受的数据类型
基本类型，引用类型。
作用
把参数加工成一个响应式对象，全称为reference对象(简称为ref对象) 。
核心原理
如果参数是基本类型那么形成响应式依赖于Object.defineProperty( )的get( )和set( )，如果ref的参数是引用类型，底层ref会借助reactive的proxy 定义响应式变成这样：reactive({value:‘xiaxia’})。

二、shallowRef()

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

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

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

<script setup>
	import { ref, shallowRef } from 'vue'
	
	// shallowRef 是 ref 的浅层作用形式，获取原始对象。和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。
	const data = ref({
	    stu: {
	        name: "张三",
	        age: 23,
	        hobby: ['足球', '篮球', '羽毛球']
	    }
	})
	
	const data2 = shallowRef({
	    stu: {
	        name: "张三丰",
	        age: 123,
	        hobby: ['太极', '道教', '武当派']
	    }
	})
	
	// ref 响应式数据是深层次作用（如果是复杂数据类型，最终使用 reactive 处理成 proxy 代理对象）
	console.log("shallowRef.vue数据打印：", data.value)
	console.log("shallowRef.vue数据打印：", data2.value)
	// 第一层数据更新
	const change = () => {
	    data.value = {
	        name: "David",
	        age: 28,
	        sex: "男"
	    }
	    console.log("shallowRef.vue数据打印：", data.value)
	
	    data2.value = {
	        name: "史密斯",
	        age: 87,
	        sex: "男"
	    }
	    console.log("shallowRef.vue数据打印：", data2.value)
	}
	
	const change2 = () => {
	    if (data.value.stu) {
	        data.value.stu = {
	            name: "Lucy",
	            age: 18,
	            sex: "女",
	            eat: ['煎饼果子']
	        }
	    }
	
	    // shallowRef 属于 ref 浅层次的作用。只相应到 .value 层次。但是如果和 ref 一起使用，会受其影响去更新页面数据（注意的是：ref数据必须同步更新到页面上，才可以发起最新数据的扫描行为）。
	    data2.value.stu = {
	        name: "霍去病",
	        age: 887,
	        sex: "男",
	        des: "大汉第一骁将，封狼居胥第一人！！"
	    }
	    console.log("shallowRef.vue数据打印：", data2.value)
	}
	
	const change3 = () => {
	    data.value.stu.hobby.push("橄榄球")
	    data2.value.stu.hobby.push("乒乓球")
	    console.log("shallowRef.vue数据打印：", data2.value)
	}
	</script>
	<template>
	    <div>
	        <h3>TheShallowRef页面数据：</h3>
	        <ul>
	            <li v-for="item in data2.stu">{{ item }}</li>
	        </ul>
	        <div><em>{{ data }}</em></div>
	        <div><em>{{ data2 }}</em></div>
	        <button @click="change">第一层（.value）数据更新</button>
	        <br>
	        <button @click="change2">第二层（.value.stu）数据更新</button>
	        <br>
	        <button @click="change3">第三层（.value.stu.hobby）数据更新</button>
	    </div>
	</template>

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

三、 triggerRef()

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

<script setup>
import { ref, shallowRef, triggerRef } from 'vue'

const refData = ref({
    foo: {
        bar: {
            num: 10
        }
    }
})

const swRefData = shallowRef({
    stu: {
        name: {
            firstname: "弗拉基米尔",
            centername: "",
            lastname: "普京"
        }
    }
})

const change = () => {
    console.log("triggerRef...")
    swRefData.value.stu = {
        name: "张三丰",
        age: 23
    }
    // refData.value.foo.bar.num = 1000
    
    // 触发 shallowRef 数据的更新
    triggerRef(swRefData)
    console.log(swRefData)
}
</script>
<template>
    <div>
        <p>{{ refData }}</p>
        <p>{{ swRefData }}</p>
        <button @click="change">更改数据</button>
    </div>
</template>

四、customRef()

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

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

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

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

<script setup>
    import { customRef, ref } from 'vue'

    const refData = ref("呵呵！")

    // 可以通过自定义 ref 实现防抖操作
    const myRef = (value, delay = 500) => {
        let timer;
        return customRef((track, trigger) => {
            return {
                get() {
                    track();//收集相关依赖
                    return value;
                },
                set(newVal) {
                    clearTimeout(timer)
                    timer = setTimeout(() => {
                        console.log(newVal)
                        trigger();//触发相关的依赖
                        value = newVal;
                    }, delay)
                }
            }
        })
    }
    let result = myRef("Hello customRef!!")
    // let result = myRef({
    //     foo: {
    //         bar: {
    //             num: 1
    //         }
    //     }
    // })
    console.log("customRef中的数据result:", result)
    let count = 1;
    const change = () => {
        // customRef 防抖处理后，指定时间内连续触发，数据不会发生更改。
        result.value = "Hello 我是更新后的数据！！！" + count++
        // result.value.foo.bar.num = 1000

        // refData.value = "哈哈，我会影响customRef深层数据的更新！"
        console.log("customRef中的数据result:", result.value)
    }
</script>
<template>
    <div>
        <h3>customRef数据演示</h3>
        <div>{{ result }}</div>
        <div>{{ refData }}</div>
        <button @click="change">更新数据</button>
    </div>
</template>

五、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 元素

在普通的 js 操作中，一般都是直接操作 dom 元素，但是对于 Vue.js 框架来说，一般是不允许直接操作 dom 元素的。

那么其实 Vue.js 框架提供了 ref 获取 dom 元素，以及组件引用。

而 vue3.0 中没有 this和 $re f s ，所以在 vu e 2 中使用$ refs 来获取 dom 元素的方法在 vue3 行不通。

在 vue3 中可以这样操作：

<script setup>
	import { ref, onMounted } from 'vue'
	
	// 页面所有的同步组件完成挂载的声明周期钩子
	onMounted(() => {
	    console.log("moutend钩子：所有的同步组件完成挂载完成...")
	})
	// mouted 生命周期钩子，在 setup 入口函数后执行
	
	// setup 模式下（钩子函数）执行时，页面还没有渲染，所以此时是拿不到元素的
	// 原生的方式获取元素：document.getXXX 系列（四个）  document.queryXXX系列（两个）
	const divELe = document.querySelector(".wrapper")
	console.log('setup钩子期间获取元素：', divELe);
	
	// Vue 提供了 ref 的方式来获取相关的元素
	let wrapper = ref()
	console.log(wrapper)
	console.log(wrapper.value)
	
	// 异步函数中获取元素：这个时候元素已经渲染完成，可以获取到
	const getEle = () => {
	    const divELe = document.querySelector(".wrapper")
	    console.log(divELe);
	
	    console.log(wrapper.value)
	}
</script>
<template>
    <div>
        <div class="wrapper" ref="wrapper">演示通过ref的方式，获取Vue模板中的元素！！</div>
        <button @click="getEle">获取wrpper</button>
    </div>
</template>

补充：ref、toRef、toRefs 异同点

ref、toRef、toRefs 函数都可以将某个对象中的属性变成响应式数据
ref 函数的本质是拷贝，修改响应式数据，不会影响到原始数据（引用数据类型会有影响），视图会更新
toRef、toRefs 函数和传入的数据形成引用关系，修改 toRef 会影响这些数据，但是不会更新视图

作用：把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个 ref
- toRef 函数一次仅能设置一个数据，接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性
- toRefs 函数接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用 toRef 执行。用于批量设置多个数据为响应式
ref 数据会引起监听行为，而 toRef 不会

<script setup>
    const state = reactive({
        title: '标题',
        name: 'wff'
    })
    const { title } = toRefs(state)
    const name = toRef(state, 'name')

    console.log(state.title)
    console.log(title.value)
    console.log(name.value)

    const titleState = ref('new')
    const count = ref({
        count: 0
    })
</script>

<template>
  <div>
    name:{{name}}
  </div>
</template>

注：我们使用 reactive创建的对象，如果想在模板中使用，就必须得使用 xxx.xxx的形式；如果大量用到的话还是很麻烦的，但是使用 es6解构以后，会失去响应式。那么toRefs的作用就体现在这，利用toRefs可以将一个响应式 reactive 对象的所有原始属性转换为响应式的ref属性。