vue的模板解析

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