Vue源码解析的理解总结

1.对数据代理的理解

• 在vue中是有数据代理的，Vue的实例对象代理了data对象，Vue的实例对象是代理者，data对象是被代理者。
  数据代理实际上是把Vue中的data对象中的所有的属性通过Object.key()方法进行遍历，然后再通过Object.defineProperty()方法把data对象中的每个属性添加Vue的实例对象上，然后重写每个属性的get方法和set方法

• 实例化Vue的时候，后面的配置对象中的data会在源码进行保存，保存到两个地方，一个是data变量，一个是$data属性，然后进行遍历，再添加到Vue的实例对象中。

2.模板解析的理解

• 什么是容器， 什么是模板
  Vue需要操作页面中的数据，数据发生变化，页面的内容可能会重新的渲染，此时需要找到页面中的某个指定html标签容器，所有的渲染都在当前的html标签内部进行操作。而此时的这个html容器内部所有的节点称之为模板
  如：div的id是app，当前这个div就是容器，div内部所有的节点都是html模板
  模板解析的理解：在Vue中是有模板解析的，所谓的模板解析，就是把页面中html模板里面使用到的表达式，解析为真正的数据的操作，并渲染界面

• 模板解析
  模板解析实际上是在创建Vue实例对象时候，会从MVVM的对象中实例化Compile对象，并传入当前的html容器的id，Compile对象内部会把当前的html容器标签中所有的节点进行遍历，依次添加到之前创建完毕的文档碎片对象中（文档碎片对象可以高效的批量操作DOM节点，在内存中进行节点操作，这就是所谓的虚拟DOM），在内存中（文档碎片对象中）遍历所有的节点，判断当前的节点是标签节点还是文本节点，如果当前的节点内部还有节点，那么会进行递归操作，直到当前的节点中没有任何子集节点位置。

• 标签节点
  如果当前的节点是标签节点，那么还要把当前的节点（标签）中所有的属性全部获取到，并且进行遍历操作，然后判断每个属性是不是Vue的指令，然后判断当前的指令是事件指令还是普通指令

• 事件指令
  如果是事件指令，不仅要获取当前的这个指令，还要把当前的这个指令进行字符串切割操作，获取事件类型，还有该指令中使用的回调函数，内部通过vm对象找到methods对象中对应的这个回调函数，然后通过addEventListener方法为当前的标签节点绑定对应的事件，最后再把当前的节点标签的属性通过removeAttribute()全部移除，最后渲染页面

• 普通指令
  如果是普通指令，调用CompileUtil中相关方法，调用bind方法，然后再调用updater对象中相关的方法把当前节点用到的表达式进行数据的替换，最后渲染页面即可

• 文本节点
  如果当前的节点是文本节点，还要判断当前的节点和插值的正则表达式是否匹配，如果匹配就证明当前的这个文本节点是插值语法，还是要调用CompileUtil中的相关方法，调用bind方法，然后再调用updater对象中的相关方法把当前节点用到的表达式进行数据的替换，最后渲染页面即可

• 简化版的思路
  简化版的大体思路：模板的解析就是实例化Vue对象的时候，内部有个编译对象（Compile）会把模板中的节点全部的遍历的方式放在文档碎片对象中，然后判断节点中的属性是不是指令，再判断是事件指令还是普通指令，最后通过updater对象把表达式的数据进行替换，最后渲染页面。