Vue3中關於ref和reactive的問題怎麼解決

關於ref和reactive的問題

如果你使用過Vue3，你知道的，在Vue3 中有兩個非常常用的響應式API： reactive 和ref。它們會把我們想要追蹤的數據變成響應式。

我們一直被告知，ref 可以被用來建立基本型別和引用型別的回應式。而對於引用類型，底層也是轉換為 reactive 來進行響應式處理。既然如此，為什麼還需要使用 reactive？全部使用 ref 不就可以了嗎？

雖然 ref 建立的響應式資料在腳本中需要使用 .value 才能訪問，但在這種情況下，這不會對程式產生太大的影響。範本會自動新增 .value，因此不需要在範本中使用 .value 存取。

既然這二者基本上沒撒差別，但是還是暴露了 reactive 這個 API，難道有什麼場景是 reactive 能做而 ref 做不了的？

簡單了解 ref & reactive

我們先簡單了解這兩個 API。

reactive

傳回物件的響應式副本，響應式轉換是「深層」的——它影響所有巢狀 property。我們一般這樣寫。

const obj = reactive({ count: 0 })

並且可以直接使用。

const count = obj.count

ref

受一個內部值並傳回一個響應式且可變的 ref 物件。 The ref object has only one .value property, which points to the inner value.。我們一般是這樣寫。

const data = ref(xxx)

引用的時候，一般會透過data.value的方式引用。

const dataValue = data.value

透過追蹤 Vue3 的原始碼可以證明，當我們呼叫 ref 方法來定義響應式資料時，當參數為物件型別時，其實裡面用的是 reactive 方法。也就是說，data.value 上面的屬性是透過 reactive 方法來建立的。

注意：

reactive 能做的ref 也能做，而且還是用reactive 做的

當ref 的參數為物件時，用的就是reactive 方法

在Vue3 中，如果是把物件類型的資料弄成響應式，reactive 和ref 都可以，且ref 內部是透過r eactive 來支援的。也就是說，你 reactive 能做的，我 ref 也能做。

簡單來說 ref 是在 reactive 上在進行了封裝進行了增強，所以在 Vue3 中 reactive 能做的，ref 也能做，reactive 不能做的，ref 也能做。

個人理解ref是reactive的語法糖，如：ref(1) 就等價於reactive({value: 1});

平時項目ref一把梭，是可以的，問題也不大

vue3 ref 和reactive的區別

Ref

ref資料響應式監聽。 ref 函數傳入一個值作為參數，一般傳入基本資料類型，返回一個基於該值的響應式Ref對象，該對像中的值一旦被改變和訪問，都會被跟踪到，就像我們改寫後的示例程式碼一樣，透過修改count.value 的值，可以觸發模板的重新渲染，顯示最新的值

<template>
  
  <h2>{{name}}</h2>
  <h2>{{age}}</h2>
  <button @click="sayName">按钮</button>
</template>

<script lang="ts">
import {ref,computed} from &#39;vue&#39; 

export default {
  name: &#39;App&#39;,
  setup(){
    const name = ref(&#39;zhangsan&#39;)
    const birthYear = ref(2000)
    const now = ref(2020)
    const age = computed(()=>{
      return now.value - birthYear.value
    })
    const sayName = () =>{
      name.value = &#39;I am &#39; + name.value
    }
    return {
      name,
      sayName,
      age
    }
  }
}
</script>

reactive

reactive是用來定義更複雜的資料類型，但是定義後裡面的變數取出來就不在是響應式Ref物件資料了

所以需要用toRefs函數轉換成響應式資料物件

將上面用ref寫的程式碼轉換成reactive型的程式碼

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <div>
    <h2>{{ name }}</h2>
    <h2>{{ age }}</h2>
    <button @click="sayName">按钮</button>
  </div>
</template>

<script lang="ts">
import { computed, reactive,toRefs } from "vue";

interface DataProps {
  name: string;
  now: number;
  birthYear: number;
  age: number;
  sayName: () => void;
}

export default {
  name: "App",
  setup() {
   

    const data: DataProps = reactive({
      name: "zhangsan",
      birthYear: 2000,
      now: 2020,
      sayName: () => {
        console.log(1111);
        console.log(data.name);
        
        data.name = "I am " + data.name;
        console.log(data.name);
      },
      age: computed(() => {
        return data.now - data.birthYear;
      }),
    });

    const refData = toRefs(data)
    refData.age
    return {
      ...refData,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

以上是Vue3中關於ref和reactive的問題怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！