深入理解Vue transition源码分析
这两天学习了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进行表单校验功能