vue中如何解析模板
2020-08-03 本文已影响0人
泡杯感冒灵
模板是什么？
- 对于vue来说，
模板本质就是一个字符串 - vue中的模板是有逻辑的，是动态的，如
v-if,v-for等 - 与html格式很想，但有很大区别；html是静态的，而vue模板是动态的
- 最终还是要转化为html来显示，怎么才能转换为html来显示呢？ 看下边
// 这就是vue中的模板
<div id="app">
<input type="text" v-model="value">
<button @click="handleSubmit">submit</button>
<ul>
<li v-for="(item,index) in lists" :key="index">{{item}}</li>
</ul>
</div>
- 模板最终必须转换为JS代码？
- 因为模板有逻辑(v-if,v-for),必须用JS才能实现(前端中只有JS是图灵完备语言）
- 转换为html渲染页面，必须用JS才能实现渲染
- 因此模板最终要转换为一个JS函数(render函数)，（render函数是指的渲染函数，并不一定就必须是render这个名字）
render函数
- render函数的
with的用法
var obj = {
name:'zhangsan',
age:20,
getAge:function(){
return this.age
}
}
// 不使用with
// function fn(){
// console.log(obj.name) // zhangsan
// console.log(obj.age) // 20
// obj.getAge() //20
// }
// fn()
// 使用with（自己开发过程中，尽量不要用with,会给代码调试带来很高的成本）
function fn1(){
with(obj){
console.log(age) //20
console.log(name) //zhangsan
getAge() //20
}
}
fn1()
下边看一个简单的例子
image.png
上边的模板，生成了下边的render函数体
// 此时 this就是 vm
// _c 就是 this._c,也是 vm._c
// _v就是 this._v,也是 vm._v
// _s就是 this._s,也是 vm._s
// price 就是 this.price ,也是 vm.parice
with(this){
return _c(
'div',
{
attrs:{"id":"app"}
},
[
_c('p',[_v(_s(price))])
]
)
}
由此可以看出
- 模板中，所有信息都包含在了render函数中
- this即vm
- price 就是 this.price ,也是 vm.parice,也是data.price
我们来手写一下，模板对应的render函数
// 以下是手写的用 with的render函数
function render(){
with(this){ // this就是vm
return _c(
'div',
{
attrs:{'id':'app'}
},
[
_c('p',[_v(_s(price))])
]
)
}
}
// 不用with的情况下，就是下边这样
function render1(){
return vm._c(
'div',
{
attrs:{'id':'app'}
},
[
vm._c('p',[vm._v(vm._s(vm.price))])
]
)
}
可以看出，vue在生成render函数时，使用了with可以让代码变得更加简洁
注意：
vm._c 是创建DOM标签的
vm._v 是创建文本节点的
vm_s 就是 toString,因为price是number类型的，先变为字符串再创建文本节点
我们可以页面上打印一下，看下是不是这样的
image.png
还有3个问题
- 从哪里可以看到render函数？
- 复杂一点的例子，render函数是什么样子的？
- v-if,v-for,v-on都是怎么处理的？
我们通过之前的 todo-list例子来分析这3个问题
<body>
<div id="app">
<div>
<input type="text" v-model="title">
<button @click="add">add</button>
</div>
<div>
<ul>
<li v-for="(item,index) in lists" :key="index">{{item}}</li>
</ul>
</div>
</div>
<script>
// data 独立
var data = {
title:'',
lists:[]
}
var vm = new Vue({
el:"#app",
data:data,
methods:{
add:function(){
if(!this.title){
return
}
this.lists.push(this.title)
this.title = ''
}
}
})
</script>
</body>
image.png
上边todo-list项目中的模板的render函数是什么样子的呢？我们可以在我们引入的vue源码中，打印一下render函数，方法就是在源码中搜索code.render,找到后，在code后边打印code.render
image.png
刷新页面，然后可以在控制台看到输出的render函数
image.png
我们格式化一下render函数
with (this) {
return _c(
'div',
{
attrs: { "id": "app" }
},
[
_c(
'div',
[
_c(
'input',
{
directives: [
{
name: "model",
rawName: "v-model",
value: (title),
expression: "title"
}],
attrs: { "type": "text" },
domProps: { "value": (title) },
on: {
"input": function ($event) {
if ($event.target.composing) return;
title = $event.target.value
}
}
}
),
_v(" "), // 换行 创建一个空字符串的文本节点
_c(
'button',
{
on: { "click": add }
},
[
_v("add")
]
)
]
),
_v(" "), // 换行 创建一个空字符串的文本节点
_c(
'div',
[_c(
'ul',
_l(
(lists), function (item, index) { return _c('li', { key: index }, [_v(_s(item))]) }
)
)
]
)
]
)
}
从render函数中，我们可以知道
v-model双向绑定是怎么实现的？
v-on:click怎么实现的？
v-for怎么实现的？
我们关注的重点是 模板和render函数之间的对应关系
我们上边解决了模板中逻辑的问题(v-on,v-for,v-if),还剩下模板生成html的问题。
另外 vm._c是什么，render函数返回什么？
render函数与vdom
- vm._c函数其实就相当于snabbdom的核心函数h函数。
-
，因为h函数返回的是去弄得，所以与之相似的render函数执行之后，返回的也是vnode
image.png
// vm._update接受render函数生成的vnode作为参数。
// 跟上一次的vnode作对比。
// 当然，第一次渲染是没有上一次vnode的，所以当prevVnode不存在的时候。
// 就使用patch的第一种方法，传入容器和vnode参数，并把vnode渲染到容器上
// 第二次渲染的时候，prevVnode已经有了值，我们就可以调用patch的第二种用法
// 传入旧的vnode和新的vnode做对比。然后找出diff，并更新
vm._update(vnode){
const prevVnode = vm._vnode
vm._vnode = vnode
if(!prevVnode){
vm.$el = vm.__patch__(vm.$el,vnode)
}else{
vm.$el = vm.__patch__(prevVnode,vnode)
}
}
// updateComponent函数，通常会在set函数触发时调用。因为只有当数据发生变化时，才会产生新的vnode
function updateComponent(){
// vm._render即上边说的 render函数，会返回一个vnode
vm._update(vm._render())
}
总结
1.模板是什么？
在vue看来，模板本质上就是字符串，模板从语法上来看是有逻辑的(比如v-for,v-if指令)，还可以嵌入JS变量，看起来像html,但不是html.
- 模板必须转换为JS代码
因为模板有逻辑，前端代码中，只有JS有能力处理逻辑；
而模板最终是要转换为HTML来渲染的，而前端代码中，也只有JS有能力来渲染HTML
模板还有JS变量，所以要把模板变成JS的方式来解决
- 模板最终转换成render函数，render函数是什么样子的？(记住三点)
render函数中有with的语法
render函数的样子，其实就是snabbdom的h函数的样子
render函数返回的是vnode
- updateComponent
因为render函数返回的是vnode,而新旧vnode之间，肯定是要做对比的，要执行patch,这个逻辑就是在updateComponent中执行的。分两种情况，第一种情况，首次渲染的时候，不是首次渲染的。
