vue3——源码小计

前言

写的有点迟了,最近尤大开源了vue3的部分源码——vue-next Pre-Alpha版本,大家都开始争先恐后的开始阅读源码,作为菜菜的我,也简单看了下,毕竟水平有限

源码介绍

  • reactivity 目录: 数据相应系统,这是一个单独的系统,可以配合别的框架融入使用,这是比较大改动。
  • runtime-core 目录:和平台无关的运行时代码,主要的实现有虚拟DOM渲染器,组件和一些vue的api,
  • runtime-dom: 针对浏览器的runtime,主要实现处理原生DOM的相关内容
  • compiler-core 目录:平台无关的编辑器,包含一些可扩展的基础功能,也包含一些插件

还有其他的目录就介绍了,可以自己去看看,最后是由一个 vue目录(用于构建完整的代码,主要引入上面的
runtime和compiler)融合起来。

核心改动

之前看过尤大对于vue3改动的宣讲,其中重要的改动点有

1.数据响应式完全重构,由原来的object.defineproperty改成es6 的proxy实现,具体的还是要大家自己好好看源码,这是很重要的一块
2.其余的代码重构,尤大一句‘更小更快’,我想大家就明白了,
3.在虚拟DOM这块也是有不小的改动,本质虽然没变,但是仔细看下vNode和现有的还有一定区别
4.代码改动主要用ts重构了,感觉阅读性比flow稍微好点

源码现状

这个时候展示vue3核心的源码,而且源码量不大,还是建议大家好好读读,尤大此时也在着步完善核心代码,后续会迁移vue2里面的一些api,模板指令之类,具体正式版可能还要2020年中吧,有project计划,大家自己去看啦

如何调试

对于想一点一点调试源码的小伙伴,我这里为大家简单分享下源码如何调试

// 1: 下载vue-next源码
git clone https://github.com/vuejs/vue-next.git
// 2: 安装依赖 
npm install
// 3.找到 rollip.config.js, 在createConfig fucntion增加下句
output.sourcemap = true 
// 4.修改tsconfig.json的配置先项:sourceMap
"soucemap": false

上面所有的修改做完后,你就可以运行npm run dev,就会自动生成vue/dist/vue.global.js.map,然后你在你的***.html 文件中引入vue.global.js,就可以调试了

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注