刚刚在VueConf2019Shanghai看了Vue.js作者的演讲视频，学到了很多。了解了Vue在全球的影响力、活跃的社区和核心开发团队，更重要的是了解了Vue2目前存在的一些问题和Vue3的一些进展。下面我总结一下我从中学到的一些东西。vdom1。性能瓶颈生成新的vdom：更新数据时，虽然vue可以在组件级别定位最小更新粒度，但是在组件级别，仍然需要重新遍历模板生成新的vdom，更新粒度不够小.diff算法：diff的工作量与组件模板的大小正相关。即使模板中只有少量的动态节点，也需要遍历整个组件进行diff。总结：vdom的更新粒度不够灵活，导致在生成新vnode和新旧vnodediff的过程中做了很多无用功，造成性能浪费。2.原因是vdom来自react，而jsx和手写的render函数是完全动态的，过度的灵活导致无法收集优化的信息，也就是无法通过解释js代码来区分静态节点和动态节点。如下图，很难识别：只有div下面的第二个p是动态节点。3、解决ReactTimeSharding当动态节点和数据量很大时，js线程在更新数据时会花费很长时间来执行vdom相关的计算。如果超过16ms，会引起交互或者Animation等。时间分片是将大量的vdom计算分成多个小任务，保证每个小任务在16ms以内执行，不至于阻塞用户交互，避免卡顿。也就是react认识到了vdom的这些缺点，然后从其他层面去弥补缺点带来的问题。Vue缩小更新粒度以最大限度地利用模板信息，将更新粒度从组件缩小到代码块。即从组件模板中提取动态节点和动态代码块。做diff时只需要比较这些动态区域，忽略静态节点，从而提高性能。再比如，如果只有一个节点的class属性是dynamic的，那么就只需要diff这个属性。性能得到进一步提升。总结：vdom更新性能将与动态内容的数量有关，而不是模板的整体大小。function-basedAPI优势一：更好的支持TS类型推导优势二：tree-shaking友好常用的APIvalue，computed，watch等都是使用import从Vue导入的，所以支持tree-shaking。即如果不使用这些API，则不会打包相应的代码，从而减小文件大小。优势三：代码更容易压缩对象属性一般不压缩，但是变量名可以压缩优势四：逻辑复用逻辑复用的解决方案有很多，也有一些缺点：1.mixinsnamespaceConflicts(multiplemixins,变量名不能保证不冲突）数据来源不明确（当使用多个mixin时，不容易区分使用的变量来源）2.高阶组件propsnamespaceconflictsprops数据来源不明clearAdditionalComponentinstanceperformanceconsumption3.scopeslotextracomponentinstance性能消耗和逻辑复用在vue3中会有不同的方式：可以发现和reacthook的逻辑封装形式很相似，就是在responsive中定义responsive变量组件。并将变量变化的逻辑封装起来，最终将变量暴露出来供其他组件使用。视频地址
