ref与shallowRef区别

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就很合适。