Vue原理（1）获取元素编译

Vue核心Object.defineProperty()，自己实现mvvm——第一步 获取元素并编译到页面中

假设我们将以下内容转化为响应

 <div id="app">
        <input type="text" v-model="author.name">
        <div>{{author.name}}</div>
        <div>{{author.age}}</div>
        <ul>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                author: {
                    name: "wangmoumou",
                    age:24
                }
            },
            methods:{

            },
            computed:{

            }
        })
    </script>

创建自己的main.js并且引入
目录结构如下

1593480686(1).png

首先写一个Vue的类，接收参数,判断el根元素是否存在，如果存在，则编译模板

// 基类,接收参数
class Vue{
   constructor(options) {
        this.$el = options.el;
        this.$data = options.data;
        //判断根元素是否存在，存在编译模板
        if (this.$el) {
            new Compiler(this.$el, this);//编译
        }
    }
}

写编译方法,编译分为元素和文本，元素判断v-开头，文本判断 {{}}

//编译
class Compiler {
    constructor(el, vm) {
        //判断el是否是一个元素，如果不是元素，获取元素
        this.el = this.isElementNode(el) ? el : document.querySelector(el)
        //此时拿到当前的模板，替换，替换的时候放在内存中，在内存中替换之后，添加到页面中，如果拿到一次替换一次，会不断触发浏览器回流
        //放到内存中
        this.vm = vm
        let fragment = this.node2fragment(this.el)
        //把节点内容替换
        //用数据编译模板,用 vm中的data
        this.compile(fragment)
        //把节点内容添加到页面中
        this.el.appendChild(fragment)

    }
    isElementNode(node) { //判断是否是元素的方法

        return node.nodeType === 1;
    }
    //把节点移动到内存中
    node2fragment(node) {
        let fragement = document.createDocumentFragment() //创建文档碎片
        let firstChild
        while (firstChild = node.firstChild) {
            fragement.appendChild(firstChild)
        }
        return fragement
    }
    // 核心编译方法
    compile(node) {
        let childNodes = node.childNodes
        //拿到子节点之后判断是否是元素，伪数组转数组
        let childNodesArr = [...childNodes]
        childNodesArr.forEach(child => {
            if (this.isElementNode(child)) {
                this.compileElement(child) //编译元素的，v-开头
                //因为只拿到了第一次，所以需要把自己传进去，判断子节点
                this.compile(child) //递归
            } else {
                this.compileText(child) //编译文本的 ，{{}}
            }
        })
    }
    // 编译元素
    compileElement(node) {
        let attributes = node.attributes //类数组
        let attributesArr = [...attributes] //转数组
        attributesArr.forEach(attr => { //attr 格式 name=value 找到元素
            let { name, value: expr } = attr
            if (this.isDirective(name)) {
                let [, directiveName] = name.split('-')
                CompilerUtil[directiveName](node, expr, this.vm) //调用工具类 指令有很多，所以写一个工具类，用来处理不同指令
            }
        })
    }
    // 编译文本
    compileText(node) {
        let content = node.textContent
        if (/\{\{(.+?)\}\}/.test(content)) { //找到文本 {{author.name}}等
            CompilerUtil['text'](node,content,this.vm)
        }
    }
    //判断是不是v-开头的方法
    isDirective(name) {
        return name.startsWith('v-')
    }
}

指令有很多，所以单独写一个编译工具，用来处理v-model,v-html等指令,暂时数据是对象。

//编译工具
CompilerUtil = {
    getValue(vm, expr) { //根据表达式获取数据
        return expr.split('.').reduce((data, current) => {
            return data[current]
        }, vm.$data)
    },
    model(node, expr, vm) {
        let value = this.getValue(vm, expr)
        let fn = this.updater['modelUpdater']
        fn(node, value)
    },
    html() {

    },
    text(node,expr,vm){
        let fn = this.updater['textUpdater']
        let content = expr.replace(/\{\{(.+?)\}\}/g,(...args)=>{
            return this.getValue(vm,args[1])
        })
        fn(node,content)
    },
    updater: {
        //把数据插入节点
        modelUpdater(node, value) {
            node.value = value
        },
        htmlUpdater() {

        },
        textUpdater(node,value){
            node.textContent = value
        }
    }
}

git地址：https://github.com/wangxunahe1996/Vue-mvvm