vue3怎么使用ref和reactive定義和修改響應式數據

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

需求：vue3中setup組合式api中如何定義響應式數據并且修改賦值呢？

1、字符串/數字：“ref”是vue3中用來存儲值的響應式數據源，它可以定義字符串，數字等

<script setup>
import { ref } from 'vue'
// “ref”是用來存儲值的響應式數據源。
// 理論上我們在展示該字符串的時候不需要將其包裝在 ref() 中，
const message = ref('Hello World!')
// 但是在這個示例中更改這個值的時候，就可以實現數據和頁面響應式綁定了。
function changeMsg(data){
    //message=data   這種是不行的，無法實現雙向綁定
    message.value=data
}
</script>
<template>
  <h2>{{ message }}</h2>
<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>
  <h2>Demo</h2>
</template>

這里就是vue3中setup組合式api中如何定義響應式數據并且修改賦值全部內容了

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