还学得动吗，Vue 3.0和webpack5如期而至

• 一觉醒来，朋友圈被 vue3.0和 webpack5刷屏了

• 如下是Vue3.0版本的一些介绍资料，目前中文版文档尚未公布连接

https://github.com/vuejs/vue-next/releases/tag/v3.0.0

Vue3.0几个优化点

• 进一步推动“渐进框架”概念

• 分层内部模块

• 解决规模问题的新API

• 性能改进提高

• 改进的TypeScript集成

• 部分实验特征

• 分阶段发布流程

• 后续：

• 迁移和IE11支持

• 官网英文版地址：https://v3.vuejs.org/

• 官方示例：

const app = Vue.createApp({
  data() {
    return {
      input: '# hello'
    }
  },
  computed: {
    compiledMarkdown() {
      return marked(this.input, { sanitize: true });
    }
  },
  methods: {
    update: _.debounce(function(e) {
      this.input = e.target.value;
    }, 300)
  }
})

app.mount('#editor')

初始化vue3.0项目分几种模式

• CDN引入：

<script src="https://unpkg.com/vue@next"></script>

• vite构建：

npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3

• vue-cli构建:

npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
# select vue 3 preset

迁移指南：

文档地址：https://v3.vuejs.org/guide/migration/introduction.html#ide-support

注意点

• 目前，针对Vue 3和v3的项目的文档网站，GitHub分支和npm dist标签将保持next标明状态。这意味着npm install vue仍将安装Vue 2.x和npm install vue@nextVue3。咱们计划在2020年末以前将全部文档连接，分支和dist标签切换为默认值3.0。
• 同时，咱们已经开始计划2.7，这将是2.x发行版的最后一个计划的次要发行版。2.7将向后移植来自v3的兼容改进，并发出有关v3中已删除/更改的API使用状况的警告，以帮助潜在的迁移。咱们计划在2021年第一季度研究2.7，它将在发布后直接变为LTS，具备18个月的维护寿命。

webpack5传闻2020年10月10日正式版本5.0版本

• 我以前使用感觉：
• html-webpack-plugin作了调整
• 以前跟react-hot-loader热更新插件有一些冲突
• 迁移升级起来比较快
• 目前我没有看到正式的官方文章、文档连接，若是大家有的话下方讨论的时候留言如下让你们看到

目前如何使用webpack5

• 安装

npm install —save-dev webpack@next或
npm install —save-dev webpack@v5.0.0-alpha.9

据我所知webpack5作的优化

• 使用持久化缓存提升构建性能；
• 使用更好的算法和默认值改进长期缓存（long-term caching）；
• 清理内部结构而不引入任何破坏性的变化；
• 引入一些breaking changes，以便尽量长的使用v5版本。

前端人没必要焦虑

• 原生javascript和Node.js是你的基础，linux和数据结构算法、TCP、操做系统这些则你的内功，掌握好这些不管框架它们怎么升级也终究是时代的产物。框架和库升级若是是断崖式升级那么这个库在国内也确定之后会挂掉的，不存在学不动
• 新框架升级的话建议等过段时间，等它稳定&你与公司成员都熟悉文档后升级比较好，特别是大型项目的升级
• 关键点在于，这个项目你以为是否有升级必要

本文分享自微信公众号 - 前端下午茶（qianduanxiawucha）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。