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 相关文章推荐
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python做文本按行去重的实现方法
2016/10/19 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
Python中的取模运算方法
2018/11/10 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Python中的asyncio代码详解
2019/06/10 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
高三生物教学反思
2014/01/25 职场文书
小学生考试获奖感言
2014/01/30 职场文书
职称评定自我鉴定
2014/03/18 职场文书
员工保密承诺书
2014/05/28 职场文书
学校党员对照检查材料
2014/08/28 职场文书
个人整改措施书面材料
2014/10/24 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
学校社团活动总结
2015/05/07 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书