Vue shallowRef() 简介

shallowRef()

shallowRef()存在的意义：将最终的结果输出到视图，节省一些不必要的输出。

shallowRef()需要理解的：

shallowRef是浅层响应式数据，即：修改.value值时会更新视图。而修改具体属性值时，不会更新视图。

比如：

// 定义shallowRef变量

const state = shallowRef({ count: 1 })

// 整体修改值（即.value），其template内的视图也会更新！

state.value = { count: 2 }

// 修改属性值时，其template内的视图不会更新！但并不代表其值没有被修改，仅仅是视图没更新

state.value.count = 2

// 此时我们可以用triggerRef函数手动更新视图

triggerRef(state)

 

代码示例：

<template>
    <h1>{{ state }}</h1> <!-- 这是视图 -->
    <button @click="change1">只更改count属性值，不会更新视图</button>
    <button @click="change2">更改value值，更新视图</button>
    <button @click="change3">更新count属性值后，手动更新视图</button>
</template>


<script setup>
    import {
        ref,
        shallowRef,
        triggerRef
    } from 'vue'
    
    const state = shallowRef({
        count: 1
    })
    
    // 只更改count属性值，不会更新视图
    const change1 = function(){
        state.value.count = 2
    }
    
    // 整体更新value，会更新视图
    const change2 = function(){
        state.value = {'age': 21}
    }
    
    // 手动更新视图
    const change3 = function(){
        state.value.count = 23
        triggerRef(state)
    }
</script>

 

总结：

1、shallowRef() 函数是浅层响应，只有对value整体修改，才能更新到视图层。

2、对属性值的修改是可以的，只是不更新到视图层。

3、对属性值修改之后，我们可以通过triggerRef()函数手动更新到视图。

 

BGU说明：

在某些情况下执行属性值修改时，同步更新到视图层。这种情况主要是其它数据的更新带动了视图层的更新。比如下面代码，就会更新视图层。

<template>
    <h1>{{ state }}</h1>
</template>


<script setup>
    import {
        shallowRef,
        onUnmounted
    } from 'vue'
    
    const state = shallowRef({
        count: 1
    })
    
    // 会更新到视图，因为这里视图还未创建。所以要想不更新到视图，需要把下面代码放在onMounted(()=>{state.value.count = 2})事件之后执行。
    state.value.count = 2
</script>