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 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP面向对象概念
2011/11/06 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
jquery.post用法之type设置问题
2014/02/24 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
python执行子进程实现进程间通信的方法
2015/06/02 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
python处理大日志文件
2019/07/23 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
高中历史教学反思
2014/02/08 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android