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