vue 源码解析之虚拟Dom-render


Posted in Javascript onAugust 26, 2019

vue 源码解析 --虚拟Dom-render

instance/index.js
function Vue (options) {
 if (process.env.NODE_ENV !== 'production' &&
  !(this instanceof Vue)
 ) {
  warn('Vue is a constructor and should be called with the `new` keyword')
 }
 this._init(options)
}
renderMixin(Vue)

初始化先执行了 renderMixin 方法, Vue 实例化执行this._init, 执行this.init方法中有initRender()

renderMixin
installRenderHelpers( 将一些渲染的工具函数放在Vue 原型上)

Vue.prototype.$nextTick = function (fn: Function) {
  return nextTick(fn, this)
 }

仔细看这个函数, 在Vue中的官方文档上这样解释

Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then MessageChannel,如果执行环境不支持,会采用 setTimeout(fn, 0)代替。

export function nextTick (cb?: Function, ctx?: Object) {
 let _resolve
 callbacks.push(() => {
  if (cb) {
   try {
    cb.call(ctx)
   } catch (e) {
    handleError(e, ctx, 'nextTick')
   }
  } else if (_resolve) {
   _resolve(ctx)
  }
 })
 if (!pending) {
  pending = true
  timerFunc()
 }
 // $flow-disable-line
 if (!cb && typeof Promise !== 'undefined') {
  return new Promise(resolve => {
   _resolve = resolve
  })
 }
}

Vue.nextTick用于延迟执行一段代码,它接受2个参数(回调函数和执行回调函数的上下文环境),如果没有提供回调函数,那么将返回promise对象。

function flushCallbacks () {
 pending = false
 const copies = callbacks.slice(0)
 callbacks.length = 0
 for (let i = 0; i < copies.length; i++) {
  copies[i]()
 }
}

这个flushCallbacks 是执行callbacks里存储的所有回调函数。

timerFunc 用来触发执行回调函数

先判断是否原生支持promise,如果支持,则利用promise来触发执行回调函数;
否则,如果支持MutationObserver,则实例化一个观察者对象,观察文本节点发生变化时,触发执行 
所有回调函数。

如果都不支持,则利用setTimeout设置延时为0。

const observer = new MutationObserver(flushCallbacks)
 const textNode = document.createTextNode(String(counter))
 observer.observe(textNode, {
  characterData: true
 })
 timerFunc = () => {
  counter = (counter + 1) % 2
  textNode.data = String(counter)
 }
 isUsingMicroTask = true

MutationObserver是一个构造器,接受一个callback参数,用来处理节点变化的回调函数,observe方法中options参数characterData:设置true,表示观察目标数据的改变

_render函数

通过执行 createElement 方法并返回的是 vnode,它是一个虚拟的 Node。

vnode = render.call(vm._renderProxy, vm.$createElement)

总结

以上所述是小编给大家介绍的vue 源码解析之虚拟Dom-render,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
Vue中使用vux的配置详解
May 05 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 #Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 #Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 #Javascript
JS阻止事件冒泡的方法详解
Aug 26 #Javascript
express框架中使用jwt实现验证的方法
Aug 25 #Javascript
JS异步处理的进化史深入讲解
Aug 25 #Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 #Javascript
You might like
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
python中对数据进行各种排序的方法
2019/07/02 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
50道外企软件测试面试题
2014/08/18 面试题
大学生毕业鉴定
2014/01/31 职场文书
运动会跳远广播稿
2014/02/04 职场文书
聘用意向书范本
2014/04/01 职场文书
服务之星事迹材料
2014/05/03 职场文书
小学开学标语
2014/07/01 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
2015年暑假工作总结
2015/07/13 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
导游词书写之黄山
2019/08/06 职场文书
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫