Vue原理「十三」-- 模板编译 *****

模板是什么？

模板不是html,有指令，插值、JS表达式，能判断、循环
html是标签语言，只有JS才能实现判断、循环（图灵完备的）
因此，模板一定是转换为某种JS代码，即编译模板

模板编译在组件渲染过程中的作用：

• 模板编译：vue template complier将 vue模板 生成 ->render函数()
• 执行render()生成 ->vnode
• vnode可以渲染到浏览器的DOM元素上
• vnode可以在组件修改后触发更新

1、前置知识： with语法

const obj ={a:100,b:200}
console.log(obj.a) //100
console.log(obj.b) //200
console.log(obj.c) //undefined

with(obj){
    console.log(a) //100
    console.log(b) //200
    console.log(c) //报错 c is not defined
}

改变{}内自由变量的查找规则，当做obj的属性来查找
如果找不到匹配的onj属性，就会报错
with慎用，它打破了作用域规则，易读性变差

2. 代码演示

新建文件夹 demo-MBBY，初始化npm环境,生成了package.json文件
npm init -y
下载 vue-template-compiler
npm i vue-template-compiler --save
新建index.js文件
运行 node index.js 将模板转换为js代码

从vue源码中找到缩写函数的含义：

function installRenderHelpers(target) {
    target._o = markOnce
    target._n = toNumber // 数字
    target._s = toString // 字符串
    target._l = renderList // 列表
    target._t = renderSlot
    target._q = looseEqual
    target._i = looseIndexOf
    target._m = renderStatic
    target._f = resolveFilter
    target._k = checkKeyCodes
    target._b = bindObjectProps
    target._v = createTextVNode
    target._e = createEmptyVNode
    target._u = resolveScopedSlots
    target._g = bindObjectListeners
}

vue模板 生成 ->render函数() 代码演示

插值模板编译：

const template=`<p>{{message}}</p>`
with(this){return _c('p',[_v(_s(message))])}
this => const vm = new Vue({...})
createElement => vnode
//编译
const res = compiler.compile(template)
console.log(res.render)

JS表达式模板编译：

const template = `<p>{{flag ? message:'no message found'}}</p>`
with(this){return _c('p',[_v(_s(flag ? message:'no message found'))])}
//编译
const res = compiler.compile(template)
console.log(res.render)
//编译
const res = compiler.compile(template)
console.log(res.render)

属性和动态属性模板编译:

const template = 
    `
    <div id="div1" class="container">   
        <img :src="imgUrl"/>
    </div>
    `
with(this) {
    return _c('div', 
    {staticClass: "container",attrs: {"id": "div1"}},
    [_c('img', { attrs: { "src": imgUrl}})]
    )}
//编译
const res = compiler.compile(template)
console.log(res.render)

条件 模板编译：

const template =
    `
    <div>
        <p v-if="flag === 'a'">A</p>
        <p v-else>B</p>
    </div>
`
with(this) {
    return _c('div', [
        (flag === 'a') ? 
        _c('p', [_v("A")]) :
         _c('p', [_v("B")]
    )])}
//编译
const res = compiler.compile(template)
console.log(res.render)

循环 模板编译：

const template =
 `
    <ul>
        <li v-for="item in list" :key="item.id">{{item.title}}</li>
    </ul>
`
with(this) {
    return _c('ul', _l((list), function (item) {
        return _c('li', {
            key: item.id
        }, [_v(_s(item.title))])
    }), 0)
}
//编译
const res = compiler.compile(template)
console.log(res.render)

事件 模板编译：

const template =`
<button @click="clickHandler">submit</button>
`
with(this) {
    return _c('button', {on: {"click": clickHandler}}, [_v("submit")])
}
//编译
const res = compiler.compile(template)
console.log(res.render)

v-model 模板编译：

const template = `<input type="text" v-model="name">`
with(this) {
    return _c('input', {
        directives: [{
            name: "model",
            rawName: "v-model",
            value: (name),
            expression: "name"
        }],
        attrs: {
            "type": "text"
        } ,
        domProps: {
            "value": (name) //value = this.name
        },
        on: {
            "input": function ($event) {
                if ($event.target.composing) return;
                name = $event.target.value //当前文本款数据绑定在name上
            }
        }
    })
}
//编译
const res = compiler.compile(template)
console.log(res.render)

模板编译总结：

模板编译为rander函数，执行render函数返回vndoe
基于vnode在执行patch和diff ，进行渲染和更新
使用webpack vue -loader，会在开发环境下编译模板 *****

4. vue组件中使用render代替template

复杂情况下，不能用template，可以考虑用render
React一直都用render（没有模板）