VueConf 唐金州

1. 探索Vue的⾼高级应⽤用 Ant Design Vue ⾥里里的那些”⿊黑科技”
2. 唐⾦金金州 搜狗、蚂蚁⾦金金服、⼀一点资讯
3. Ant Design Vue的诞⽣生 遇到的问题及解决⽅方案 现状及未来规划
4. Ant Design Vue的诞⽣生
5. Why
6. How 不不要怂 就是⼲干 站在巨⼈人的肩膀上 UI=fn(state)
7. 脚本转换 属性声明\传递、状态声明 ⽅方法 or 事件 状态异步、同步问题 调试、验证、迭代维护 强约束
8. 遇到的问题及解决⽅方案 模板引擎(JSX template) ⽣生命周期 Ref引⽤用
9. 模板 单⽂文件 template loader createElement JSX cloneElement、Vnode 属性、⾼高阶组件
10. JSX https://github.com/vuejs/babel-plugin-transform-vue-jsx https://zhuanlan.zhihu.com/p/37920151
11. ⽣生命周期 初始阶段 更更新阶段 销毁阶段
12. ⽣生命周期 — 初始阶段 React Vue beforeCreate created componentWillMount beforeMount render render componentDidMount mounted
13. ⽣生命周期 — 更更新阶段 React Vue componentWillReceiveProps watch shouldComponentUpdate componentWillUpdate beforeUpdate render render componentUpdated updated
14. componentWillReceiveProps vs watch A B C componentWillReceiveProps State …. A B C Watch A Watch B Watch C State …. State …. State ….
15. ⽣生命周期 — 更更新阶段 React Vue componentWillReceiveProps watch shouldComponentUpdate 响应式更更新 componentWillUpdate beforeUpdate render render componentUpdated updated
16. ⽣生命周期 — 销毁阶段 React Vue compenentWillUnmount beforeDestroy destroyed
17. Ref引⽤用 String <input ref=“inputRef” /> Callback function <input ref={c=>this.input = c} /> 更更加灵活
18. 指令 bind inserted update componentUpdated unbind
19. https://github.com/vueComponent/vue-ref
21. Ant Design Vue https://github.com/vueComponent/ant-design-vue
22. 现状 52个组件 单测覆盖率86% Star 3000+
23. 特⾊色 受控/⾮非受控组件 基于组件的国际化配置(36种语⾔言包) 共享Antd设计资源(Sketch、Axure等) ⼀一致的API
24. 未来规划 提升单测覆盖率 TypeScript⽀支持 周边⽣生态建设 性能优化
25. 总结 姿(zhi)势(shi)很重要
26. Q&A