首页 > 技术文章 > Vue3教程:Vue 3.0 来了,我们该做些什么?

han-1034683568 2020-09-21 09:09 原文

推荐一下本人近期维护的开源项目

Spring Boot 开源电商项目(含商城端和后台管理系统)https://github.com/newbee-ltd/newbee-mall

Spring Boot + Vue3 前后端分离商城项目https://github.com/newbee-ltd/newbee-mall-vue3-app

Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 开发的后台管理系统https://github.com/newbee-ltd/vue3-admin

靓仔路过,不要错过

想必 Vue3.0 发布这件事,大家都知道了。

我也是从朋友圈的转发得知此事,博客平台、公众号、朋友圈基本都有这么一条新闻,可见 Vue3.0 的被期待程度,因为 React 16 发布的时候,我也没见大家这么追捧,让我有点震惊的是 Vue 有 130 万的使用者,这个体量真的是有点惊人。

Vue 3.0 来了,我们该做些什么呢?

  • 学习,赶紧学习,学不动了也要学!
  • 装不知道,我是一只快乐的鸵鸟,我不知道 Vue 更新了,继续摸鱼爽歪歪。
  • 为了下半年的 KPI,冲冲冲!把手头的 Vue 项目进行版本升级和重构。

Vue3.0 更新了啥

让我总结的话,就只有两个比较重要的更新(我目前还没有完完整整的体验过新版本,有些地方可能不够完善,希望大家多多包涵,后续会整理和分享一些实践的 demo)

一个是 Composition API,另一个是对 TypeScript 的全面支持。

团队还会出一个 Vue 2.7 的版本,给予 2.x 用户一些在 3.0 版本中被删除方法的警告,这有助于用户的平稳升级。
Nuxt3 好像还在路上,但是目前看来,市面上的各大组件库还没来得及针对 Vue3.0 进行改版升级。

周边的插件如 Vue-Router、Vuex、VSCode 插件 Vetur 等都在有序的进行中。

Vue3.0 具体更新了啥

来点阳间的知识,说点人话。

下面以代码片段的形式为大家介绍一下 Vue3.0 作出了哪些新的变化,Vue2.x 对应一些 Vue3.0 的写法。

应用的配置项

config 是一个包含 Vue 应用程序全局配置的对象。可以在挂载应用程序之前修改下面列出的属性。

  • devtools
    类型: boolean
    默认值: true
    如何使用:
app.config.devtools = true

是否开启 vue-devtools 工具的检测,默认情况下开发环境是 true,生产环境下则为 false。

  • errorHandler
    类型: Function
    默认值: undefined
    如何使用:
app.config.errorHandler = (err, vm, info) => {
  // info 为 Vue 在某个生命周期发生错误的信息
}

为组件渲染功能和观察程序期间的未捕获错误分配处理程序。

  • globalProperties

推荐阅读