vue中如何解析模板

模板是什么？

对于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中执行的。分两种情况，第一种情况，首次渲染的时候，不是首次渲染的。