Vue3-shallowRef 和 shallowReactive函数（浅层次的响应式）

最新推荐文章于 2024-07-27 14:15:10 发布

南瓜骨头

最新推荐文章于 2024-07-27 14:15:10 发布

阅读量728

点赞数 7

分类专栏： Vue 文章标签： javascript vue 前端框架前端

本文链接：https://blog.csdn.net/weixin_47957908/article/details/134484800

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

Vue3-shallowRef 和 shallowReactive函数（浅层次的响应式）

shallowRef函数

功能：只给基本数据类型添加响应式。如果是对象，则不会支持响应式，层成也不会创建Proxy对象。
ref和shallowRef在基本数据类型上是没有区别的，shallowRef函数主要作用于不进行修改对象中的属性。

在这里插入图片描述

<template>
    <h2>计数器1：{{data.counter1}}</h2>
    <button @click="data.counter1++">计数器1加1</button>
</template>

<script setup>
    import { shallowRef } from 'vue'
    let data = shallowRef({
        counter1 : 1
    })
    console.log(data);
</script>

shallowReactive函数

功能：shallowReactive 对象中只有第一层支持响应式，之后的都不支持响应式。

在这里插入图片描述

<template>
    <h2>计数器1：{{data.counter1}}</h2>
    <button @click="data.counter1++">计数器1加1</button>
    <hr>
    <h2>计数器2：{{data.a.counter2}}</h2>
    <button @click="data.a.counter2++">计数器2加1</button>
</template>

<script setup>
    import { shallowReactive } from 'vue'
    let data = shallowReactive({
        counter1 : 1,
        a : {
            counter2 : 100
        }
    })
</script>
   counter2 : 100
        }
    })
</script>