vue源码分析-数据代理和模板解析之大括号

分析vue源码（作为一个mvvm框架的基本实现原理 ）
的要从 数据代理 模板解析 数据绑定
一：数据代理：
1：vue数据代理，通过vm对象来代理data对象中所有属性的操作
2：好处是：更方便的操作data中的数据
3：基本实现流程：

1通过Object.defineProerty()给vm添加与data对象的属性对应的属性描述
2所有添加的属性都包含getter/setter
3getter,setter内部去操作data中对应的属性数据，set是监视属性变化的

接下来要研究的是怎么实现代理这个过程的，接下来分析mvvm里面的代码了
1：分析我这个断点打在哪，我才能看见整个数据代理的过程
（打断点要打在一个语句上—）
2：怎么看这个数据（第一个跳过当前断点，去下一个断点；第二个，把这一行执行完毕，再去执行下一行；第三个 进入到构造函数中，我真正想要的）
3：进到函数中：分析

（1）this是谁 就是我满们new出来的那个mvvm对象，让mvvm里的options属性接收对象里面的属性 如果没传就是空
（2）把options里面拿出data对象 ，存到_data里面去，并且找了个变量存一下
（3）又找一个me存一下vue实例

//数据代理实现

（1）遍历data里面所有的属性，
对所有属性进行数据代理
在打一个断点进入这个里面分析怎么进行的数据代理（运行过程中打断点）

进入：

发现就是通过数据描述符进行添加（Object.definePropery)
里面的key就是我们的属性名 接下来就是用实例.属性名就会调用get和set了

二：模板解析
基本流程：

1将el的所有子节点取出，添加到一个新建的文档fragment中
2对fragment中所有层次的子节点递归进行编译分析处理
（1）对大括号表达式文本节点进行解析
对元素节点的指令属性进行解析
事件指令解析
一般指令解析
3将解析后的fragment 添加到el中显示

34 var text =node.textContent
（一）：研究双大括号的解析

{{name}}

1打断点：打在编译的这个语句上--在vm身上绑定一个complie属性，函数里面都有构造所以可以new Complie 传入el有就传没有就传body
2现在进去Complie里面看
（1）在complie身上加vm属性-存放vm对象
（2）又存放了一个el属性，将el对应的元素保存在compilte对象当中，先判断el是否为元素节点，不是通过doucument.querySelector(el)去找到el 存上去
（3） 已经有el属性了（其实就是div）
通过node2Fragment把$el里面的节点全部转移到fragment-----利用必备知识点
(4)比较复杂，负责初始化显示的内容 this.init();
解析模板内容就是fragment里面的东西 研究他打断点 进去
调用一个complieElement的方法--这个方法就是编译el里面的所有字节点 -
--打断点再进去-再看这个方法
complieElement的方法：
1第一步是把el里面的最外层字节点取出来，放到变量之中
在把this （complie实例）存放到me变量之中
2第二步是遍历每一个字节点 --34再打一个断点
然后用node.textContent获取换行节点 接着往下走
正则对象-匹配双大括号表达式的 接着走
判断当前节点是否为元素节点 在下一步
是不是文本节点，符不符合正则表达式 接着走
判断 如果还有子节点 并且子节点不是零 就进行递归（现在是空格所以进不去，再往下走，就返回34le （第二次循环了）这样就到p标签了）
这样就都可进去了
到44行 问当前p这个节点有没有字节点（有的就是{{name}}）继续往下走又是递归了
这时返回34行就是双大括号了 -正则中的（）是进行子匹配的--取name

{{name}}进行走 不是元素节点 走 是文本节点吗满足双大括号的方式吗 都是不走 --------------之前的空格和p都没进入到41行方法中现在进去了--compile Text进行编译文本节点 RegExp.$1 里面放的就是子匹配匹配到的name node就是text节点
{
compile Text是一个方法 也可以进去（第三个按钮）分析

但是此处省略10000字。。。。。看代码

作用就是编译文本节点--里面有指令处理去处理，还有很多更新方法 都可以点进去查看
}

到这步就获取完{{name值}}
往下走 又到34了 就到p后面的换行了节点了