第三章 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
    });
  }
};