快捷導(dǎo)航

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

更新時(shí)間：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ā)生變化時(shí)UI也會(huì)自動(dòng)更新，這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下

vue3 reactive函數(shù)用法

reactive的用法與ref的用法相似，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)UI也會(huì)自動(dòng)更新。不同的是ref用于基本數(shù)據(jù)類型，而reactive是用于復(fù)雜數(shù)據(jù)類型，比如對(duì)象和數(shù)組
例如：定義一個(gè)對(duì)象類型的變量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í)，讓數(shù)據(jù)user.age加1，當(dāng)Vue發(fā)現(xiàn)數(shù)據(jù)發(fā)生變化，UI會(huì)自動(dòng)更新
那我們驗(yàn)證了，確實(shí)reactive函數(shù)可以將一個(gè)復(fù)雜數(shù)據(jù)類型變成響應(yīng)式數(shù)據(jù)。我們不妨將reactive函數(shù)執(zhí)行的結(jié)果打印出來(lái)看下，看看它返回值是什么
reactive將傳遞的對(duì)象包裝成了proxy對(duì)象

我們發(fā)現(xiàn)，reactive執(zhí)行結(jié)果是將傳遞的對(duì)象包裝成了proxy對(duì)象
接下來(lái)我們測(cè)試一下，如果傳遞基本數(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并不會(huì)將它包裝成porxy對(duì)象，并且當(dāng)數(shù)據(jù)變化時(shí)，界面也不會(huì)變化

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

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