vue3-api之shallowRef()

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

shallowRef()需要理解的：

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

const state = shallowRef({ count: 1 })

state.value = { count: 2 } // 视图更新，值被修改

state.value.count = 2 // 视图不更新，值被修改，可用triggerRef函数手动更新视图

<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>