《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节点;如果挂载到一个组件上,会取到这个组件的实例对象。

 

posted @ 2019-11-25 13:58  陌上兮月  阅读(...)  评论(...编辑  收藏