认识

2023年07月12日

柏拉文

越努力，越幸运

一、认识

---

vm._render 负责生成 vnode。其关键代码就一行，执行 render 函数生成 vnode。不过其中加了大量的异常处理代码。

二、细节

---

2.1 vm._render

vm._render 核心是调用 vm.$options.render 函数生成 VNode

2.2 vm.$options.render

template 模版如下:

<div id="app">
    <div> 我是 静态节点 001 </div>
    <div>{{ text }}</div>
    <div :class="vBind"> v-bind 指令</div>
    <div v-if="vIf"> v-if 指令 </div>
    <div v-show="vShow"> v-show 指令 </div>
    <button @click="handleClick">按钮</button>
    <input type="text" v-model="vModel">
    <ul>
        <li v-for="(item,index) in vFor" :key="index">{{ item.value }}</li>
    </ul>
    <MyComponent :componentProp="componentProp"></MyComponent>
</div>

生成的 vm.$options.render 函数如下:

(function anonymous() {
    with (this) {
        return _c('div', {
            attrs: {
                "id": "app"
            }
        }, [_c('div', [_v(" 我是 静态节点 001 ")]), _v(" "), _c('div', [_v(_s(text))]), _v(" "), _c('div', {
            class: vBind
        }, [_v(" v-bind 指令")]), _v(" "), (vIf) ? _c('div', [_v(" v-if 指令 ")]) : _e(), _v(" "), _c('div', {
            directives: [{
                name: "show",
                rawName: "v-show",
                value: (vShow),
                expression: "vShow"
            }]
        }, [_v(" v-show 指令 ")]), _v(" "), _c('button', {
            on: {
                "click": handleClick
            }
        }, [_v("按钮")]), _v(" "), _c('input', {
            directives: [{
                name: "model",
                rawName: "v-model",
                value: (vModel),
                expression: "vModel"
            }],
            attrs: {
                "type": "text"
            },
            domProps: {
                "value": (vModel)
            },
            on: {
                "input": function($event) {
                    if ($event.target.composing)
                        return;
                    vModel = $event.target.value
                }
            }
        }), _v(" "), _c('ul', _l((vFor), function(item, index) {
            return _c('li', {
                key: index
            }, [_v(_s(item.value))])
        }), 0), _v(" "), _c('mycomponent', {
            attrs: {
                "componentprop": componentProp
            }
        })], 1)
    }
}
)