Vue3快速入门-shallowRef 与 shallowReactive

查看本系列文章合集click me

下载本系列文章源码click me

shallowRef

shallowRef 类似 ref，不同的是， shallowRef 只处理基本类型的响应式，不处理对象类型的响应式。

shallowReactive

shallowReactive 类似 reactive，不同的是， shallowReactive 只处理对象最外层属性的响应式。也就是浅响应式

<template>
  <div id="app">
    <h2>shallowRef基本数据类型: {{ refData }}h2>
    <h2>shallowRef对象: {{ refDataObj }}h2>
    <h2>shallowReactive只能让第一层数据响应: {{ reactiveData }}h2>

    <button @click="refData += '响应'">更新shallowRef基本数据类型button>
    <button @click="refDataObj.name += '响应'">更新shallowRef对象button>
    <button @click="update">更新shallowReactive对象button>
  div>
template>

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

const refData = shallowRef("基本数据类型");  // 修改时会更新dom
const refDataObj = shallowRef({ name: "温情key" });  // 修改时不会更新dom

const reactiveData = shallowReactive({
  name: "wq",
  like: {
    game: {
      name: "王者荣耀",
    },
  },
});

function update() {
  // reactiveData.name += "响应";  // 会更新dom
  reactiveData.like.game.name += "响应";  // 不会更新dom
}
script>