深入理解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 相关文章推荐
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
简单实现js上传文件功能
Aug 21 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
使用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
php的memcached客户端memcached
2011/06/14 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
javascript radio 联动效果
2009/03/04 Javascript
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python中的pass语句使用方法讲解
2015/05/14 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python partial函数原理及用法解析
2019/12/11 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
艺术爱好者的自我评价分享
2013/10/08 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
幼儿园招生广告
2014/03/19 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python