Vue源码解析(1)

Dep和watcher的关系

什么关系？

多对多

如何建立的？

data中徐行的get()中建立关系，dep.subs watcher.depIds

什么时候建立？

初始化，解析模板中的表达式时 ,new Watcher对象时建立；

Array.apply(null, { length: 20 }).map(function () { return createElement('p', 'hi') })

apply函数不是接受数组的吗？为什么可以接受对象；带着好奇我查了下文档，原来从es5开始早已规定，apply接受数组或者类数组，就是说只要有一个 length 属性和(0..length-1)范围的整数属性。例如现在可以使用 NodeList 或一个自己定义的类似 {'length': 2, '0': 'eat', '1': 'bananas'} 形式的对象。

那为什么要用apply，不直接new Array(5)?我试了下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iGHgrXCB-1593681635965)(C:\Users\18070121\Desktop\微信截图_20200701151104.png)]

Array(5).map返回还是{length: 5}的空数组对象，而Array.apply(null,{length:4})就能返回四个已经初始化的数组；这也就是为什么可以map遍历的原因； 那么既然apply可以，那跟他同样功能的call函数可不可以呢？ 下面是我试的结果；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BaqT4OvP-1593681635968)(C:\Users\18070121\Desktop\微信截图_20200701151831.png)]

…(img-BaqT4OvP-1593681635968)]

结果是不可以的，Array.call(null,{length:4})生成了一个下标为0，值为{length:4}的空数组，跟new Array(4) 结果一样；由此可见只有apply的{length:4}的传参方式才会创建一个初始化下标的数组；如果你非要用call，那就只能这样啦 Array.call(null,undefined,undefined,undefined);