triggerRef

2023年05月03日

柏拉文

越努力，越幸运

一、认识

---

triggerRef 强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。

二、语法

---

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

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

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

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

const onChange = () => {
  obj.value.c.d++; // 深层数据变更，不会触发视图更新
  triggerRef(obj); // 强制通过 triggerRef 触发视图更新
}
</script>