唐金州 换个角度看 Vue 组件

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
1. 换个角度看 Vue 组件 唐金州 校宝在线 技术专家
2. 自我介绍
3. 自我介绍
4. 换个角度看 Vue 组件 唐金州 校宝在线 技术专家
5. 自我介绍 Ant Design Vue 作者 极客时间 Vue 专栏讲师 曾就职于 搜狗、蚂蚁金服、一点资讯
6. 目录 1、什么是组件 2、又爱又恨的函数式组件 3、当插槽碰上函数式组件 4、指令的另外一种用途 5、简约而不简单的 Vue
7. 什么是组件
8. 什么是组件
9. 什么是组件
10. 什么是组件 function fn () { ...... ...... ...... ...... 成百上千行... } function fn1 () { ...... } function fn2 () { ...... } function fn () { fn1() fn2() fn1() }
11. 什么是组件 <div> <span>hello vue</span> ...... 成百上千个标签 </div> const custom1 = { render () { return <div>......</div> } } const custom2 = { ...... } <div> <span>hello vue</span> <custom1 /> <custom2 /> <custom1 /> </div>
12. 什么是组件 const custom1 = { render () { return <div>......</div> } } function custom1 (props) { return createElement({ return <div>......</div> }, { prop }) } const custom2 = { ...... } function custom2 () { return ... } <div> <span>hello vue</span> <custom1 /> <custom2 /> <custom1 /> </div> <div> <span>hello vue</span> {{ custom1(props) }} {{ custom2() }} {{ custom1() }} </div>
13. 又爱又恨的函数式组件
14. 函数式组件 1、无状态(没有响应式数据) 2、无实例(没有this上下文)
15. 函数式组件 – 纯展示组件
16. 函数式组件 – 纯展示组件 <template> <div>{{value}}</div> </template> <template functional> <div>{{props.value}}</div> </template>
17. 但是
18. 妙用函数式组件 – 纯展示组件
19. 函数式组件 – 纯展示组件 <template> <div> {{timer}} <Component :value=“value”/> </div> </template> <template> <div> {{timer}} <FunctionalComponent :value=“value” /> </div> </template>
20. 函数式组件 function custom1 (props) { return createElement({ return <div>......</div> }, { prop }) } function custom1 (props) { return <div>......</div> }
21. 函数式组件 <div> <span>hello vue</span> ...... 成百上千个标签 </div> function custom1 (props) { return <div>......</div> } function custom2 () { return ... } <div> <span>hello vue</span> {{ custom1(props) }} {{ custom2() }} {{ custom1() }} </div>
22. 函数式组件 diff div span custom1 custom2 custom1 diff div span div ... div ... div ...
23. 函数式组件 or 组件式函数 是“组件”更是“函数” (props) => VNodes
24. 函数式组件 Vue的Template的图灵完备性 实际上Vue的组件系统具有图灵完备性 使⽤Vue计算阶乘 使⽤Vue计算斐波那契数列 -- winter 计算机之子 2018 vue conf
25. 函数式组件 function fn (value) { return ( <div> ... {value > 1 ? fn(value - 1) : ...} </div> ) }
26. 函数式组件 – 递归组件
27. 函数式组件 – 递归组件
28. 函数式组件 – 递归组件
29. 当插槽碰上函数式组件
30. 插槽 <Com v-bind=“props”> <template v-slot="slotProps"> <div class="item"> {{ slotProps.item.text }} </div> </template> </Com> <slot v-bind=“slotProps”></slot>
31. 插槽 <Com v-bind=“props”> </Com> props.getItem = (slotProps) => <div class="item"> { slotProps.item.text } </div> {{ getItem(slotProps) }}
32. 插槽 <template> <div> <VNodes :vnodes=“getItem(slotProps)”/> </div> </template> { } name: ’VNodes’, functional: true, render: (h, ctx) => ctx.props.vnodes
33. 变量
34. 变量优化 临时变量 计算属性
35. 作用域插槽 <Com v-bind=“prop”> <template v-slot="slotProps"> <div class="item"> {{ slotProps.item.text }} </div> </template> </Com> function com (prop, slot) { return slot(slotProps) }
36. 妙用函数式组件 – 临时变量
37. 妙用函数式组件 – 临时变量
38. 指令的另外一种用途 v-ref v-decorator
39. ref
40. v-ref
41. 组件通信 – 访问实例 A B E C F D G H I
42. 组件通信 – 访问实例 A B inject v-ref=“setRef” E provide setRef(ref) { this.refE = ref } C F inject D G H I inject
43. v-decorator Ant Design Vue form 表单进化史 1、 getFieldDecorator(‘userName’)(<a-input />) 2、<a-form-control name=“userName”> <a-input /> </ a-form-control > 3、<a-input v-decorator=“[‘userName’]” />
44. v-decorator Vue.directive('decorator', {}); <a-form-item> <a-input v-decorator=“[‘userName’]” /> </a-form-item>
45. Form 表单 data + rule form
46. Form 表单 data + rule form other
47. Form 表单 cloneData + rule data data = cloneData cloneData data submit form other
48. Form 表单 data + rule data = form.getFieldsValue() 初始值 data submit form other
49. 但是
50. Form 表单 即将支持双向绑定的表单收集校验 敬请期待!!!
51. 总 结 – 简约而不简单的 Vue 1、Vue 简单 ? 2、Vue 灵活度低 ? 3、不要被固有的概念,限制了我们的思维