JS问题整理与思考--Vue三要素之模版解析3(render函数)

按照一个todo-list,分析源码

<div id="app">
    <div>
        <input type="text" v-model="title">
        <button v-on:click="add">submit</button>
    </div>
    <div>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
</div>

var data = {
    title:'',
    list:[]
}
var vm = new Vue({
    el:'#app',
    data:data,
    methods:{
        add:function () {
            this.list.push(this.title)
            this.title = ''
        }
    }
})

在源码中搜code.render,找到位置,打出code.render的值,进行分析

  • 1.首先是winth方法,里面的属性方法都绑定到了vm下。
  • 2.最外层div,_c方法第一个参数是标签,第二个参数是属性,第三个参数是子元素列表。如果没有属性,第二个参数直接不要。
  • 3.换行也转成了一个子元素_v(" ")
  • 4.input方法中,v-model指令:在对应都_c()中,属性是directives,其中on方法进行了绑定,on方法的input属性中, 是将vm.title赋值为$event.target.value。也就是完成了View层向Model层赋值的过程。这里调用的就是defineProperty中的set方法
  • 5.input方法中,domProps调用的是defineProperty中的get方法。
  • 6.button绑定了一个click指向add,也就是之前写在methods中的add方法
  • 7.button有一个子元素_v,就是文本节点submit字符串
  • 8.v-for 方法,解析成了_l方法,方法传入一个list,返回一个由 _c方法组成的元素列表。
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("submit")
                        ]
                    )
                ]
            ),
            _v(" "),
            _c(
                'div',
                [_c(
                    'ul',
                    _l(
                        (list),
                        function(item){
                            return _c('li',[_v(_s(item))])
                        })
                )]
            )
        ])}

随机浏览