Mars框架分享 vueconf

前端狗

2019/06/12 发布于 技术 分类

Vue  vueconf 

文字内容
1. Vue 驱动的 ⼩小程序 + H5 同构开发框架 张⽂文韬 VueConf 上海海 2019.06
2. About me 张⽂文韬 前端⼯工程师 @百度-前端技术部 搜索垂类产品横向技术团队 负责 Vue 驱动的多端开发框架 Mars Github @allen-zh
3. Why [another] wheel? 我们希望这样的框架…… wheels.some(wheel => wheel.hasAllFeatures([ ⽀支持⼩小程序⾃自定义组件, ⽀支持 H5 同构并提供完整适配开发⽅方案, ⽀支持尽量量多的 Vue 特性, ⽀支持⼩小程序⾃自定义组件, 完美适配 H5 并提供完整的 ⽀支持尽量量多的 Vue 特性, H5 ⽅方案, 极致性能优化 ]) // => false
4. Why [another] wheel? 我们希望这样的框架…… wheels.filter(wheel => wheel.hasAllFeatures([ ⽀支持 H5 同构并提供完整适配开发⽅方案, ⽀支持⼩小程序⾃自定义组件, ⽀支持尽量量多的 Vue 特性, 极致性能优化 ]) // => [‘Mars’]
5. Mars Vue 驱动 ⼀一处开发,多端运⾏行行 已⽀支持 百度智能⼩小程序、微信⼩小程序、H5 (PWA) Github https://github.com/max-team/Mars ⽂文档 https://max-team.github.io/Mars/
6. Mars H5 同构效果 SHOWCASE:百度家装【装馨家】
7. How Vue 单⽂文件组件规范 标准⽣生命周期规范 基础组件、API 规范 ⼩小程序运⾏行行时适配 实现 Vue 驱动 同构 App 框架、路路由 同构组件、API、钩⼦子函数 标准 Vue 项⽬目 体验优化 (PWA等⽀支持)
8. Vue drive 实例例绑定 事件代理理 数据同步 ⽣生命周期映射
9. Vue drive with … compiler core/platform modules 轻量量级定制 通过运⾏行行时 module 结合 修改总⾏行行数 < 50 ⾏行行 VNode 在⼩小程序⽀支持过滤器器 通过 modules 编译接⼝口 扩展 render 函数 directives 通过 v-animation 指令在 H5 实现 createAnimation
10. Vue drive core 2 Lines 修改 inBrowser 判断 保留留 patch
11. Vue drive platform 30 Lines 移除 DOM 相关模块 修改 node-ops 期待 Vue 3.0 createRenderer() API
12. Vue drive 案例例: 数据变更更增量量更更新 Vue core 10 Lines observer 增加更更新标记 实现增量量更更新优化性能
13. Vue drive 案例例: 数据变更更增量量更更新 运⾏行行时 运⾏行行时 找到更更新了了的数据 计算 keyPath 增量量数据更更新
14. Vue drive 案例例: 实现过滤器器 设计 为⼩小程序过滤器器设计的数据结构 +
15. Vue drive 案例例: 实现过滤器器 compiler
16. Vue drive 案例例: 实现过滤器器 运⾏行行时 从 Vue 实例例上获取带有过滤器器的 VNode 节点以及结构化数据
17. Vue drive 案例例: 实现过滤器器 运⾏行行时 Vue runtime modules 通过 运⾏行行时 modules 将 VNode 上的过滤器器 值与实例例关联,⽅方便便从 实例例上获取过滤器器值
18. Vue drive 案例例: 实现过滤器器 compiler 通过 vue-template-compiler 提供的 transformNode、genData 接⼝口扩展 render 函数,实现在 VNode 上添加的属性和数据
19. Vue drive 案例例: directives createAnimation API 会返回⼀一 个 animation 动画描述对象 通过 v-animation 指令 实现 在 H5 上执⾏行行这个 DOM 动画
20. 快速开始
21. Thanks : ) Mars - Vue 驱动的多端开发框架 Github https://github.com/max-team/Mars ⽂文档 https://max-team.github.io/Mars/