阅读 7203

Vue3.0来了,源码解读预热

前言

2020年09月18日,晚上11点,Vue团队发布官宣,Vue.js 3.0发布,还起了个代号"One Piece"

Vue3发布的前两天,博客、朋友圈、公众号基本都是这么一条新闻,react16发布的时候也没见这么火热,可见大家对Vue的关注程度越来越高,Vue竟然有130万的使用者,这个用户体量还是非常惊人的,作为国内首屈一指的前端框架,尤大大真的是功不可没。

Vue3来了,虽然很兴奋,但是内心很mmp,表示学不动了,然而还是把源码立马下载了下来,去瞅了下官方文档,真的是在前往react的路上越走越远。传送门:

更新

Vue3.0这次更新,主要是对config API改为了Composition API,以及对于TypeScript的支持;

Vue3.0在2的基础上,对内部的一些方法进行了对外暴露,使Vuer可以更加开放的使用Vue的API;

之前只是暴露了一个Vue,只能通过new Vue的方式进行创建,而现在创建应用使用的是createApp;;现在Vue已经不是一个function了,而是一个Object;

Vue3的内部结构已经被重写为一组解耦的module。新的体系结构提供了更好的可维护性,并允许最终用户通过tree-shaking来减少运行时体积大小的一半,减小了代码体积,相应的也会更快,这也是其中性能提升的一部分。

要阅读源码的同学请注意,vue3源码的package.jon

"dev": "node scripts/dev.js",
复制代码

改为

"dev": "node scripts/dev.js --sourcemap --environment TARGET:web-full-dev",
复制代码

然后控制台运行npm run dev,就可以在浏览器看到源码了:

Vue3源码目录

Vue3的源码目录包含三个:

  • packages:源码主目录,里面存放的是Vue的核心源码
  • scripts:还是和之前一样,存放的是Vue的脚本文件,用来进行编译打包等。
  • test-tds:测试ts的文件

Vue3源码packages分析

Vue3的核心源码是存在packages里面的,主入口是在vue目录。

  • compiler-core:编译核心源码
  • compiler-dom:与dom部分编译相关联的源码
  • compiler-sfc:单文件编译部分的源码
  • compiler-ssr:服务端渲染,编译相关的源码
  • reactivity:Vue核心代理Proxy相关的代码,响应式部分
  • runtime-core:运行时相关的核心源码,包含生命周期、vnode、watch等等api
  • runtime-dom:运行时与dom相关的核心源码,包含createApp等的源码
  • runtime-test:vue内部测试所使用的代码
  • server-renderer:服务端渲染代码
  • shared:Vue工具库,通用方法
  • size-check:vue内部最简单的一个vue应用,用来测试tree-shaking后的代码体积大小
  • template-explorer:Vue内部使用的编译文件浏览工具
  • vue:Vue的主入口文件

结语

关于Vue3更新了什么,就不多说了,前两天网上全是这样的文章,今天主要是为自己开了个头,接下来会陆续跟进Vue3的源码解读。

文章分类
前端
文章标签