vue3中ref和reactive的區別（系列六）

  1. ref和reactive區別:
    如果在template里使用的是ref類型的數據, 那么Vue會自動幫我們添加.value
    如果在template里使用的是reactive類型的數據, 那么Vue不會自動幫我們添加.value

   2. Vue是如何決定是否需要自動添加.value的
    Vue在解析數據之前, 會自動判斷這個數據是否是ref類型的,
    如果是就自動添加.value, 如果不是就不自動添加.value

   3. Vue是如何判斷當前的數據是否是ref類型的
    通過當前數據的__v_ref來判斷的
    如果有這個私有的屬性, 並且取值為true, 那么就代表是一個ref類型的數據

數據是ref類型

<template>
  <div>
    <p>{{ age }}</p>
    <button @click="myFn">按鈕</button>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    // ref類型在底層會自動轉換成reactive類型 // ref(18) -> reactive({value: 18})
    let age = ref(18);

    function myFn() {
      age.value = 666;
　　　　console.log(age)
    }
    return { age, myFn };
  },
};
</script>

<style></style>

效果，點擊按鈕，頁面數據變成666了，注意，vue模板中沒有age.value,因為ref類型的數據有isRef屬性，底層自動會將.value加上。

 

 

 數據是reactive類型

<template>
  <div>
    <p>{{age}}</p>
    <button @click="myFn">按鈕</button>
  </div>
</template>

<script>

  import {reactive} from 'vue';

export default {
  name: 'App',
  setup() {
    let age = reactive({value: 18});
    function myFn() {
        age.value = 666;
　　　　　　console.log(age)
    }
    return {age, myFn}
  }
}
</script>

<style>

</style>

效果，點擊按鈕，頁面還是個對象數據，因為是reactive類型數據，沒有isRef屬性，vue不會自動在模板添加.value, 所以我們需要手動在模板添加age.value

 

 

 

我們如何判斷數據到底是ref還是reactive?

  通過isRef / isReactive 方法

<template>
  <div>
    <p>{{age}}</p>
    <button @click="myFn">按鈕</button>
  </div>
</template>

<script>

  import {reactive} from 'vue';

export default {
  name: 'App',
  setup() {
    let age = reactive({value: 18});
    function myFn() {
       console.log(isRef(age)); //false
        console.log(isReactive(age));  //true
        age.value = 666;
    }
    return {age, myFn}
  }
}
</script>

<style>

</style>