一文搞定vue3.0新特性-經常使用函數的使用與生命週期

這是我參與8月更文挑戰的第9天，活動詳情查看：8月更文挑戰

一.vue3經常使用函數的使用

• setup 函數用法,能夠代替Vue2中的data和method屬性,直接把邏輯加在setup中

• ref 函數在temlate中用的變量須要用ref包裝下

• return出去的數組和方法在模板中才可使用

setup() {
    const girls = ref(["小紅", "小英", "曉紅"]);
    const selectGirl = ref("");
    const selectGirlFun = (index) => {
      selectGirl.value = girls.value[index];
    };
    return {
      girls,
      selectGirl,
      selectGirlFun,
    };
  },

複製代碼

• reactive函數的用法,他的參數不是基本類型,而是一個object,這樣就你不用在方法中寫.value了,同時放回data就能夠

setup() {
    const data = reactive({
      girls: ["a", "b", "c"],
      selectGirl: "",
      selectGirlFun: (index) => {
        console.log(1111)
        data.selectGirl = data.girls[index];
      },
    });


    return {
      data
    };
  },

複製代碼

可是這樣寫,必須在template使用變量和方法的時候須要加上data.,這樣顯然是不符合咱們開發的編碼習慣的,
咱們能夠想到在return的時候將data解構使用...拓展運算符,可是這樣解構後就成了普通變量,再也不具備響應式的能力,
因此咱們須要使用toRefs()函數

• toRefs函數的用法

setup() {
    const data = reactive({
      girls: ["a", "b", "c"],
      selectGirl: "",
      selectGirlFun: (index) => {
        console.log(1111)
        data.selectGirl = data.girls[index];
      },
    });
    const refData = toRefs(data);

    return {
      ...refData,
    };
  }

複製代碼

如何選擇ref和reactive,兩種方法均可以,他們均可以生成響應式對象,我的選擇reactive

二.生命週期更新

對於vue的生命週期想必你們都非熟悉,在項目中很是經常使用

生命週期:伴隨着生命週期，給用戶使用的函數，操控生命週期，主要是操控鉤子函數。

vue3的生命週期

• setup() :開始建立組件以前，在beforeCreate和created以前執行。建立的是data和method
• onBeforeMount() : 組件掛載到節點上以前執行的函數。
• onMounted() : 組件掛載完成後執行的函數。
• onBeforeUpdate(): 組件更新以前執行的函數。
• onUpdated(): 組件更新完成以後執行的函數。
• onBeforeUnmount(): 組件卸載以前執行的函數。
• onUnmounted(): 組件卸載完成後執行的函數
• onActivated(): 被包含在中的組件，會多出兩個生命週期鉤子函數。被激活時執行。
• onDeactivated(): 好比從 A 組件，切換到 B 組件，A 組件消失時執行。
• onErrorCaptured(): 當捕獲一個來自子孫組件的異常時激活鉤子函數。

vue3生命週期與vue2生命週期對比理解

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

複製代碼

vue3的生命週期函數在使用前須要先引入

import {
  reactive,
  toRefs,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
} from "vue";

複製代碼

setup() {
  onMounted(() => {
    console.log('mounted')
  })
  onUpdated(() => {
    console.log('updated')
  })
  onRenderTriggered((event) => {
    console.log(event)
  })
}

複製代碼

onRenderTracked 和onRenderTriggered 鉤子函數的使用

onRenderTracked =>狀態跟蹤,他會跟蹤頁面上全部響應式變量和方法的狀態,也就是咱們return出去的值,
只要頁面有update的狀況,他就會跟蹤,而後生成一個event對象,咱們能夠經過event對象來查找程序所存在的問題
一樣須要先引入

import { .... ,onRenderTracked,} from "vue";

複製代碼

再在setup函數中使用

onRenderTracked((event) => {
  console.log("狀態跟蹤組件----------->");
  console.log(event);
});

複製代碼

onRenderTriggered=> 狀態觸發,不會跟蹤每個值,而是給你變化值的信息,而且新值和舊值都會明確的展現出來
若是把onRenderTracked是每一個值都追蹤,而onRenderTriggered是精準追蹤,進行鍼對性調試
使用時咱們一樣須要導入

import { .... ,onRenderTriggered,} from "vue";
onRenderTriggered((event) => {
  console.log("狀態觸發組件--------------->");
  console.log(event);
});
- key 那邊變量發生了變化
- newValue 更新後變量的值
- oldValue 更新前變量的值
- target 目前頁面中的響應變量和函數

複製代碼

這樣看來onRenderTriggered跟watch有一絲絲像watch