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 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
jquery构造器的实现代码小结
May 16 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 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 mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
js 学习笔记(三)
2009/12/29 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
python查询sqlite数据表的方法
2015/05/08 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
组织关系转移介绍信
2014/01/16 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
护士自我推荐信范文
2015/03/24 职场文书
学生犯错保证书
2015/05/09 职场文书