深入理解Vue transition源码分析


Posted in Javascript onJuly 30, 2017

这两天学习了Vue transition感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

本来打算自己造一个transition的轮子,所以决定先看看源码,理清思路。Vue的transition组件提供了一系列钩子函数,并且具有良好可扩展性。

了解构建过程

既然要看源码,就先让Vue在开发环境跑起来,首先从GitHub clone下来整个项目,在文件./github/CONTRIBUTING.md中看到了如下备注,需要强调一下的是,npm run dev构建的是runtime + compiler版本的Vue。

# watch and auto re-build dist/vue.js
$ npm run dev

紧接着在package.json中找到dev对应的shell语句,就是下面这句

"scripts": {
  "dev": "rollup -w -c build/config.js --environment TARGET:web-full-dev",
  ...
}

Vue2使用rollup打包,-c 后面跟的是打包的配置文件(build/config.js),执行的同时传入了一个TARGET参数,web-full-dev。打开配置文件继续往里找。

...
const builds = {
 ...
 'web-full-dev': {
   entry: resolve('web/entry-runtime-with-compiler.js'),
   dest: resolve('dist/vue.js'),
   format: 'umd',
   env: 'development',
   alias: { he: './entity-decoder' },
   banner
 },
 ...
}

从上面的构建配置中,找到构建入口为web/entry-runtime-with-compiler.js,它也就是umd版本vue的入口了。 我们发现在Vue的根目录下并没有web这个文件夹,实际上是因为Vue给path.resolve这个方法加了个alias, alias的配置在/build/alias.js中

module.exports = {
 vue: path.resolve(__dirname, '../src/platforms/web/entry-runtime-with-compiler'),
 compiler: path.resolve(__dirname, '../src/compiler'),
 core: path.resolve(__dirname, '../src/core'),
 shared: path.resolve(__dirname, '../src/shared'),
 web: path.resolve(__dirname, '../src/platforms/web'),
 weex: path.resolve(__dirname, '../src/platforms/weex'),
 server: path.resolve(__dirname, '../src/server'),
 entries: path.resolve(__dirname, '../src/entries'),
 sfc: path.resolve(__dirname, '../src/sfc')
}

web对应的目录为'../src/platforms/web',也就是src/platforms/web,顺着这个文件继续往下找。查看src/platforms/web/entry-runtime-with-compiler.js的代码,这里主要是处理将Vue实例挂载到真实dom时的一些异常操作提示, ,比如不要把vue实例挂载在body或html标签上等。但是对于要找的transition,这些都不重要,重要的是

import Vue from './runtime/index'

Vue对象是从当前目录的runtime文件夹引入的。打开./runtime/index.js,先查看引入了哪些模块, 发现Vue是从src/core/index引入的,并看到platformDirectives和platformComponents,官方的指令和组件八九不离十就在这了。

import Vue from 'core/index'
...
...
import platformDirectives from './directives/index'
import platformComponents from './components/index'

...
// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

在platformComponents中发现transtion.js,它export了一个对象,这个对象有name,props和rander方法,一个标准的Vue组件。至此算是找到了源码位置。

export default {
 name: 'transition',
 props: transitionProps,
 abstract: true,

 render (h: Function) {
  ...
 }
}

transition实现分析

从上一节的代码中,可以看到directives和components是保存在Vue.options里面的, 还需要注意一下后面的Vue.prototype.patch,因为transtion并不单单是以一个组件来实现的,还需要在Vue构造函数上打一些patch。

rander当中的参数h方法,就是Vue用来创建虚拟DOM的createElement方法,但在此组件中,并没有发现处理过度动画相关的逻辑,主要是集中处理props和虚拟DOM参数。因为transtion并不单单是以一个组件来实现的,它需要操作真实dom(未插入文档流)和虚拟dom,所以只能在Vue的构造函数上打一些patch了。

往回看了下代码,之前有一句Vue.prototype.__patch__ = inBrowser ? patch : noop,在patch相关的代码中找到了transition相关的实现。modules/transtion.js

这就是过渡动画效果相关的patch的源码位置。

export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
 ...
}
export function leave (vnode: VNodeWithData, rm: Function) {
 ...
}

export default inBrowser ? {
 create: _enter,
 activate: _enter,
 remove (vnode: VNode, rm: Function) {
  /* istanbul ignore else */
  if (vnode.data.show !== true) {
   leave(vnode, rm)
  } else {
   rm()
  }
 }
} : {}

这个模块默认export的对象包括了三个生命周期函数create,activate,remove,这应该是Vue没有对外暴露的生命周期函数,create和activate直接运行的就是上面的enter方法,而remove执行了leave方法。

继续看最重要的是两个方法,enter和leave。通过在这两个方法上打断点得知,执行这两个方法的之前,vnode已经创建了真实dom, 并挂载到了vnode.elm上。其中这段代码比较关键

// el就是真实dom节点
beforeEnterHook && beforeEnterHook(el)
if (expectsCSS) {
 addTransitionClass(el, startClass)
 addTransitionClass(el, activeClass)
 nextFrame(() => {
  addTransitionClass(el, toClass)
  removeTransitionClass(el, startClass)
  if (!cb.cancelled && !userWantsControl) {
   if (isValidDuration(explicitEnterDuration)) {
    setTimeout(cb, explicitEnterDuration)
   } else {
    whenTransitionEnds(el, type, cb)
   }
  }
 })
}

首先给el添加了startClass和activeClass, 此时dom节点还未插入到文档流,推测应该是在create或activate勾子执行完以后,该节点被插入文档流的。nextFrame方法的实现如下, 如requestAnimationFrame不存在,用setTimeout代替

const raf = inBrowser && window.requestAnimationFrame
 ? window.requestAnimationFrame.bind(window)
 : setTimeout

export function nextFrame (fn: Function) {
 raf(() => {
  raf(fn)
 })
}

这种方式的nextFrame实现,正如官方文档中所说的在下一帧添加了toClass,并remove掉startClass,最后在过渡效果结束以后,remove掉了所有的过渡相关class。至此‘进入过渡'的部分完毕。

再来看‘离开过渡'的方法leave,在leave方法中打断点,发现html标签的状态如下

<p>xxx</p>
<!---->

<!----> 为vue的占位符,当元素通过v-if隐藏后,会在原来位置留下占位符。那就说明,当leave方法被触发时,原本的真实dom元素已经隐藏掉了(从vnode中被移除),而正在显示的元素,只是一个真实dom的副本。

leave方法关键代码其实和enter基本一致,只不过是将startClass换为了leaveClass等,还有处理一些动画生命周期的勾子函数。在动画结束后,调用了由组件生命周期remove传入的rm方法,把这个dom元素的副本移出了文档流。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断是否为数组的函数: isArray()
Oct 30 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
使用travis-ci如何持续部署node.js应用详解
Jul 30 #Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 #Javascript
webpack配置sass模块的加载的方法
Jul 30 #Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 #Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 #Javascript
webpack实现热加载自动刷新的方法
Jul 30 #Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 #Javascript
You might like
session在PHP大型web应用中的使用
2011/06/25 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
jcrop基本参数一览
2013/07/16 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python:socket传输大文件示例
2017/01/18 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
保险公司年会主持词
2014/03/22 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
Python实现的扫码工具居然这么好用!
2021/06/07 Python
分析Python list操作为什么会错误
2021/11/17 Python