获得徽章 0
- 做了一个基于React的播放器组件,历时大概一周多一点,目前基本的功能已经做完,可直接 npm 安装使用。后续会逐步完善,比如添加快捷键,一些网络请求错误、找不到视频的提示等。还会做一个官网以做演示,这个开源组件会一直维护的~
代码:github.com
1538 - 昨天聊到了开发 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