快捷導(dǎo)航

vue3.2?reactive函數(shù)問題小結(jié)

更新時(shí)間：2022年12月27日 10:42:09 作者：MrLcTate

reactive用來包裝一個(gè)對(duì)象，使其每個(gè)對(duì)象屬性都具有響應(yīng)性（也就是深層次響應(yīng)式），這篇文章主要介紹了vue3.2?reactive函數(shù)注意點(diǎn)及問題小結(jié),需要的朋友可以參考下

reactive函數(shù)

上篇文章給大家介紹了Vue中的reactive函數(shù)操作代碼，需要的朋友點(diǎn)擊查看。

reactive用來包裝一個(gè)對(duì)象，使其每個(gè)對(duì)象屬性都具有響應(yīng)性（也就是深層次響應(yīng)式）。

語法：const 代理對(duì)象= reactive(源對(duì)象) 。
接收一個(gè)對(duì)象（或數(shù)組），返回一個(gè)代理對(duì)象（簡(jiǎn)稱proxy對(duì)象）。
內(nèi)部基于 ES6 的 Proxy 實(shí)現(xiàn)，通過代理對(duì)象操作源對(duì)象內(nèi)部數(shù)據(jù)進(jìn)行操作。

注意點(diǎn)1：

問題：reactive函數(shù)使用基本類型數(shù)據(jù)會(huì)報(bào)警告

注意點(diǎn)2：

總結(jié)：基礎(chǔ)類型數(shù)據(jù)推薦適用ref函數(shù)，引用類型數(shù)據(jù)推薦適用reactive函數(shù)

使用reactive函數(shù)實(shí)現(xiàn)引用數(shù)據(jù)響應(yīng)式數(shù)據(jù)

<script setup>
  //數(shù)據(jù)
  let job = reactive({
    type: '前端工程師',
    salary: '20K'
  })
 
  //方法
  function changeInfo() {
    job.type = 'UI設(shè)計(jì)師'
    job.salary = '30K'
  }
</script>

如果想使用ref函數(shù)實(shí)現(xiàn)引用數(shù)據(jù)響應(yīng)式,使用job.value

<script setup>
  //數(shù)據(jù)
  let job = ref({
    type: '前端工程師',
    salary: '20K'
  })
  
  //方法
  function changeInfo() {
    job.value.type = 'UI設(shè)計(jì)師'
    job.value.salary = '30K'
  }
</script>

注意點(diǎn)3：

當(dāng)然也可以把基礎(chǔ)類型數(shù)據(jù)和引用類型數(shù)據(jù)封裝成一個(gè)代理對(duì)象，通過reactive函數(shù)關(guān)聯(lián)，使用起來也很方便，缺點(diǎn)是還是寫了很多person.xxx重復(fù)字符串

<template>
  <h1>一個(gè)人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年齡：{{ person.age }}</h2>
  <h3>工作種類：{{ person.job.type }}</h3>
  <h3>工作薪水：{{ person.job.salary }}</h3>
  <h3>愛好：{{ person.hobby }}</h3>
  <h3>測(cè)試的數(shù)據(jù)c：{{ person.job.a.b.c }}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>
 
<script setup>
import { reactive } from "vue";
//數(shù)據(jù)
let person = reactive({
  name: "張三",
  age: 18,
  job: {
    type: "前端工程師",
    salary: "20K",
    a: {
      b: {
        c: 666,
      },
    },
  },
  hobby: ["打球", "跑步", "健身"],
});
 
//方法
function changeInfo() {
  person.name = "李四";
  person.age = 50;
  person.job.type = "UI設(shè)計(jì)師";
  person.job.salary = "30K";
  person.job.a.b.c = 999;
  person.hobby[0] = "學(xué)習(xí)";
}
</script>

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

您可能感興趣的文章: