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>
相关推荐
前端极客探险家32 分钟前
如何用 Three.js 和 Vue 3 实现 3D 商品展示
javascript·vue.js·3d
我是小路路呀1 小时前
vue开始时间小于结束时间,时间格式:年月日时分
前端·javascript·vue.js
虾球xz1 小时前
游戏引擎学习第201天
前端·学习·游戏引擎
我自纵横20232 小时前
JavaScript 中常见的鼠标事件及应用
前端·javascript·css·html·计算机外设·ecmascript
li_Michael_li2 小时前
Vue 3 模板引用(Template Refs)详解与实战示例
前端·javascript·vue.js
excel2 小时前
webpack 核心编译器 十五 节
前端
excel2 小时前
webpack 核心编译器 十六 节
前端
雪落满地香4 小时前
css:圆角边框渐变色
前端·css
风无雨6 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架