《Vue笔记01: 我与唐金州二三事》
最近我在收看唐金州在极客时间发布的《vue从入门到精通》,颇有收获。
唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant design vue有一些瑕疵,但不得不承认,能以一己之力撸完一个UI框架,是真的强,而他本人对于vue的理解也到很深的境界,于是我特做此视频笔记,较为零散,没什么章法,只是对于一些比重要的或者比较细节的地方做一下记录。
1,Props中的对象和数组类型必须从一个工厂函数获取,比如 List: { typs: Array, default: ()=>[], }
2,给组件动态传递属性时,属性值最好用破折号分开,如 <card :is-visible=“isCardVisible” />,但是在子组件的props中,可以用isVisible获取回来。因为在html中,大小驼峰语法(camelCase)等价于全小写的破折号语法(kebab);
3,原生属性如style,title,class如果传递给了子组件,会默认挂载到子组件的根元素上;
4,父组件向子组件注入方法,实则是注入了方法的指针,子组件在调用的时候还是调用到父组件里面;
5,this.$emit会返回当前组件的vue实例,也就是this指向的堆内存中地址;
6,建议组件以大写字母开头;
7,v-slot:name可以代替slot=“name”, v-slot:name=“(index, record)”可以代替slot=“name” 加上slot-scope=“index, record”;
8,为了减少复杂度,virtual dom的diff算法的基本概念就是”只做同层级节点比较”;
9,如果没有key值,diff算法在做同层级节点比较时,会严格按照时间顺序去对比,因为缺乏身份标识器key,导致甚至连顺序调换这种场景都无法识别,会直接销毁重建;所以它在同层级比较的时候并不知道下一级的关系会是怎样,它只关注当前层级的节点。这看起来是一个坏处,其实更是一个好处,只专注于当前层级的复杂度是最低的。 所以如果有key的话,在新的同层节点生成的时候,就会根据key值去找原同层节点组有没有完全相同,尽可能复用老节点。 所以key值的作用就是为了关闭严格顺序节点对比法则,尽可能复用相同节点,节省删除新建节点的开销。
10,组件的数据来源分为属性(通过props传进来的),以及状态(自身的data)。
11,只有被html用到的属性才会去做依赖收集,到时候才会去做更新通知。
12,如果需要对data的某个对象的某个属性值做监听,可以通过computed把这个属性值的层级提上来,然后在watch中监听computed里面的属性。
13,重置vue实例的data: Object.assign(this.$data, this.$options.data());
14,强制刷新template模板: this.$forceUpdate;
15,watch函数的参数依次为newVal, oldVal;
16,计算属性computed的优势就在于它可以监听多个数据依赖,当然用watch也可以,但是这样我们就要手动为每个数据依赖添加watch函数,显得十分冗余。
17,能用computed的地方就用computed。
18,provide提供响应式数据到子孙组件的最佳方式是直接把this指针赋给一个变量,然后传给子孙组件,子孙组件通过点运算符来取相应属性。
19,说明provide的查找类似于作用域链,从下往祖先组件找,一旦找到就停下了。
20,ref如果挂载到html元素上,会取到一个DOM节点;如果挂载到一个组件上,会取到这个组件的实例对象。
最新文章
- SpellTime
- JDBC的作用及重要接口
- 20145212 《Java程序设计》第6周学习总结
- [LintCode] Continuous Subarray Sum 连续子数组之和
- 【Android测试】【随笔】模拟双指点击
- [转]浅谈Python web框架
- hdu 4027 Can you answer these queries?
- 使用ReflectionTestUtils解决依赖注入
- STL源码学习----lower_bound和upper_bound算法[转]
- Oracle基础 锁
- C#Windows窗体界面设计_01_绘制三角函数_五点作图法
- MyBatis(3.2.3) - Configuring MyBatis using XML, typeHandlers
- python实现词法分析
- Android菜鸟的成长笔记(1)——Android开发环境搭建从入门到精通
- 用Delphi画圆角Panel的方法(使用CreateRoundRectRgn创造区域,SetWindowRgn显示指定区域)
- ReactNative的基本组件的认识
- Java中的公平锁和非公平锁实现详解
- Openresty 进行限流的方法
- CentOS Java C JNI
- UCOSII笔记---信号量、邮箱、消息队列、信号量集、软件定时器