Compile实现步骤:
1.根据vue实例el('#app')绑定的元素,对他的子元素进行扫描,解析节点上绑定的对应指令,并替换模板数据,初始化视图.
2.将模板指令对应的节点,绑定对应的更新函数,初始化相应的订阅器.
Compile具体实现:
首先我们先new一个vue实例(MVue)，给它传递对应的配置参数,在dom元素上绑定对应的指令.
赋值相对应的数据.
接下来开始编写MVue.js的内容
创建一个MVue的类,将传进来的参数，分别绑定在对应$el,$data,$options上面。之后在判断如果传进来的的配置项绑定了el指定元素，开始调用实例化Complie将类名与当前MVue这个类传入进去.
首先我们判断一下这个el是节点还是属性,是节点就绑定不是节点就获取。拿到所有的子节点绑定数据，会造成页面的性能问题，会使浏览器重绘，所以我们需要创建一个文档碎片对象（文档碎片（fragment）：是一个轻量级的document对象，可以更新和移动节点。他的语法特征是当你附加一个碎片到节点中时，实际上被添加的是该碎片的子结点（碎片内容），而不是碎片本身。）将所有的节点放入缓存中这样就不会造成页面的性能问题。再添加节点的过程中我们需要判断这个节点是文本节点还是元素节点（若是元素节点，目前我们拿到的只是一级节点，像：<ul><li><li></ul>包含子节点的我们需要递归处理）。
接下来我们分别对元素节点与文本节点进行相对应的处理:
1.元素节点：元素节点获取节点上的属性。拿到属性遍历.判断是区分是元素自身属性例如（src等），还是v-开头的属性，注意这里v-开头的属性将(普通指令和事件指令区分开包括@click这种简写的事件)。定义一个complieUtil方法将对应的指令v-html v-text v-click事件进行了分别的处理 ，以下用v-text示例。
2.文本节点进行处理:主要是处理这种{{}}
实现效果：
我们目前只实现了Complie(解析器)，根据vue实例el('#app')绑定的元素,对他的子元素进行扫描,解析节点上绑定的对应指令,并替换模板数据,初始化视图.
下节：实现一个Observe劫持并监听所有属性：https://www.jianshu.com/p/cd3947702a4b
网友评论