Vue3.0来了

Vue3.0更新了啥

Vue这次3.0发布了，博客平台、公众号、朋友圈基本都有这么一条新闻，可见大家对其期待程度，毕竟Vue 有 130 万的使用者嘛，萌新不知不觉感觉瑟瑟发抖。看着这么多页的改动就像是那新鲜的水果，鲜嫩欲滴，无从下?。

于是乎，本文就简单的探索一下3.0带来的一些东西。

其中两个比较重要的更新，一个是 Composition API，另一个是对 TypeScript 的全面支持。

但是目前看来，市面上的各大组件库还没来得及针对 Vue3.0 进行改版升级。

Application API

一个是 Composition API，另一个是对 TypeScript 的全面支持 周边的插件如 Vue-Router、Vuex、VSCode 插件 Vetur 等都在有序的进行中 下面简单介绍一下

Application API

全局改变的动作，都在 createApp 所创建的应用实例中，如下所示：

import { createApp } from "vue";
const app = createApp({});

• config 应用的配置项 config 是一个包含 Vue 应用程序全局配置的对象。可以在挂载应用程序之前修改下面列出的属性。 app.config.errorHandler = (err, vm, info) => { // info 为 Vue 在某个生命周期发生错误的信息 };
  • devtools:boolean 工具检测
  • errorHandler:Function 生命周期的错误 ❌ 信息
• globalProperties 全局变量 [key:string]:any 组件内的属性权限比较高 app.config.globalProperties.name = "name";
• component 第一个参数为组件名字，第二个参数 Function|| Object。如果只传第一个参数，返回组件 import { createApp } from "vue"; const app = createApp({}); // 注册options 对象 app.component("my-component", { /* ... */ }); // 检索组件 const MyComponent = app.component("my-component");
• directive 自定义指令 基本不变 app.directive("my-directive", { beforeMount() {}, mounted() {}, beforeUpdate() {}, updated() {}, beforeUnmount() {}, unmounted() {}, });

多数全局 API 都没变化,参考 2.x 写法即可

Composition API

Vue2.x 配置方法写组件,随着业务复杂度越来越高，代码量会不断的加大,由于相关业务的代码需要遵循 option 的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高 Composition API 带来了一些新的函数

• reactive
• watchEffect
• computed
• ref
• toRefs
• hooks

reactive 相当于 Vue2.x 的 Vue.observable () API 经过 reactive 处理后的函数能变成响应式的数据，类似之前写模板页面时定义的 data 属性的值

import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      a: 0,
    });

    function increment() {
      state.a++;
    }

    return {
      state,
      increment,
    };
  },
};

watchEffect 副作用 立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。 computed computed 在 Vue2.x 就存在

import { reactive, computed } from "vue";

export default {
  setup() {
    const state = reactive({
      a: 0,
    });
    const double = computed(() => state.a * 2);
    function increment() {
      state.a++;
    }
    return {
      double,
      state,
      increment,
    };
  },
};

ref 和 toRefs toRefs 提供了一个方法可以把 reactive 的值处理为 ref，也就是将响应式的对象处理为普通对象。

• hooks 相关的变化

• 新增属性 Vue3.0 在 Composition API 中另外加了两个钩子，分别是 onRenderTracked 和 onRenderTriggered，两个钩子函数都接收一个 DebuggerEvent :

export default {
  onRenderTriggered(e) {
    // 检查依赖性触发组件重新渲染
  },
};