shallowReactive

2023年05月03日

柏拉文

越努力，越幸运

一、认识

---

shallowReactive 是 reactive 的浅层作用形式。和 reactive 不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。属性的值会被原样存储和暴露，这也意味着值为 ref 的属性不会被自动解包了。

二、语法

---

<template>
  <div>
    {{ obj.b.c }}

    <button @click="onChange">按钮</button>
  </div>
</template>

<script setup lang="ts">
import { shallowReactive } from 'vue';

const obj = shallowReactive({
  a: 1,
  b: {
    c: 1,
    d: 2
  }
});

const onChange = ()=>{
  obj.b.c++; // 数据更新, 不会触发视图更新
}
</script>