欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：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中用來存儲值的響應(yīng)式數(shù)據(jù)源，它可以定義字符串，數(shù)字等

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

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

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

<script setup>
import { reactive} from 'vue'
const arr = reactive([]);
const arr2=reactive({arr:[]});
const load = () => {
  const res = [2, 3, 4, 5]; //假設(shè)請求接口返回的數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Vue2中pinia刷新后數(shù)據(jù)丟失的問題解決

    Vue2中pinia刷新后數(shù)據(jù)丟失的問題解決

    Pinia是一個Vue.js狀態(tài)管理庫，如果你在組件中修改了store中的數(shù)據(jù)并刷新了界面，Pinia會將store中的數(shù)據(jù)重置為初始值，從而導(dǎo)致數(shù)據(jù)丟失的問題，本文就來介紹一下問題解決，感興趣的可以了解一下
    2023-12-12
  • vue-cli配置環(huán)境變量的方法

    vue-cli配置環(huán)境變量的方法

    本篇文章主要介紹了vue-cli配置環(huán)境變量的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • Vue.js單向綁定和雙向綁定實例分析

    Vue.js單向綁定和雙向綁定實例分析

    這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結(jié)合實例形式分析了vue.js單向綁定與雙向綁定相關(guān)原理、實現(xiàn)方法及操作技巧,需要的朋友可以參考下
    2018-08-08
  • Vue響應(yīng)式原理深入分析

    Vue響應(yīng)式原理深入分析

    響應(yīng)式就是當(dāng)對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生變化時,將會運行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • vue中各組件之間傳遞數(shù)據(jù)的方法示例

    vue中各組件之間傳遞數(shù)據(jù)的方法示例

    Vue 的組件作用域都是孤立的，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。必須使用特定的方法才能實現(xiàn)組件之間的數(shù)據(jù)傳遞。下面這篇文章主要給大家介紹了關(guān)于vue中各組件之間傳遞數(shù)據(jù)的方法示例，需要的朋友可以參考學(xué)習(xí)。
    2017-07-07
  • Vue中使用Scss實現(xiàn)配置、切換主題方式

    Vue中使用Scss實現(xiàn)配置、切換主題方式

    這篇文章主要介紹了Vue中使用Scss實現(xiàn)配置、切換主題方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue 中動態(tài)綁定class 和 style的方法代碼詳解

    vue 中動態(tài)綁定class 和 style的方法代碼詳解

    這篇文章主要介紹了vue 中動態(tài)綁定class 和 style的方法，通過實例結(jié)合的形式給大家接受的非常詳細，需要的朋友參考下吧
    2018-06-06
  • 詳解vue computed的緩存實現(xiàn)原理

    詳解vue computed的緩存實現(xiàn)原理

    這篇文章主要介紹了vue computed的緩存實現(xiàn)原理，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
    2021-04-04
  • Vue中使用 setTimeout() setInterval()函數(shù)的問題

    Vue中使用 setTimeout() setInterval()函數(shù)的問題

    這篇文章主要介紹了Vue中使用 setTimeout() setInterval()函數(shù)的問題 ,需要的朋友可以參考下
    2018-09-09
  • vue項目使用luckyexcel預(yù)覽excel表格功能(心路歷程)

    vue項目使用luckyexcel預(yù)覽excel表格功能(心路歷程)

    這篇文章主要介紹了vue項目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實現(xiàn),還發(fā)現(xiàn)一種方法可以實現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細,需要的朋友可以參考下
    2023-10-10

最新評論