vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)(最新推薦)

更新時(shí)間：2022年12月02日 15:21:30 作者：國服第二切圖仔

這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù),這里就是vue3中setup組合式api中如何定義響應(yīng)式數(shù)據(jù)并且修改賦值全部內(nèi)容，需要的朋友可以參考下

需求：vue3中setup組合式api中如何定義響應(yīng)式數(shù)據(jù)并且修改賦值呢？

1、字符串/數(shù)字：“ref”是vue3中用來存儲(chǔ)值的響應(yīng)式數(shù)據(jù)源，它可以定義字符串，數(shù)字等

<script setup>
import { ref } from 'vue'
// “ref”是用來存儲(chǔ)值的響應(yīng)式數(shù)據(jù)源。
// 理論上我們?cè)谡故驹撟址臅r(shí)候不需要將其包裝在 ref() 中，
const message = ref('Hello World!')
// 但是在這個(gè)示例中更改這個(gè)值的時(shí)候，就可以實(shí)現(xiàn)數(shù)據(jù)和頁面響應(yīng)式綁定了。
function changeMsg(data){
    //message=data   這種是不行的，無法實(shí)現(xiàn)雙向綁定
    message.value=data
}
</script>
<template>
  <h1>{{ message }}</h1>
<button @click="changeMsg('數(shù)據(jù)修改')">Reverse Message</button>
</template>

2、數(shù)組/對(duì)象：引入 reactive 用來定義對(duì)象數(shù)據(jù)包括數(shù)組和對(duì)象

vue3使用proxy，對(duì)于對(duì)象和數(shù)組都不能直接整個(gè)賦值

<script setup>
import { reactive} from 'vue'
const arr = reactive([]);
const arr2=reactive({arr:[]});
const load = () => {
  const res = [2, 3, 4, 5]; //假設(shè)請(qǐng)求接口返回的數(shù)據(jù)
  //方法1 失敗，直接賦值丟失了響應(yīng)性
     arr = res;
  // 方法2 這樣也是失敗
     arr.concat(res);
  // 方法3 成功 插入數(shù)據(jù)，修改數(shù)據(jù)屬性，但是很麻煩
  res.forEach(e => {
    arr.push(e);
  });
  // 方法4 成功 
   arr.value =res
  //方法5 成功
  arr2.arr = res
};
</script>
<template>
  <h1>Demo</h1>
</template>

這里就是vue3中setup組合式api中如何定義響應(yīng)式數(shù)據(jù)并且修改賦值全部內(nèi)容了

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

您可能感興趣的文章:

相關(guān)文章

詳解vue.js 開發(fā)環(huán)境搭建最簡單攻略
本篇文章主要介紹了vue.js 開發(fā)環(huán)境搭建最簡單攻略，這里整理了詳細(xì)的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
vue.js實(shí)現(xiàn)三級(jí)菜單效果
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)三級(jí)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
QT和vue交互的實(shí)現(xiàn)示例
本文主要介紹了QT和vue交互的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue使用axios訪問本地json文件404問題及解決
這篇文章主要介紹了vue使用axios訪問本地json文件404問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue首屏?xí)r間指標(biāo)采集最佳方式詳解
這篇文章主要為大家介紹了Vue首屏?xí)r間指標(biāo)采集最佳方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法
今天小編就為大家分享一篇vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
一起寫一個(gè)即插即用的Vue Loading插件實(shí)現(xiàn)
這篇文章主要介紹了一起寫一個(gè)即插即用的Vue Loading插件實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue報(bào)錯(cuò)Cannot?read?properties?of?undefined?(...)類型的解決辦法
這篇文章主要給大家介紹了關(guān)于vue報(bào)錯(cuò)Cannot?read?properties?of?undefined?(...)類型的解決辦法,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-04-04
解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒出錯(cuò)的問題
這篇文章主要介紹了解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒出錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue開發(fā)環(huán)境的搭建全過程
文章介紹了在網(wǎng)頁中使用Vue.js的四種方式：基本方式、腳手架方式（Vue2.0）、使用WebStorm集成環(huán)境創(chuàng)建vue-cli項(xiàng)目（Vue3.0）以及Vue項(xiàng)目的目錄結(jié)構(gòu),每種方式都有詳細(xì)的步驟和示例,幫助讀者快速上手Vue.js開發(fā)
2024-11-11