解锁 vue3.0 你不得不知道的新东西-技术圈

现在技术发展的太过迅速，一不学习就落后，前端也是如此。前端今年最要关注的就是 Vue3.0 的发布，现在已经进入了RC 阶段，很快就要发布 正式版 了。

性能方面

通过更新 runtime-core 与 runtime-dom ，支持了包括 Fragments、Portals与Suspense w/ async setup()等（似乎有点越来越像 react），支持 Composition API 、Options API 和 typings，配合 Proxy 的引入，极大程度上提高了响应式的能力。

vue2初始化，所有的数据都要走defineProperty；vue3用proxy动态的决定返回什么，做了拦截，初始工作量减少，组件实例化速度的提升还是很明显的。

runtime-core 体积压缩成了约10kb

维护性

代码迁移成 TypeScript （还没学的抓紧啦）

编译器Compiler优化，以下借用尤大大的特性更新图翻译一下：

使用模块化架构
优化 "Block tree"
更激进的 static tree hoisting 功能
支持 Source map
内置标识符前缀（又名 "stripWith"）
内置整齐打印功能

编译优化：template compile to render function阶段可以借助vue-loader在webpack编译阶段离线完成那么耗时更多的patch阶段优化：通过编译阶段对静态模版的分析，编译生成Block Tree,只把绑定数据的动态节点加入嵌套区块数据，每个区块以数组追踪

Composition API

尤大大说以前在2点几的版本中我们使用 mixin 来混入公用方法或者其它内容，这样做混入的对象来源不明，相同功能代码陈列杂乱，修改起来上翻下翻，对开发者造成困扰。

而使用 Composition API，来源明确、相同功能的代码块在一起，修改的时候只需要专注一个地方，更易于维护。

以前我们在代码里都是使用 this 来访问属性，比如 this.foo() this.obj this.$watch，这样 vue 对外暴露的东西太多，引入第三方组件安全问题无法保障，造成困扰。vue3 之后我们将不再使用 this，api 以模块的方式引入，函数的方式使用。

CSS Modules

CSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules，可以作为模拟 scoped CSS 的替代方案。

先在组件中的 <style> 上添加 module 特性：

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

在 <style> 上添加 module 后，一个叫做 $style 的计算属性就会被自动注入组件。

<template>
  <div>
    <p :class="$style.red">
      hello red!
    </p>
  </div>
</template>

因为这是一个计算属性，所以也支持 :class 的对象/数组语法：

<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold
    </p>
  </div>
</template>

也可以通过 JavaScript 访问：

<script>
export default {
  created () {
    console.log(this.$style.red)
  }
}
</script>

SSR 服务端渲染

当开启SSR了之后，如果我们模版中有一些静态标签，这些静态标签会被直接转化成文本。其中的动态绑定依然是一个单独的字符串内嵌进去。这个性能肯定比 React 转成 VDOM 在专为HTML快很多。

DevTools 对 Vue 3 的初始支持

devtool 已得到重大重构，可以更好地将其核心逻辑与支持的不同 Vue 版本分离。该界面还具有使用 Tailwind CSS 实现的新外观。当前，仅支持组件检查-但很快将有更多功能。

Devtools beta 已获得批准，现在可在 Chrome 网上应用店中使用（注意：devtools 需要 vue@^3.0.0-rc.1）

未来工作

我们尚未完成对 RC 的完整 IE11 支持，因此我们将继续努力。

同时，我们的主要重点将转向文档，迁移和兼容性。我们当前的目标是为使用v3启动新项目提供清晰的文档，并帮助库作者升级其软件包以支持 v3。文档团队将根据社区的反馈继续完善迁移指南和 v3 文档。

将不重要的应用程序从 v2 迁移到 v3 可能会慢得多。我们将提供代码模块和工具来帮助进行此类迁移，但是在大多数情况下，这将取决于项目依赖项可以多快地升级以支持 Vue3。这对于评估升级的风险和时间投资是否很重要也很重要。值得-因为将继续支持 Vue 2。我们计划在 3.0 发行后指定一个关注期，以通过兼容性插件将功能反向移植到 v2 中。我们已经在 @vue/composition-api 中看到了这种方法的成功。