Vue的模板本质是字符串,有逻辑,如v-if、v-for,模板最终会转换成JS代码(因为JS能实现逻辑并且JS能渲染HTML页面)
先来看看with怎么用
var data = {
name: 'hhh',
age: 18
}
function test() {
console.log(data.name)
console.log(data.age)
with (data) {
console.log(name)
console.log(age)
}
}
控制台打印如图,说明with指定data作为默认对象
模板转换的render函数:
/* vue模板
<div id='app'>
<p>{{name}}</p>
<input v-model='title'/>
<div v-for='item in list'>
</div>
*/
function render() {
with (this) {
return _c(
'div',
{attrs: {'id': 'app'}},
[
_c('p',[_v(_s(price))]),
_v(' '),
_c('input', {
directives: [{name: 'model', rawName: 'v-model',value: title, expression: 'title'}],
domProps: {value: title},
on: {'input': function ($event) {
if($event.target.composing) return;
title = $event.target.value
}}
}),
_v(' '),
_l(list, function (item) {
return _c('div', [_v(_s(item))])
})
]
)
}
}
等同于
function render() {
return vm._c(
'div',
{attrs: {'id': 'app'}},
[
vm._c('p',[vm._v(vm._s(vm.price))]),
vm._v(' '),
vm._c('input', {
directives: [{name: 'model', rawName: 'v-model',value: vm.title, expression: 'title'}],
domProps: {value: vm.title},
on: {'input': function ($event) {
if($event.target.composing) return;
vm.title = $event.target.value
}}
}),
vm._v(' '),
vm._l(vm.list, function (item) {
return vm._c('div', [vm._v(vm._s(item))])
})
]
)
}
vue实现的流程:
1、解析模板成render函数
2、响应式开始监听
3、首次渲染显示页面,绑定依赖
4、data属性变化,触发rerender