快捷導(dǎo)航

vue3 reactive函數(shù)用法實(shí)戰(zhàn)教程

更新時間：2022年11月11日 11:43:32 作者：wuxing164

reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法，reactive的用法與ref的用法相似，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時UI也會自動更新，這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下

vue3 reactive函數(shù)用法

reactive的用法與ref的用法相似，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時UI也會自動更新。不同的是ref用于基本數(shù)據(jù)類型，而reactive是用于復(fù)雜數(shù)據(jù)類型，比如對象和數(shù)組
例如：定義一個對象類型的變量user

<template>
  <div>
    <p>{{ user }}</p>
    <button @click="increase">click me! one year later</button>
  </div>
</template>
 
<script>
import { reactive } from "vue";
export default {
  name: "reactive",
  setup() {
    const user = reactive({ name: "Alice", age: 12 });
    function increase() {
      ++user.age
    }
    return { user, increase };
  },
};
</script>

如上，當(dāng)點(diǎn)擊按鈕時，讓數(shù)據(jù)user.age加1，當(dāng)Vue發(fā)現(xiàn)數(shù)據(jù)發(fā)生變化，UI會自動更新
那我們驗證了，確實(shí)reactive函數(shù)可以將一個復(fù)雜數(shù)據(jù)類型變成響應(yīng)式數(shù)據(jù)。我們不妨將reactive函數(shù)執(zhí)行的結(jié)果打印出來看下，看看它返回值是什么
reactive將傳遞的對象包裝成了proxy對象

我們發(fā)現(xiàn)，reactive執(zhí)行結(jié)果是將傳遞的對象包裝成了proxy對象
接下來我們測試一下，如果傳遞基本數(shù)據(jù)類型呢？

<template>
  <div>
    <p>{{ userAge }}</p>
    <button @click="increase">click me! one year later</button>
  </div>
</template>
 
<script>
import { reactive } from "vue";
export default {
  name: "reactive",
  setup() {
    let userAge = reactive(12);
    function increase() {
      console.log(userAge);
      ++userAge;
    }
    return { userAge, increase };
  },
};
</script>

運(yùn)行發(fā)現(xiàn)，基本數(shù)據(jù)傳遞給reactive，reactive并不會將它包裝成porxy對象，并且當(dāng)數(shù)據(jù)變化時，界面也不會變化

需要注意的是，reactive中傳遞的參數(shù)必須是json對象或者數(shù)組，如果傳遞了其他對象（比如new Date()），在默認(rèn)情況下修改對象，界面不會自動更新，如果也需要具有響應(yīng)式，可以通過重新賦值的方式實(shí)現(xiàn)

使用ref函數(shù)可以處理基本數(shù)據(jù)，使期變成響應(yīng)式數(shù)據(jù)