shallowRef

2023年05月03日

柏拉文

越努力，越幸运

一、认识

---

shallowRef 是 ref 的浅层作用形式。和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。

二、语法

---

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

    <button @click="onChange">改变</button>
  </div>
</template>

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

const obj = shallowRef({
  a: 1,
  b: 2,
  c: {
    d: 0,
    e: 4
  }
})

const onChange = () => {
  obj.value.c.d++; // 即使 obj.value.c.d 数据发生变化， 视图不会更新
}
</script>