vue深入解析之render function code详解


Posted in Javascript onJuly 18, 2017

前言

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

vue核心执行过程图

vue深入解析之render function code详解

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源码中的下面文件去读:

// 编译入口
src/compiller/index.js
// html解析
src/compiller/parser/html-parser.js
// src/compiller下的其它文件

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

二、写一个 vue demo

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

//template
 <div id="app">
  <p>普通属性:{{ message }}</p>
  <p>{{msg()}}</p>
  <p>{{ct}}</p>
  <input v-model="message">
  <div v-for="item in items">
   {{ item.text }}
  </div>
  <button v-on:click="bindClick">点我抓同伟</button>
 </div>

 // 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字)

with(this) {
 return _c('div', {
  attrs: {
   "id": "app"
  }
 },
 [_c('p', [_v("普通属性:" + _s(message))]), _v(" "), _c('p', [_v(_s(msg()))]), _v(" "), _c('p', [_v(_s(ct))]), _v(" "), _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
   }
  }
 }), _v(" "), _l((items),
 function(item) {
  return _c('div', [_v("\n\t\t " + _s(item.text) + "\n\t ")])
 }), _v(" "), _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((items),
 function(item) {
  return _c('div', [_v("\n\t\t " + _s(item.text) + "\n\t ")])
 })

可见 _l 跟 for-each 很类似

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

_c('button', {
  on: {
   "click": bindClick
  }
 }

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

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

至此,也算是自圆其说了

总结

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

Javascript 相关文章推荐
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
JavaScript框架Angular和React深度对比
Nov 20 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
JavaScript中跨域问题的深入理解
Mar 04 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 #jQuery
浅谈JS封闭函数、闭包、内置对象
Jul 18 #Javascript
iscroll实现下拉刷新功能
Jul 18 #Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 #Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 #Javascript
iscroll.js滚动加载实例详解
Jul 18 #Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 #Javascript
You might like
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
Node.js的特点详解
2017/02/03 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
es6数值的扩展方法
2019/03/11 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
谈谈node.js中的模块系统
2020/09/01 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python中属性和描述符的正确使用
2016/08/23 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
在pycharm中显示python画的图方法
2019/08/31 Python
PageFactory设计模式基于python实现
2020/04/14 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
教师评语大全
2014/04/28 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
惊天动地观后感
2015/06/10 职场文书
深入理解python多线程编程
2021/04/18 Python
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
Python图像处理库PIL详细使用说明
2022/04/06 Python