03.vue2源码之render函数的应用

1.什么是render函数

• 可能是通过template解析出来的，也有可能是自己写的

export function renderMixin(Vue){
    Vue.prototype._c = function(){ // createElement _c就是createElement方法
        return createElement(this,...arguments)
    }  
    Vue.prototype._v = function (text) { // createTextElement 用来解析文本
        return createTextElement(this,text)
    }
    Vue.prototype._s = function(val){ // stringify  _s 是用来解析{{}}括号中的元素
        if(typeof val == 'object') return JSON.stringify(val)
        return val;
    }
    //拓展原型上面的_render函数，取用的就是我们通过编辑出来的render函数
    Vue.prototype._render = function(){
       const vm = this;
       let render = vm.$options.render; // 就是我们解析出来的render方法，同时也有可能是用户写的
       let vnode =  render.call(vm);
       return vnode;
    }
}

2.vnode虚拟dom

function vnode(vm, tag, data, key, children, text) {
    return {
        vm,
        tag,
        data,
        key,
        children,
        text,
        // .....
    }
}

3.createElement函数，创建虚拟节点

export function createElement(vm, tag, data = {}, ...children) {
    return vnode(vm, tag, data, data.key, children, undefined);
}

4.createTextElement函数，创建虚拟文本

export function createTextElement(vm, text) {
    return vnode(vm, undefined, undefined, undefined, undefined, text);
}

5.生成最后的vode

{
    "vm": {
        "$options": {},
        "_data": {
            "arr": {
                "name": "zf"
            }
        },
        "$el": {}
    },
    "tag": "div",
    "data": {
        "id": "app",
        "a": "1",
        "style": {
            "color": "red",
            "background": "blue"
        }
    },
    "children": [
        {
            "vm": {
                "$options": {},
                "_data": {
                    "arr": {
                        "name": "zf"
                    }
                },
                "$el": {}
            },
            "text": "hello{"name":"zf"}world"
        }
    ]
}