Vue源码解析--实现一个指令解析器 Compile

  结合   Vue源码解析--实现一个指令解析器 Compile 基础上在解析指令渲染视图时添加观察者 并实现Proxy代理  和 input  视图驱动数据

 

compile主要做的事情是解析模板指令，将模板中的data属性替换成data属性对应的值（比如将{ {name}}替换成data.name值），然后初始化渲染页面视图，并且为每个data属性添加一个监听数据的订阅者（new Watcher），一旦数据有变动，收到通知，更新视图。

遍历解析需要替换的根元素el下的HTML标签必然会涉及到多次的DOM节点操作，因此不可避免的会引发页面的重排或重绘，为了提高性能和效率，我们把根元素el下的所有节点转换为文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实dom节点中。

• 注：文档碎片本身也是一个节点，但是当将该节点append进页面时，该节点标签作为根节点不会显示html文档中，其里面的子节点则可以完全显示。

Compile解析模板，将模板内的子元素#text添加进文档碎片节点fragment。

 

MVue.js

const compileUtil = {
    getVal(expr, vm) {
        return expr.split('.').reduce((data, currentVal) => {
            return data[currentVal]
        }, vm.$data)
    },
    setVal(expr, vm, inputVal) { //对于嵌套数据用不了
        return expr.split('.').reduce((data, currentVal) => {
            data[currentVal] = inputVal
        }, vm.$data)
    },
    getContentVal(expr, vm) {
        return expr.replace(/{
   {(.+