前端会议室第一期B期地址前端会议室是我和Winter设计的技术方案，每期会请客聊前端技术B站友达的最后一场直播讲解了很多Vue3的新设计。幸运的是，前端会议室的第一场会议邀请了友达，从另一个角度来谈谈vue3。我也为Vue3的新特性准备了一些代码演示。相当于买手秀，我最近会录个视频放B站上。欢迎关注toc体验vue3的三种姿势。组成ApiFragmentTeleport悬念大小。vue-cli官方webpack-previewvite详细步骤#vue-clinpminstall-g@vue/clivuecreate01-vue3-clicd01-vue3-clivueaddvue-nextnpmrunserve#webpackgitclonehttps://github.com/vuejs/vue-next-webpack-preview.git01-vue3-webpackcd01-vue3-webpacknpminstallnpmrundev#vitenpminstall-gcreate-vite-appcreate-vite-app01-vue3-vitecd01-vue3-vitenpm安装npmrundevVite是现代浏览器的开发工具，告别繁琐的开发环境等待。模块支持导入，允许浏览器处理es6导入。好处是当前页面引用多少，编译多少。项目越大，优势越大。Rollup依然是编译用的，但是生产环境其实尽量使用es6import。当你在做懒加载和分包的时候，如果浏览器不支持，动态引入polyfilled->热加载基本在100ms以内。和webpack2S做大项目的体验相比，有很大的差距友达愿意在vite这样的工具上投入精力，这是一件非常好的事情。大家在webpack上折腾了很久vie也给了我一个启发，就是优达的命名艺术。vue和vite都是法式的，风格很浓。以后我会开源Vue3。决定我的下一个开源项目叫cuir.jsPerformanceVue2通过defineProperty初始化所有数据，vue3使用proxy动态判断返回什么并做拦截，减少初始工作量，提高组件实例化是还是很明显，先把代码mount一会儿，看看vue2和vue3的update对比代码。vdom重写了动态和静态模板。v-for拆分出区块，区块内部节点结构不变。我们可以直接维护数组中的动态节点。一个大模板可能嵌套十层，但是如果没有v-if或者v-for，整个模板只需要记录一个数组，包括动态节点。所以vue2也有静态标记优化，但并不完美。Vue3设计了块的概念。update只与动态内容强相关，与静态内容解耦。大多数项目中的静态节点比你想象的要多，比如一些为了布局而存在的div等。这之后我会专门发一篇文章来解释测试组件。官方说更新1.3~2次，测试结果更好。看来裕达还是比较保守的。 {{action}}花了{{time}}毫秒。Vue2{{items.length}}组件
