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,
    };
  },
};

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

  • hooks 相关的变化

Vue2.x 的生命周期

Vue3.x 的生命周期

beforeCreate

setup

create

setup

beforeMount

onBeforeMount

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeDestroy

onBeforeUnmount

destroyed

onUnmounted

errorCaptured

onErrorCaptured

  • 新增属性 Vue3.0 在 Composition API 中另外加了两个钩子,分别是 onRenderTracked 和 onRenderTriggered,两个钩子函数都接收一个 DebuggerEvent :
export default {
  onRenderTriggered(e) {
    // 检查依赖性触发组件重新渲染
  },
};

本文分享自微信公众号 - 前端黑板报(FeHeiBanBao)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript代码风格要素

    1920年,由威廉·斯特伦克(William Strunk jr .)撰写的《英语写作手册:风格的要素(The Elements of Style)》出版了,这...

    前端黑板报
  • 数组对象转为Map

    数据类型的转换在业务代码中肯定很常见,因为不同的数据结构使用不同的情况。比如数组适合下标快速检索,对象适合根据键快速检索。

    前端黑板报
  • 软件工程师需要了解的网络知识:从铜线到HTTP(三)—— TCP/IP

    JohnLui:程序员,Swift Contributor,正在写《iOS 可视化编程与 Auto Layout》 那些首部 ? 一个 HTTP 请求发送到服...

    前端黑板报
  • 我每天重复写这个API,没有一次请求状态码是200

    我是一个普通的比你还普通的代码撰写人员,甚至不敢号称是程序员,我每天起床都接到这样一个任务,我需要去完成一个API,一个普通的API,我可以不用写文档、不用写注...

    Java猫说
  • iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 解析JSON

    视频地址:https://www.cctalk.com/v/15114923886141 JSON 数据 我颠倒了整个世界,只为摆正你的倒影。 前面的文章中,...

    iKcamp
  • JS数组奇巧淫技

    前段时间接手一个项目,逻辑晦涩难懂,代码庞大冗余,上手极其困难。很大的原因就是数组方法使用不熟练,导致写出了很多垃圾代码,其实很多地方稍加改动就可以变得简单高效...

    刘小夕
  • Python网络数据采集之使用API|第03天

    百度百科关于API的解释:API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序...

    你好我是森林
  • 与我一起学习微服务架构设计模式8—外部API模式

    Web应用在防火墙内部运行,它们通过高带宽、低延迟的局域网访问服务。其他客户端在防火墙之外运行,通过较低带宽、较高延迟的互联网或移动网路访问。

    java达人
  • java基础学习_面向对象(上)03_day08总结

    ============================================================================= ==...

    黑泽君
  • 1. A + B 问题

    给出两个整数a和b, 求他们的和, 但不能使用 + 等数学运算符。 不能用求和运算符肯定就是用一些最简单的逻辑运算符实现了。 如果没有进位的情况,可以了解用...

    和蔼的zhxing

扫码关注云+社区

领取腾讯云代金券