vue 中如何解析模板

最新推荐文章于 2023-06-17 23:00:15 发布

C澒

最新推荐文章于 2023-06-17 23:00:15 发布

阅读量4.6k

点赞数 3

文章标签： vue.js javascript 前端

原文链接：https://www.jianshu.com/p/1b4af57ad754

版权

模板是什么？

对于 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 函数

我们格式化一下 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())
	}