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

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

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

reactive函數(shù)

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

reactive用來包裝一個對象，使其每個對象屬性都具有響應性（也就是深層次響應式）。

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

注意點1：

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

注意點2：

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

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

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

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

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

注意點3：

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

<template>
  <h1>一個人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年齡：{{ person.age }}</h2>
  <h3>工作種類：{{ person.job.type }}</h3>
  <h3>工作薪水：{{ person.job.salary }}</h3>
  <h3>愛好：{{ person.hobby }}</h3>
  <h3>測試的數(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設計師";
  person.job.salary = "30K";
  person.job.a.b.c = 999;
  person.hobby[0] = "學習";
}
</script>

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

您可能感興趣的文章: