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

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

   3. Vue是如何判斷當(dāng)前的數(shù)據(jù)是否是ref類型的
    通過當(dāng)前數(shù)據(jù)的__v_ref來判斷的
    如果有這個(gè)私有的屬性, 并且取值為true, 那么就代表是一個(gè)ref類型的數(shù)據(jù)

數(shù)據(jù)是ref類型

<template>
  <div>
    <p>{{ age }}</p>
    <button @click="Fn">按鈕</button>
  </div>
</template>
 
<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    // ref類型在底層會自動轉(zhuǎn)換成reactive類型
    // ref(18) -> reactive({value: 18})
    let age = ref(18);
 
    function Fn() {
      age.value = 666;
　　　　console.log(age)
    }
    return { age, Fn };
  },
};
</script>

點(diǎn)擊按鈕，頁面數(shù)據(jù)變成666了，注意，vue模板中沒有age.value,因?yàn)閞ef類型的數(shù)據(jù)有isRef屬性，底層自動會將.value加上

 數(shù)據(jù)是reactive類型

<template>
  <div>
    <p>{{age}}</p>
    <button @click="Fn">按鈕</button>
  </div>
</template>
 
<script>
 
import {reactive} from 'vue';
 
export default {
  name: 'App',
  setup() {
    let age = reactive({value: 18});
    function Fn() {
        age.value = 666;
　　 console.log(age)
    }
    return {age, Fn}
  }
}
</script>

點(diǎn)擊按鈕，頁面還是個(gè)對象數(shù)據(jù)，因?yàn)槭莚eactive類型數(shù)據(jù)，沒有isRef屬性，vue不會自動在模板添加.value, 所以我們需要手動在模板添加age.value

我們?nèi)绾闻袛鄶?shù)據(jù)到底是ref還是reactive?

  通過isRef / isReactive 方法

<template>
  <div>
    <p>{{age}}</p>
    <button @click="Fn">按鈕</button>
  </div>
</template>
 
<script>
 
  import {reactive} from 'vue';
 
export default {
  name: 'App',
  setup() {
    let age = reactive({value: 18});
    function Fn() {
       console.log(isRef(age)); //false
        console.log(isReactive(age));  //true
        age.value = 666;
    }
    return {age, Fn}
  }
}
</script>

擴(kuò)展知識點(diǎn)：vue3 中 reactive 和 ref 對比區(qū)別

定于數(shù)據(jù)角度對比：ref 用來定義：基本類型數(shù)據(jù)
reactive 用來定義：對象、或數(shù)組類型的數(shù)據(jù)
備注：ref也可以用來定義對象或數(shù)組類型數(shù)據(jù)，它內(nèi)部會自動通過 reactive 轉(zhuǎn)為代理對象

原理角度對比：ref 通過 Object.defineProperty() 的 get 與 set 來實(shí)現(xiàn)響應(yīng)式的（數(shù)據(jù)劫持）
reactive 通過使用 Proxy 來實(shí)現(xiàn)響應(yīng)式（數(shù)據(jù)劫持），并通過Reflect 操作源對象內(nèi)部的數(shù)據(jù)。

使用角度對比：ref 定義的數(shù)據(jù)：操作數(shù)據(jù)需要 .value,讀取數(shù)據(jù)時(shí)模版中直接讀取不需要 .valuereactive 定義的數(shù)據(jù)：操作數(shù)據(jù)與讀取數(shù)據(jù)，均不需要 .value

到此這篇關(guān)于vue3 中ref和reactive的區(qū)別講解的文章就介紹到這了,更多相關(guān)vue3 - ref和reactive的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論