Vue3-shallowRef 和 shallowReactive函数(浅层次的响应式)

Vue3-shallowRef 和 shallowReactive函数(浅层次的响应式)

shallowRef函数

  • 功能:只给基本数据类型添加响应式。如果是对象,则不会支持响应式,层成也不会创建Proxy对象。
  • ref和shallowRef在基本数据类型上是没有区别的,shallowRef函数主要作用于不进行修改对象中的属性。
javascript 复制代码
<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 对象中只有第一层支持响应式,之后的都不支持响应式。
javascript 复制代码
<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>
相关推荐
拉不动的猪19 分钟前
前端常见数组分析
前端·javascript·面试
小吕学编程36 分钟前
ES练习册
java·前端·elasticsearch
Asthenia041243 分钟前
Netty编解码器详解与实战
前端
袁煦丞1 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19703 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴3 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript