深入理解Vue transition源碼分析，vuetransition

深入理解Vue transition源碼分析，vuetransition

這兩天學習了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 & componentsextend(Vue.options.directives, platformDirectives)extend(Vue.options.components, platformComponents)// install platform patch functionVue.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) : setTimeoutexport 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元素的副本移出了文檔流。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。