模板编译

模板

模板不是 html，有指令、插值、JS 表达式，能实现判断、循环
因此，模板一定是转换为某种 JS 代码，即编译模板

with

// 1、改变 {} 内自由变量的查找规则，当做 obj 属性来查找
// 2、如果找不到匹配的 obj 属性，就会报错
// 3、with 要慎用，它打破了作用域规则，易读性变差
const obj = {a:100, b:200}
with(obj){
    console.log(a) // 100
    console.log(b) // 200
    console.log(c) // 报错
}
console.log(obj.c) // undefined

模板编译

<div id="div1" class="container">
    <img :src="url" />
    <p>a</p>
</div>

// 编译后，返回一个虚拟DOM
with(this){ // vm 实例
    return createElement(
        'div',
        {staticClass: "container", attrs: {"id": "div1"}},
        [ 
            createElement('img', {attrs: {"src": url}}), // 用 with 后，就变成了 this.url
            createElement('p', [createTextNode(toString("a"))])
        ]
    )
}

vue 组件中使用 render 代替 template 就和上面的类似了

Vue.component('test', {
    // template: `xxx`,
    render: function(createElement){
        return createElement(/** 和上面传的基本一样，除了url要变成this.url **/ )
    }
})