获得徽章 0
- 2020 年要结束了，今年收获了很多，很开心，今年在技术上的对外产出主要是做了一门 Vue.js 3.0 的源码解析课程，公众号也慢慢做起来了。
快要放假了，祝大家新年快乐，顺便给大家推荐我近期在公众号做的系列原创技术文章，假期没事的时候可以看看，希望能给大家带来一点帮助。
喜欢就关注一下哈，我会输出更多的技术文章，你的关注就是我持续写作的动力
展开赞过
评论3 - 2020 年要结束了，今年收获了很多，很开心，今年在技术上的对外产出主要是做了一门 Vue.js 3.0 的源码解析课程，公众号也慢慢做起来了。
快要放假了，祝大家新年快乐，顺便给大家推荐我近期在公众号做的系列原创技术文章，假期没事的时候可以看看，希望能给大家带来一点帮助：
mp.weixin.qq.com
喜欢就关注一下哈，我会输出更多的技术文章，你的关注就是我持续写作的动力 展开等人赞过 111 - 我是开源库 better-scroll 的作者 -- 黄轶，你有什么问题要问我？
大家好，我是黄轶，目前就职于 Zoom 公司担任前端架构师，曾就职于滴滴和百度，毕业于北京科技大学。我是开源库 better-scroll 的作者，也是慕课网的老师，相信有很多同学通过我的课程学习掌握了 Vue.js 这门技术。
我在 2012 年毕业加入百度后，才开始正式接触 Web 前端，上学期间主要接触的是 .net，写过几个小作品到 CSDN，我非常庆幸转行，如果毕业还坚持做 .net 可能早就凉了。在百度的 3 年工作经历，我写过页面，写过网页游戏、写过chrome插件、写过组件、写过框架。
15 年 7 月份我加入滴滴，成为当时公共部门第一个前端。在滴滴的 3 年，我造过很多公司级别轮子（登录 sdk、jsbridge-sdk，地图 sdk 等），作为技术负责人主导过 2 次滴滴 WebApp 重构，负责架构设计和实现。在 16 年初把 Vue.js 引入滴滴的生产环境项目中，并在 WebApp 5.0 的重构项目得到全面应用。在滴滴的后期我负责 WebApp 架构组，开源了 cube-ui，折腾了多个技术方向（自动化测试框架、小程序框架）。
18 年 9 月，为追求喜欢的生活方式，我离开生活 12 年的帝都，回到家乡合肥，加入了目前的公司 Zoom。结合 Zoom Web 产品的特点我设计了一整套前后端分离的架构设计方案，包括了项目初始化、本地开发、联调、测试、上线等各个环节，并在多个项目中落地。同时，我们基于 element-ui fork 出 zoom-ui，并致力解决和优化 aceesibility 问题，另外除了基础组件之外我们针对一些业务场景设计了业务组件。
我在工作外也不忘发挥余热，从做兼职，到写书，做课程。它们不仅带来额外收入，也促进了我能力的提升，比如 Angular.js 的学习就是兼职中边做边学的；通过写书和做课程，我把 Vue.js 的源码翻烂了。我的理念是挣外快可以，但同时一定要提升自己，否则就是浪费时间。由于篇幅原因，完整介绍见图2
我在 2019.06.18 - 2019.06.20 期间挑选有趣、有典型性、有意义的问题回答，你们可以问我 「前端开发」、「Vue.js」、「源码」、「前端架构」、「性能优化」、「个人成长」等相关问题。展开等人赞过 366337 - 最近在写 Vue-cli 脚手架插件的时候遇到一个场景，如果用户初始化项目的时候引入了 Vue-Router 和 Vuex，我需要把文件中的 import Vue from 'vue' 替换成 const Vue = window.Vue（这么做是我们这边项目的特殊场景所致），那么在 eslint 规范中，import 语句是放在文件顶部，所以简单的字符串替换是不可以的，你需要把这行代码插入到最后一个 import 语句的后面。因此我用了 recast 这个库先把代码生成 AST 树，再去修改 AST 树，最后再生成 code。
这里有个问题，在处理 router.js 文件的时候，遇到了 import('xxx') 这种 webpack 支持的动态 import 语法，这个在转换成 AST 树的时候会报错，那么怎么办呢？我已经用一种奇技淫巧解决了，问题留给你们做个小小的思考😀展开等人赞过 415 - 昨天聊到了开发 Vue cli 插件的问题，有朋友提醒我可以通过 npm link 方便调试 npm 包，今天来公司尝试一下，亲测可用，非常方便（新技能 get）
先去到插件开发的目录 vue-cli-plugin-xxx，执行 npm link
再通过 vue create example 创建一个测试项目，进入这个项目后执行 npm link vue-cli-plugin-xxx（包名）
由于 Vue cli 在 invoke 插件的時候自己会去 findPlugin 检测插件是否安装，这里我们先在项目的 package.json 中的 devDependencies 手动添加这个 vue-cli-plugin-xxx 依赖，然后再去项目目录下执行 vue invoke vue-cli-plugin-xxx 就可以完成调试了。
另外 Vue cli 3.1 以上版本是支持私服的，如果你编写的插件添加的依赖是放在 npm 私服上的，执行 vue invoke 命令的时候加上 --regisrty <url> 即可。展开等人赞过 评论21 - 来 Zoom 这边也有快 3 个月了，推行了一套能适应现有老架构方式下的前后端分离的开发方案，并且有个重构的试点项目已经快开发完了。
在这期间除了把我们的内部 Vue 组件库搞起来外，还搭建了 npm 私服，编写了 i18n、数据 mock 等 webpack 插件，线下部署脚本等。今天也基于重构项目的经验，编写了一个 Vue cli 3 的插件作为项目脚手架。
这中间踩了很多坑，也解决了很多有意思的问题。比如开发 Vue cli 插件，调试插件是一个头疼的问题，我目前是先通过 vue create 创建一个新项目，然后把插件的代码拷贝到项目的 node_modules 目录下，然后通过 vue inovke 的方式调试，不知道大家有没有更好的方案分享下呀~
在 Zoom 的经验还是蛮有意思的，面临的问题可能是很多有技术历史债的大公司共同面临的问题，在这种环境下做前端架构是一个蛮有挑战的事情，还要多思考公司看重什么，你的重构方案能给大家带来哪些收益，又会增加哪些成本。这部分内容以后有机会会单独写篇文章分享~展开等人赞过 1925 - 今天看了一篇 Vue.js 3.0 新特性的译文，文中提到 “在当前的 Vue 版本中，当父组件重新渲染时，其子组件也必须重新渲染。 使用 Vue 3 ，可以单独重新渲染父组件和子组件”。
这句话是不严谨的，非常容易产生误导，我觉得有必要说明一下： 2.0 组件的重新渲染就是组件粒度的，除非修改的数据是子组件的 props，才会触发子组件的重新渲染。
那么尤大的 PPT 中提到的场景是 Optimized Slots Generation。在 Vue.js 2.0 中，当父组件数据更新的时候执行会触发重新渲染，最终执行父组件的 patch，在 patch 过程中，遇到组件 vnode，会执行新旧 vnode 的 prepatch，这个过程又会执行 updateChildComponent, 这个时候如果这个子组件 vnode 如果有孩子（插槽内容）的时候，会重新 resolve slot 并执行一次子组件的 forceUpdate()，这种情况下才会触发子组件的重新渲染。而尤大所说的优化应该就是特指插槽的场景。
如果说任何场景下父组件的重新渲染就会触发子组件的数据渲染，那 Vue 的性能得有多差，记住 Vue 2.0 的重新渲染就是组件粒度的。
另外关于插槽的源码实现我的《Vue.js 技术揭秘》电子书有分析，关于插槽数据的更新实现我的源码课程视频里也有提到。所以你对源码感兴趣，可以戳下方电子书链接，电子书是开源免费的。视频课程是收费的，你可以按需购买学习，但请务必去官方购买正版喔~展开等人赞过 755 - Vue.js 3.0 is coming!
比较期待性能方面的优化，以及TS 和多 Package 的源码维护方式，持续关注~等人赞过 评论29
mp.weixin.qq.com