还学得动吗，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、操作系统这些则你的内功，掌握好这些无论框架它们怎么升级也终究是时代的产物。框架和库升级如果是断崖式升级那么这个库在国内也肯定以后会挂掉的，不存在学不动

• 新框架升级的话建议等过段时间，等它稳定&你与公司成员都熟悉文档后升级比较好，特别是大型项目的升级

• 关键点在于，这个项目你觉得是否有升级必要