快捷導(dǎo)航

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

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

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

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

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

reactive 則是通過(guò) proxy 來(lái)實(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ì)象，不需要通過(guò) value 獲取
      console.log(info);
    }
    // 返回?cái)?shù)據(jù)
    return {
      info,
      editInfo
    }
  }
}
</script>

reactive 只能創(chuàng)建引用數(shù)據(jù)（數(shù)組或?qū)ο螅?。另外通過(guò) reactive 創(chuàng)建的數(shù)據(jù)可以直接使用，不需要通過(guò) 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 通過(guò)下標(biāo)修改數(shù)據(jù)時(shí)，頁(yè)面也會(huì)實(shí)時(shí)更新
      userList[0] = "張三豐";
      console.log(userList);
    }
    // 返回?cái)?shù)據(jù)
    return {
      userList,
      editUser
    }
  }
}
</script>

注：vue3 通過(guò)下標(biāo)修改數(shù)據(jù)時(shí)，頁(yè)面也會(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

對(duì)vuex中g(shù)etters計(jì)算過(guò)濾操作詳解
今天小編就為大家分享一篇對(duì)vuex中g(shù)etters計(jì)算過(guò)濾操作詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單的拖拽元素功能示例
本篇文章主要介紹了vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單的拖拽元素功能示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-02-02
vue如何對(duì)一個(gè)數(shù)據(jù)過(guò)濾出想要的item
這篇文章主要介紹了vue如何對(duì)一個(gè)數(shù)據(jù)過(guò)濾出想要的item問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
使用konva和vue-konva庫(kù)實(shí)現(xiàn)拖拽滑塊驗(yàn)證功能
這篇文章主要介紹了使用konva和vue-konva完成前端拖拽滑塊驗(yàn)證功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-04-04
Vue中mixins的使用方法以及實(shí)際項(xiàng)目應(yīng)用指南
vue中提供了一種混合機(jī)制--mixins,用來(lái)更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,下面這篇文章主要給大家介紹了關(guān)于Vue中mixins的使用方法以及實(shí)際項(xiàng)目應(yīng)用指南,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
詳解key在Vue3和Vue2的不同之處
key屬性是一個(gè)特殊的屬性，用于標(biāo)識(shí)每個(gè)節(jié)點(diǎn)的唯一性。在Vue2.x版本中的key和Vue3.x版本中的key有很大的不同，那么在這篇文章中，我們將會(huì)討論Vue2中的key和Vue3中的key的區(qū)別
2023-04-04
Vue3 頁(yè)面,菜單,路由的使用
這篇文章主要介紹了Vue3之頁(yè)面,菜單,路由的使用，文章圍繞Vue3頁(yè)面,菜單,路由相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11
腳手架vue-cli工程webpack的作用和特點(diǎn)
webpack是一個(gè)模塊打包的工具，它的作用是把互相依賴的模塊處理成靜態(tài)資源。這篇文章主要介紹了vue-cli工程webpack的作用和特點(diǎn),需要的朋友可以參考下
2018-09-09
html中引入Vue.js的cdn實(shí)現(xiàn)簡(jiǎn)單的文檔單頁(yè)
這篇文章主要為大家介紹了html中引入Vue.js的cdn實(shí)現(xiàn)簡(jiǎn)單的文檔單頁(yè)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
手寫(xiě)Vue彈窗Modal的實(shí)現(xiàn)代碼
這篇文章主要介紹了手寫(xiě)Vue彈窗Modal的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09