vue3中如何使用ref和reactive定義和修改響應式數據(最新推薦)
更新時間：2022年12月02日 15:21:30 作者：國服第二切圖仔
這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應式數據,這里就是vue3中setup組合式api中如何定義響應式數據并且修改賦值全部內容，需要的朋友可以參考下
需求：vue3中setup組合式api中如何定義響應式數據并且修改賦值呢？
1、字符串/數字：“ref”是vue3中用來存儲值的響應式數據源，它可以定義字符串，數字等
<script setup>
import { ref } from 'vue'
// “ref”是用來存儲值的響應式數據源。
// 理論上我們在展示該字符串的時候不需要將其包裝在 ref() 中，
const message = ref('Hello World!')
// 但是在這個示例中更改這個值的時候，就可以實現(xiàn)數據和頁面響應式綁定了。
function changeMsg(data){
//message=data 這種是不行的，無法實現(xiàn)雙向綁定
message.value=data
}
</script>
<template>
<h1>{{ message }}</h1>
<button @click="changeMsg('數據修改')">Reverse Message</button>
</template>2、數組/對象：引入 reactive 用來定義對象數據包括數組和對象
vue3使用proxy，對于對象和數組都不能直接整個賦值
<script setup>
import { reactive} from 'vue'
const arr = reactive([]);
const arr2=reactive({arr:[]});
const load = () => {
const res = [2, 3, 4, 5]; //假設請求接口返回的數據
//方法1 失敗，直接賦值丟失了響應性
arr = res;
// 方法2 這樣也是失敗
arr.concat(res);
// 方法3 成功 插入數據，修改數據屬性，但是很麻煩
res.forEach(e => {
arr.push(e);
});
// 方法4 成功
arr.value =res
//方法5 成功
arr2.arr = res
};
</script>
<template>
<h1>Demo</h1>
</template>這里就是vue3中setup組合式api中如何定義響應式數據并且修改賦值全部內容了
到此這篇關于vue3中如何使用ref和reactive定義和修改響應式數據的文章就介紹到這了,更多相關vue3響應式數據內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
詳解vue.js 開發(fā)環(huán)境搭建最簡單攻略
本篇文章主要介紹了vue.js 開發(fā)環(huán)境搭建最簡單攻略，這里整理了詳細的步驟，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)三級菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
本文主要介紹了QT和vue交互的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了vue使用axios訪問本地json文件404問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了Vue首屏時間指標采集最佳方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
vue路由事件beforeRouteLeave及組件內定時器的清除方法
今天小編就為大家分享一篇vue路由事件beforeRouteLeave及組件內定時器的清除方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
一起寫一個即插即用的Vue Loading插件實現(xiàn)
這篇文章主要介紹了一起寫一個即插即用的Vue Loading插件實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
vue報錯Cannot?read?properties?of?undefined?(...)類型的解決辦法
這篇文章主要給大家介紹了關于vue報錯Cannot?read?properties?of?undefined?(...)類型的解決辦法,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了解決vue項目打包上服務器顯示404錯誤,本地沒出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
文章介紹了在網頁中使用Vue.js的四種方式：基本方式、腳手架方式（Vue2.0）、使用WebStorm集成環(huán)境創(chuàng)建vue-cli項目（Vue3.0）以及Vue項目的目錄結構,每種方式都有詳細的步驟和示例,幫助讀者快速上手Vue.js開發(fā)2024-11-11