vue3.0中shallowRefs使用

最新推荐文章于 2024-09-09 15:08:57 发布

智慧2021

最新推荐文章于 2024-09-09 15:08:57 发布

阅读量1k

点赞数

分类专栏： vue3.0

本文链接：https://blog.csdn.net/weixin_38687522/article/details/118675373

版权

vue3.0 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

本文详细介绍了Vue中shallowRef和shallowReactive的使用，重点阐述了它们在数据监听上的区别。shallowRef只监听最外层的.value变化，而shallowReactive则只监听最外层数据，内部深层数据变更不会触发视图更新。在数据量较大时，这两种方法可以提高性能。示例代码展示了如何使用它们以及为何shallowRef需要通过.value来触发视图更新。

摘要由CSDN通过智能技术生成

function shallowRef(target){
	return {
	_value: target,
	get value(){
		console.log('读取数据‘)
		return this._value
	},
	set value(val){
		console.log('修改数据')
		this._value = val
}
}

ref的源码

function ref(target){
	if(target && typeof target === 'object'){
		target = reactive(target);
		return target;
	}
	return {
			_value:target,
			get value(){
				console.log(’读取数据‘)
				return this._value;
				},
			set value(val){
				console.log('修改数据’)
				this._value = val
			}
		}
}

shallowRef,shallowReactive, 用来做非递归监听，但一般情况下我们使用ref或者reactive即可，只在需要监听的数据量比较大的时候才使用。
但是他们分别有使用技巧：
shallowRef是通过监听数据的.value变化，来实现数据响应
shallowReactives是通过监听最外层的数据变化，才能触发视图更新。

import {shallowReactive, shallowRefs} from 'vue'

let obj = {
    a:‘a‘,
    gf:{
        b:‘b‘,
        f:{
            c:‘c‘,
            s:{
                d:‘d‘
            }
        }
    }
};
/*
let state = shallowReactive(obj);

//只有最外层的a属性变化，才会触发视图更新
// state.a = ‘1‘; //若注释掉这一行，shallowReactive的视图不更新
state.gf.b = ‘2‘;
state.gf.f.c = ‘3‘;
state.gf.f.s.d = ‘4‘;
 */
let state = shallowRef(obj);

// state.value.a = ‘1‘;
// state.value.gf.b = ‘2‘;
// state.value.gf.f.c = ‘3‘;
// state.value.gf.f.s.d = ‘4‘;
// ref的最外层属性value,只有它改变，视图才会更新，如上形式不会触发更新，要使用下面state.value，更新.value的书写格式才能更新
state.value = {
    a:1,
    gf:{
        b:2,
        f:{
            c:3,
            s:{
                d:4
            }
        }
    }
}

如果上面还是不太理解，我再详细讲解一下为什么shallowRef触发视图为什么是要触发.value
之前讲过，ref底层就是调用reactive(开始的第二段源码)
ref(10) => reactive({value:10})
其实shallowRef 底层调用的也是shallowReactive
即：
shallowRef(10) ⇒ shallowReactive({value:10})

转换成代码即：
转换前：
let state = shallowRef( {
a:1,
gf:{
b:2,
f:{
c:3,
s:{
d:4
}
}
}
});
转换后：
let state = shallowReactive(
value:{
a:1,
gf:{
b:2,
f:{
c:3,
s:{
d:4
}
}
}
});
如上：shallowReactive视图更新只有触发第一层数据，也就是触发.value.也就是，shallowRef需要触发.value.