模板是什么？
模板不是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（没有模板）
