vue3怎么使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)

這篇文章主要介紹“vue3怎么使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“vue3怎么使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)”文章能幫助大家解決問題。

需求：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ù)源。
// 理論上我們在展示該字符串的時(shí)候不需要將其包裝在 ref() 中，
const message = ref('Hello World!')
// 但是在這個示例中更改這個值的時(shí)候，就可以實(shí)現(xiàn)數(shù)據(jù)和頁面響應(yīng)式綁定了。
function changeMsg(data){
    //message=data   這種是不行的，無法實(shí)現(xiàn)雙向綁定
    message.value=data
}
</script>
<template>
  <h2>{{ message }}</h2>
<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>
  <h2>Demo</h2>
</template>

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

關(guān)于“vue3怎么使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。