第三章 vue3.0的使用

一、vue3.0是什么

Vue3.0又稱為vue-next,主要3個特點:響應式、模板、對象式的組件聲明方式，進行了全面的更改，底層實習和上層的api都有了明顯的變化，基於Proxy重新實現了響應式，基於treeshaking內置了更多的功能，提供了類式的組件聲明方式。

具體:https://www.jianshu.com/p/1e09e244bdc3

二、vue3.0最新進展 、Composition API使用

vue 官方發布了最新的3.0api修改草案，並在充分采納社區的意見后，將vue Function API 更正為Vue Composition API,也提供了Vue3.0特性的嘗鮮版本，在Vue2.x能夠提前體驗此API的庫@vue/composition-api

詳見:https://vue-composition-api-rfc.netlify.com

項目中使用:

npm  install @vue/composition-api --save

main.js

import VueComposition from "@vue/composition-api"; 

Vue.use(VueComposition);

三、vue3.0新特性語法

setup函數

setup函數是一個新的vue組件選項，是用於在組件中使用Composition API 的入口

export default {

  setup(props, context) {
    context.attrs, 
    context.slots,
    context.parent, 
    context.root, 
    context.emit
  }
};

Reactive (聲明單一對象時使用)

取得一個對象並返回原始對象的響應數據處理

import { reactive } from "@vue/composition-api";
export default {
  setup() {
    const obj = reactive({ count: 0 });
  }
};

 ref(聲明基礎數據類型變量時使用)

內部值並返回一個響應性且可變的ref對象。ref對象具有.value指向內部值得單個屬性。

import { ref } from "@vue/composition-api";
export default {
  setup() {
    const obj = ref("sh3h");
    console.log(obj.value);
  }
};

IsRef和toRefs

檢出一個對象是否是ref對象:

import { isRef, toRefs, reactive } from "@vue/composition-api";
export default {
  setup() {
    const foo = "sh3h";
    const unwrapped = isRef(foo) ? foo.value : foo;
    console.log(unwrapped);
    function useMousePosition() {
      const pos = reactive({
        x: 0,
        y: 0
      });
      return toRefs(pos);
    }
    const { x, y } = useMousePosition();
    console.log(x, y);
  }
};

Watch 偵聽器

import { ref, watch } from "@vue/composition-api";
export default {
  setup() {
    const count = ref(100);
    watch(
      () => count.value,
      () => {
        console.log(count);
      }
    );
    count.value = 200; //watch 被執行
  }
};

Computed

它可以使用具有get和set功能的對象來創建可寫的ref對象。

import { ref, computed } from "@vue/composition-api";
export default {
  setup() {
    const count = ref(1);
    const plusOne = computed({
      get: () => count.value + 1,
      set: val => {
        count.value = val - 1;
      }
    });
    plusOne.value = 1;
    console.log(count.value); // 0
  }
};

生命周期掛鈎

import { onMounted, onUpdated, onUnmounted } from "@vue/composition-api";
export default {
  setup() {
    onMounted(() => {
      console.log("mounted!");
    });
    onUpdated(() => {
      console.log("updated!");
    });
    onUnmounted(() => {
      console.log("unmounted!");
    });
  }
};

 2.x生命周期選項和Composition API之間的映射

beforeCreate ->使用 setup()

created ->使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

新鈎子

除了2.x生命周期等效項之外，Composition API還提供了以下調試掛鈎：

onRenderTracked

onRenderTriggered

兩個鈎子都收到DebuggerEvent類似於onTrack和onTrigger觀察者的選項：

import { onRenderTriggered } from "@vue/composition-api";
export default {
  setup() {
    onRenderTriggered(e => {
      console.log(e);
      debugger;
      // inspect which dependency is causing the component to re-render
    });
  }
};