vue 中如何解析模板

最新推荐文章于 2024-01-03 23:34:44 发布

C澒

最新推荐文章于 2024-01-03 23:34:44 发布

阅读量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())
	}

总结

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
来源：简书

C澒

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
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"&
复制链接

扫一扫