主要架构改进和新功能APP

这几天，陆续学习了解了关于vue-next（vue3.0）(https://github.com/vuejs/vue-next)的一些新特性，尤其是新的compositionapi的用法。这套新的api中重要、核心的部分，恐怕就是实现响应式功能的这一块了。而且，这套响应式api不仅可以在vue-next环境下使用，也可以独立使用。

笔者在阅读源码看到， vue-next已全部由 typescript构建，看来 ts必学技能。接下来带你了解vue-next。

vue-next计划并已实现的主要架构改进和新功能：

使用模块化架构

优化 "block tree"

更激进的 static tree hoisting 功能

支持 source map

内置标识符前缀（又名 "stripwith"）

内置整齐打印（pretty-printing）功能

移除 source map 和标识符前缀功能后，使用 brotli 压缩的浏览器版本精简了大约 10kb

运行时（runtime）的更新主要体现在以下几个方面：

速度显著提升

同时支持 composition api 和 options api，以及 typings

基于 proxy 实现的数据变更检测

支持 fragments

支持 portals

支持 suspense w/ async setup()

后，还有一些 2.x 的功能尚未移植过来，如下：

sfc compiler

server-side rendering （服务端渲染ssr）

==目前不支持ie11==

vue-next（vue 3.0） 的源码虽然发布了，但是预计早也需要等到 2020 年季度才有可能发布 3.0正式版。

目录剖析

代码仓库中有个 packages 目录，里面主要是 vue-next 的相关源码功能实现，具体内容如下所示。

├── packages

│   ├── compiler-core # 所有平台的编译器

│   ├── compiler-dom # 针对浏览器而写的编译器

│   ├── reactivity # 数据响应式系统

│   ├── runtime-core # 虚拟 dom 渲染器 ，vue 组件和 vue的各种api

│   ├── runtime-dom # 针对浏览器的 runtime。其功能包括处理原生 domapi、dom 事件和 dom 属性等。

│   ├── runtime-test # 专门为测试写的runtime

│   ├── server-renderer # 用于ssr

│   ├── shared # 帮助方法

│   ├── template-explorer

│   └── vue # 构建vue runtime + compiler

compiler-core：平台无关的编译器，它既包含可扩展的基础功能，也包含所有平台无关的插件。暴露了 ast 和basecompile 相关的 api，它能把一个字符串变成一棵 ast

compiler-dom：基于compiler-core封装针对浏览器的compiler

runtime-core：与平台无关的运行时环境。支持实现的功能有虚拟 dom 渲染器、vue 组件和 vue 的各种api，可以用来自定义 renderer ，vue2中也有

runtime-dom：针对浏览器的 runtime。其功能包括处理原生 dom api、dom 事件和 dom 属性等，暴露了重要的render和createapp方法

const { render, createapp } = createrenderer<node,element>({

  patchprop,

  ...nodeops

})

export { render, createapp }

runtime-test：一个专门为了测试而写的轻量级runtime。比如对外暴露了rendertostring方法，在此感慨和react越来越像了

server-renderer：用于 ssr，尚未实现。

shared：没有暴露任何 api，主要包含了一些平台无关的内部帮助方法。

vue：「完整」版本，引用了上面提到的 runtime 和 compiler目录。入口文件代码如下

'use strict'

if (process.env.node_env === 'production') {

  module.exports = require('./dist/vue.cjs.prod.js')

} else {

  module.exports = require('./dist/vue.cjs.js')

}