shallowReactive和shallowRef

客官°小女子只卖身不卖艺 2022-09-16 11:30 40阅读 0赞

### shallowReactive ###

`shallowReactive`监听了第一层属性的值，一旦发生改变，则更新视图；其他层，虽然值发生了改变，但是视图不会进行更新

<template>
      <div class="about">
        <h1>{
       { state}}</h1>
        <span @click="change1">按钮1</span>
        <span @click="change2">按钮2</span>
      </div>
    </template>
    <script lang="ts">
    import {shallowReactive} from 'vue'
    export default {
        setup() {
            const obj = {
                a: 1,
                first: {
                    b: 2,
                    second: {
                        c: 3
                    }
                }
            }
    
            const state = shallowReactive(obj)
    
            function change1() {
                state.a = 7
            }
    
            function change2() {
                state.first.b = 8
                state.first.second.c = 9
                console.log(state);
            }
    
            return {state,change1,change2}
        }
    }
    </script>

### shallowRef ###

创建一个跟踪自身 `.value` 变化的 ref，但不会使其值也变成响应式的

const foo = shallowRef({})
    // 改变 ref 的值是响应式的
    foo.value = {}
    // 但是这个值不会被转换。
    isReactive(foo.value) // false

发表评论取消回复

表情：

评论列表（有 0 条评论，40人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3.0学习 - 第十二节，vue3.x响应式数据的本质，Proxy，手写shallowReactive

1.vue3响应式数据的本质在Vue2.x中是通过defineProperty来实现响应式数据的在Vue3.x中是通过Proxy来实现响应式数据的创建

逃离我推掉我的手/ 2023年01月18日 06:51/ 0 赞/ 31 阅读

相关 Vue3.0学习 - 第七节，ref和reactive 递归监听和非递归监听shallowRef、shallowReactive以及triggerRef

1. 递归监听默认情况下，Vue3 中的 `ref` 和 `reactive` 都是递归监听的，即能实时监听对象的底层变化。 2. 递归监听存在的问题如果数据

水深无声/ 2023年01月13日 11:59/ 0 赞/ 33 阅读

相关 shallowReactive和shallowRef

shallowReactive `shallowReactive`监听了第一层属性的值，一旦发生改变，则更新视图；其他层，虽然值发生了改变，但是视图不会进行更新

客官°小女子只卖身不卖艺/ 2022年09月16日 11:30/ 0 赞/ 41 阅读

相关 vue3.0 reactive ref shallowReactive shallowRef 深度劫持(深度监视) 浅劫持(浅监视)

vue3.0 reactive ref shallowReactive shallowRef 深度劫持(深度监视) 浅劫持(浅监视) <template>

待我称王封你为后i/ 2022年09月03日 03:28/ 0 赞/ 18 阅读

相关 ContentValues和HashTable和HashMap和properties

java中存取key-value的有contentValues、HashTable、HashMap、properties这几个集合 ContentValues

我不是女神ヾ/ 2022年06月11日 05:17/ 0 赞/ 306 阅读

相关 kotlin中 ? 和 ?. 和 ?: 和 as? 和 !!的区别

? 可空类型 kotlin和Java的类型系统之间的一个很重要的区别就是，Kotlin对可空类型的显示支持也就是说你可以声明一个变量，并且使用可空类型?来表示这个变量

我就是我/ 2022年05月17日 02:53/ 0 赞/ 315 阅读

相关 &和&&、|和||的区别

与(&,&&)和或(|,||)的区别使用与操作的时候，要求前后几个表达式的内容都是true,最终结果才是true，如果有一个是false，则最终结果就是false；

た入场券/ 2022年04月14日 06:50/ 0 赞/ 532 阅读

相关 shell脚本之--$$和||和|和（）和{}的用法

Shell && 和 ||和| | 运算符管道符号，是unix一个很强大的功能,符号为一条竖线:"|"。用法: command 1 | command

客官°小女子只卖身不卖艺/ 2022年02月02日 11:39/ 0 赞/ 478 阅读

相关 vue3.0 reactive和shallowReact响应式源码实现

shallowReact: 因为只实现第一层,所以直接new Proxy代理即可 reactive: 因为要实现深层次数据劫持,

男娘i/ 2021年07月24日 19:52/ 0 赞/ 367 阅读

相关 vue3.0 shallowRef和ref响应式源码实现

ref和reactive相比,ref通过setter和getter进行数据劫持代码示例: function shallowRef(target) {

刺骨的言语ヽ痛彻心扉/ 2021年07月24日 17:13/ 0 赞/ 347 阅读