快捷導(dǎo)航

Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法

更新時(shí)間：2023年11月24日 17:06:26 作者：小吳吳吳呀

這篇文章主要介紹了Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

ref 與 reactive 是 vue3 提供給我們用于創(chuàng)建響應(yīng)式數(shù)據(jù)的兩個(gè)方法。

reactive 常用于創(chuàng)建引用數(shù)據(jù)，例如：object、array 等。

reactive 則是通過 proxy 來實(shí)現(xiàn)的響應(yīng)式數(shù)據(jù)，并配合 reflect 操作的源對(duì)象。

reactive 創(chuàng)建引用數(shù)據(jù)：

<template>
  <p>姓名：{{ info.name }}</p>
  <p>年齡：{{ info.age }}</p>
  <p>性別：{{ info.sex }}</p>
  <button @click="editInfo">修改信息</button>
</template>
<script>
// 引入 reactive 函數(shù)
import { reactive } from 'vue'
export default {
  name: "Home",
  setup() {
    // 使用 reactive 創(chuàng)建引用數(shù)據(jù)
    const info = reactive({
      name: "張三",
      age: 20,
      sex: "男"
    });
    // 創(chuàng)建方法
    const editInfo = () => {
      info.name = "李四";
      info.age = 22;
      info.sex = "女";
      // reactive 創(chuàng)建的數(shù)據(jù)是一個(gè) proxy 對(duì)象，不需要通過 value 獲取
      console.log(info);
    }
    // 返回?cái)?shù)據(jù)
    return {
      info,
      editInfo
    }
  }
}
</script>

reactive 只能創(chuàng)建引用數(shù)據(jù)（數(shù)組或?qū)ο螅?。另外通過 reactive 創(chuàng)建的數(shù)據(jù)可以直接使用，不需要通過 value 屬性獲取。

注：reactive 創(chuàng)建的是一個(gè)深層次的數(shù)據(jù)對(duì)象，不論多少層，reactive 都能檢測(cè)到數(shù)據(jù)的變化

reactive 創(chuàng)建數(shù)組：

<template>
  <p v-for="item in userList" :key="item">{{ item }}</p>
  <button @click="editUser">修改人員</button>
</template>
<script>
// 引入 reactive 函數(shù)
import { reactive } from 'vue'
export default {
  name: "Home",
  setup() {
    // 使用 reactive 創(chuàng)建數(shù)組
    const userList = reactive(["張三", "李四", "王五"]);
    // 創(chuàng)建方法
    const editUser = () => {
      // vue3 通過下標(biāo)修改數(shù)據(jù)時(shí)，頁面也會(huì)實(shí)時(shí)更新
      userList[0] = "張三豐";
      console.log(userList);
    }
    // 返回?cái)?shù)據(jù)
    return {
      userList,
      editUser
    }
  }
}
</script>

注：vue3 通過下標(biāo)修改數(shù)據(jù)時(shí)，頁面也會(huì)實(shí)時(shí)更新。

到此這篇關(guān)于Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法的文章就介紹到這了,更多相關(guān)Vue3 響應(yīng)式數(shù)據(jù) reactive內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: