VUE3（九）reactive與toRefs函數

上一部分中我們說到的ref只是作為單個變量的響應。

Vue3.0中還為我們提供了一個對象式響應的reactive函數 。

Reactive函數創建一個響應式對象。

一：Reactive函數

其實，在我看來，reactive函數 就是VUE3.0為我們提供的替代VUE2.0中data的一個函數，因此，在這里，我不建議將方法也寫到reactive函數中。

reactive函數 中只寫數據即可。

1：引入

import {
    ref,
    reactive,
} from "vue";

2：實例

我這里使用上一部分中我們測試使用的代碼來做示例，剛好對比一下ref與reactive在寫法上邊的區別。

Helloworld.vue

<template>
  <h1>{{ msg }}</h1>
  <!-- <button @click="count++">count is: {{ count }}</button> -->
  <!-- 模板語法需要使用data.屬性來調用 -->
  <button @click="count++">count is: {{ data.count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <button @click="clickMe()">點我彈窗</button>
</template>
 
<script lang='ts'>
import {
    ref,
    reactive
} from "vue";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // 使用setup 代替 data
  // 因為我這里使用的是typescript，因此需要給參數指定類型
  setup(props:any,context:any){
    // ref 定義響應式數據
    // let count = ref(0); 
 
    // reactive 創建響應式對象
    let data = reactive({
      // 定義響應式數據
      count:0,
    });
    
    const clickMe = () => {
      // 使用ref關鍵字綁定的變量，賦值 的時候必須使用.value
      // count.value++;
      // 調用reactive 定義對象的參數的時候需要使用對象.來調用
      data.count++;
      alert('hi');
    }
    return {
      data,
      clickMe
    }
  },
}
</script>

3：主要有這幾個區別：

1：在js中調用需要使用data.屬性來賦值使用。

2：在VUE模板語法中，也需要使用data.屬性來賦值使用。

二：toRefs函數

模板語法中需要使用data.屬性來調用屬性顯示，相對來說就比較麻煩。

其實我們可以使用ES6中的擴展運算符來對其進行解構處理，但是，這樣吧解構之后，便不再具有響應式的屬性，這個不行。

VUE3.0為我們提供了toRefs函數可以解決這個問題。

1：引入

import {
    ref,
    reactive,
    toRefs
} from "vue";

2：示例

Helloworld.vue

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <!-- 模板語法需要使用data.屬性來調用（單獨使用reactive函數） -->
  <!-- <button @click="count++">count is: {{ data.count }}</button> -->
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <button @click="clickMe()">點我彈窗</button>
</template>
 
<script lang='ts'>
import {
    ref,
    reactive,
    toRefs
} from "vue";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // 使用setup 代替 data
  // 因為我這里使用的是typescript，因此需要給參數指定類型
  setup(props:any,context:any){
    // ref 定義響應式數據
    // let count = ref(0); 
 
    // reactive 創建響應式對象
    let data = reactive({
      // 定義響應式數據
      count:0,
    });
    
    const clickMe = () => {
      // 使用ref關鍵字綁定的變量，賦值 的時候必須使用.value
      // count.value++;
      // 調用reactive 定義對象的參數的時候需要使用對象.來調用
      data.count++;
      alert('hi');
    }
 
    // 使用toRefs函數對data對象進行包裝，確保使用擴展運算符進行解構之后，仍具有響應式
    let param = toRefs(data);
    return {
      // data,
      ...param,
      clickMe
    }
  },
}
</script>

完整的代碼已經給出，具體的使用，你可能還需要自己試一下。

有好的建議，請在下方輸入你的評論。

歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：