ref
ref很容易理解,使用ref创建的对象,里面任意深度的属性与视图都是响应性的,如vue2中创建的data:
data() {
return {
a: {
b: 1,
}
}
}
使用ref则为:
const data = ref({
a: {
b: 1,
},
})
当修改b属性的值时,视图会更新
shallowRef
先说说shalowRef的特点。
与ref不同,shallowRef修改深层属性时,并不会更新视图,如:
<template>
<div>
<p>{{data.foo}}</p>
<button @click="update">update</button>
<button @click="log">log</button>
</div>
</template>
setup() {
const data = shallowRef({
foo: '1'
})
function update() {
data.value.foo = '2'
}
function log() {
console.log(data.value.foo)
}
return {
data,
}
}
上例点击update时,视图并不会更新,但是点击log按钮时,打印出foo的值为2.
想要更新视图,必须给value赋值,直接替换整个对象。修改update方法:
function update() {
data.value = { foo: 200 }
}
再次点击update按钮,视图更新。
shalow即浅的意思,shallowRef只有整个数据变更时才刷新视图。
或者在修改了数据之后,调用triggerRef方法,主动触发视图刷新:
function update() {
data.value.foo = '300';
triggerRef(data); // 触发视图刷新
}
为什么要使用shallowRef
因为ref方法会递归遍历对象的所有属性,使所有属性都具备响应性,所以,当对象很复杂且庞大时,过多的监听会导致性能上的损耗。如假设有一个文章列表数组:
list = [
{ title: '', auto: '', time: '' },
{ title: '', auto: '', time: '' },
{ title: '', auto: '', time: '' },
//...
]
像这种做展示用的数据,并不需要每个属性都做响应性,此时使用shallowRef就很合适。