模板是什么?

  • 对于 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()

下边看一个简单的例子

在这里插入图片描述
上边的模板,生成了下边的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 类型的,先变为字符串再创建文本节点

我们可以页面上打印一下,看下是不是这样的

在这里插入图片描述

还有 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>

在这里插入图片描述
上边 todo-list 项目中的模板的 render 函数是什么样子的呢?我们可以在我们引入的 vue 源码中,打印一下 render 函数,方法就是在源码中搜索 code.render,找到后,在 code 后边打印 code.render

在这里插入图片描述
刷新页面,然后可以在控制台看到输出的 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 函数返回的是 vnode,所以与之相似的 render 函数执行之后,返回的也是 vnode。

在这里插入图片描述

	// 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.

2. 模板必须转换为 JS 代码

因为模板有逻辑,前端代码中,只有 JS 有能力处理逻辑;
而模板最终是要转换为 HTML 来渲染的,而前端代码中,也只有 JS 有能力来渲染 HTML
模板还有 JS 变量,所以要把模板变成 JS 的方式来解决

3. 模板最终转换成 render 函数,render 函数是什么样子的?(记住三点)

render 函数中有 with 的语法
render 函数的样子,其实就是 snabbdom 的 h 函数的样子
render 函数返回的是 vnode

4. updateComponent

因为 render 函数返回的是 vnode,而新旧 vnode 之间,肯定是要做对比的,要执行 patch,这个逻辑就是在 updateComponent 中执行的。
分两种情况:首次渲染、不是首次渲染。


作者:泡杯感冒灵
链接:https://www.jianshu.com/p/1b4af57ad754
来源:简书

Logo

前往低代码交流专区

更多推荐