快捷導(dǎo)航

vue3中的reactive、readonly和shallowReactive使用詳解

更新時(shí)間：2024年04月29日 10:08:21 作者：猛扇趙四那半好嘴

在 Vue3 中,可以使用 shallowReactive 函數(shù)創(chuàng)建一個(gè)淺層響應(yīng)式對(duì)象,它接收一個(gè)普通對(duì)象作為參數(shù),返回一個(gè)淺層響應(yīng)式代理對(duì)象,本文給大家介紹vue3中的reactive、readonly和shallowReactive使用,感興趣的朋友跟隨小編一起看看吧

1. reactive 與 readonly 使用

readonly：拷貝一份 proxy 對(duì)象將其設(shè)置為只讀。

使用 readonly 時(shí)，變量里的屬性不可改變。

需要注意的是：

當(dāng)原本數(shù)據(jù)改變時(shí)，使用了 readonly 函數(shù)的值也會(huì)發(fā)生改變。

<template>
  <div>
    <form>
      <input v-model="obj.name" type="text" />
      <br />
      <input v-model="obj.age" type="text" />
      <br />
      <button @click.prevent="submit">提交</button>
    </form>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, readonly, shallowReactive } from 'vue'
const obj = reactive({
  name: '張三',
  age: 23
})
const copy = readonly(obj)
const submit = () => {
  obj.age++
  console.log(copy)
}
</script>

在這個(gè)例子中，修改響應(yīng)式對(duì)象中的 age 屬性， readonly 中的 age 屬性也會(huì)隨之更改。

2. shallowReactive

創(chuàng)建淺層的響應(yīng)式對(duì)象
修改內(nèi)部屬性時(shí)，只改變值，不更新視圖

在 Vue3 中，可以使用 shallowReactive 函數(shù)創(chuàng)建一個(gè)淺層響應(yīng)式對(duì)象。它接收一個(gè)普通對(duì)象作為參數(shù)，返回一個(gè)淺層響應(yīng)式代理對(duì)象。這個(gè)代理對(duì)象只能處理對(duì)象的一級(jí)屬性，不能處理嵌套在對(duì)象中的屬性的響應(yīng)式更新。當(dāng)我們讀取代理對(duì)象的屬性時(shí)，會(huì)觸發(fā)依賴收集；當(dāng)我們修改代理對(duì)象的屬性時(shí)，會(huì)觸發(fā)相應(yīng)的依賴更新。在調(diào)用 shallowReactive 函數(shù)時(shí)， Vue3 會(huì)使用 Proxy 對(duì)象對(duì)傳入的對(duì)象進(jìn)行代理，從而實(shí)現(xiàn)淺層響應(yīng)式特性。

<template>
  <div>{{ state }}</div>
  <br />
  <button @click="change1">test1</button>
  <br />
  <button @click="change2">test2</button>
</template>
<script setup lang="ts">
import { ref, reactive, readonly, shallowReactive } from 'vue'
const state = shallowReactive({
  a: 1,
  first: {
    b: 2,
    second: {
      c: 3
    }
  }
})
const change1 = () => {
  state.a = 7
}
const change2 = () => {
  state.first.b = 8
  state.first.second.c = 9
  console.log(state)
}
</script>

點(diǎn)擊 test1 后： state.a 的值變?yōu)?7

點(diǎn)擊 test2 后：視圖沒有發(fā)生改變，控制臺(tái)如下

到此這篇關(guān)于vue3中的reactive、readonly和shallowReactive的文章就介紹到這了,更多相關(guān)vue3 reactive、readonly和shallowReactive內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: