vue深入解析之render function code详解

前端之家收集整理的这篇文章主要介绍了vue深入解析之render function code详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

最近在深入的学习研究vue,其实vue在使用上入门并没有什么太高的门槛,但前端同学们也不该仅仅停留在使用上。以 vue 设计、编码之优秀,足当抽丝剥茧,扒开它的外壳,深入其原理。让我们一起来刺破 vue 的心脏,下面话不多说了,来一起看看详细的介绍吧。

vue核心执行过程图

vue核心的执行过程主要分为这几个阶段:

1) 编译模板,生成可复用的render function code(这是今天要重点解读的),这一步在vue实例的整个生命周期中只会执行一次甚至零次,因为我们可以在打包的时候可以预编译

2) 生成watcher等核心渲染监听,在整个vue实例的生命过程中持续发生着作用,对view和modal进行双向绑定

3) 虚拟dom的diff比较,当watcher监听到data的变更的时候,就会根据注入新的data执行render function code,生成新的虚拟dom,跟老的虚拟dom(第一次执行的时候可能为空)进行diff比对,不同的部分将写入真实的dom

这几个过程都会以源码解析的方式分篇解读,今天我们重点讲解的是第一部分模板编译中输出的render function code

render function code解析

一、模板编译过程分解

生成ast语法树 const ast = parse(template.trim(),options) // 标记静态内容(以免diff的时候需要重复比较) optimize(ast,options) // 生成render function code const code = generate(ast,options)

很遗憾,上诉三步的代码今天都只是点到为止,不需要太努力,就能在网上搜到相关解析的文章,如果实在找不到同时又感兴趣,可以找到vue源码中的下面文件去读:

文件

换一个姿势读源码,今天我们要读的是generate(ast,options)生成的render function code的具体代码

二、写一个 vue demo

之前有提到过,读源码需要先了解整体的设计思想、架构,上面那个执行过程图在此列;另外,搭建一个demo执行环境进行debug单步调试,也是一个重要手段(特别是你对源码的目录结构不是特别清晰的时候)。为了让生成的render function code更为完整,写一个覆盖面尽量广的 demo :

普通属性:{{ message }}

{{msg()}}

{{ct}}

// js
new Vue({
el: '#app',data: {
message: '以vue的名义',items: [{
text: '达康书记'
},{
text: '育良书记'
}]
},methods: {
bindClick: function() {
this.message = '这就抓同伟去';
},msg: function() {
return this.message + "这个方法每次都会执行";
}
},computed: {
ct: function() {
return this.message + "计算属性并不会每次都执行";
}
}
})

render function code 解析

debug 拿到生成的 render function code(当然也可以通过 webpack 的 vue-loader 编译之后的 dist 文件拿到,此处省略1000字)

属性:" + _s(message))]),_v(" "),_c('p',[_v(_s(msg()))]),[_v(_s(ct))]),_c('input',{ directives: [{ name: "model",rawName: "v-model",value: (message),expression: "message" }],domProps: { "value": (message) },on: { "input": function($event) { if ($event.target.composing) return; message = $event.target.value } } }),_l((items),function(item) { return _c('div',[_v("\n\t\t " + _s(item.text) + "\n\t ")]) }),_c('button',{ on: { "click": bindClick } },[_v("点我出奇迹抓同伟")])],2) }

甭看这段代码有点怪,但是如果告诉你,这段代码,注入 data 执行,生成的就是传得玄乎其玄的虚拟 dom 树,然后再来一本正经的解(cai)读(ce)一下,你又会觉得这段代码其实没有这么晦涩难懂。ok,结合 demo 来看看,模板相关指令都被解析成什么了:

1) {{messge}} 解析成了 _s(message) ,果断认为这个 _s 就是 toString

2) {{msg()}} method 解析成了 _s(msg()) ,可见每一次 render,msg 方法都会被执行一遍(即使最终没有被反应到真实 dom 上),这就是计算属性存在的意义

3) {{ct}} 计算属性依然被解析成了 _s(ct) ,虽然计算属性可以称之为属性,但是形式上毕竟还是方法,是不是觉得比较奇怪?其实 watcher 除了监听组件,还会监听计算属性依赖的属性,一旦属性发生变更,就会执行计算属性方法,并将执行结果赋值给实例作用域下与计算属性方法名相同的属性,这就是直接使用 _s(ct) 而不是 _s(ct()) 就能正确引用计算属性值的原因,计算属性快就快在了这里

4) v-for="item in items" 被解析成了

可见 _l 跟 for-each 很类似

5) 至于 v-on:click 则解析成了

6) 再来看看 _c,c->create->createNode,假设这个方法就是创建虚拟节点,回头看上述代码,是不是挺有道理,_c 创建根节点,传入的子节点同样需要这个方法创建。找找源码验证下 src/core/vdom/vnode.js,以下中文注释是我加的

标签名 data?: VNodeData,//属性数据,事件监听等 children?: ?Array,//子节点 text?: string,elm?: Node,context?: Component,componentOptions?: VNodeComponentOptions ) { ... }

至此,也算是自圆其说了

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

猜你在找的Vue相关文章