摘要：至此算是找到了源碼位置。至此進(jìn)入過(guò)渡的部分完畢。在動(dòng)畫(huà)結(jié)束后，調(diào)用了由組件生命周期傳入的方法，把這個(gè)元素的副本移出了文檔流。這篇并沒(méi)有去分析相關(guān)的內(nèi)容，推薦一篇講非常不錯(cuò)的文章，對(duì)構(gòu)造函數(shù)如何來(lái)的感興趣的同學(xué)可以看這里

本來(lái)打算自己造一個(gè)transition的輪子，所以決定先看看源碼，理清思路。Vue的transition組件提供了一系列鉤子函數(shù)，并且具有良好可擴(kuò)展性。

既然要看源碼，就先讓Vue在開(kāi)發(fā)環(huán)境跑起來(lái)，首先從GitHub clone下來(lái)整個(gè)項(xiàng)目，在文件./github/CONTRIBUTING.md中看到了如下備注，需要強(qiáng)調(diào)一下的是，npm run dev構(gòu)建的是runtime + compiler版本的Vue。

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

緊接著在package.json中找到dev對(duì)應(yīng)的shell語(yǔ)句，就是下面這句

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

Vue2使用rollup打包，-c 后面跟的是打包的配置文件（build/config.js），執(zhí)行的同時(shí)傳入了一個(gè)TARGET參數(shù)，web-full-dev。打開(kāi)配置文件繼續(xù)往里找。

...
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
  },
  ...
}

從上面的構(gòu)建配置中，找到構(gòu)建入口為web/entry-runtime-with-compiler.js，它也就是umd版本vue的入口了。
我們發(fā)現(xiàn)在Vue的根目錄下并沒(méi)有web這個(gè)文件夾，實(shí)際上是因?yàn)閂ue給path.resolve這個(gè)方法加了個(gè)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對(duì)應(yīng)的目錄為"../src/platforms/web"，也就是src/platforms/web，順著這個(gè)文件繼續(xù)往下找。查看src/platforms/web/entry-runtime-with-compiler.js的代碼，這里主要是處理將Vue實(shí)例掛載到真實(shí)dom時(shí)的一些異常操作提示，
，比如不要把vue實(shí)例掛載在body或html標(biāo)簽上等。但是對(duì)于要找的transition，這些都不重要，重要的是

import Vue from "./runtime/index"

Vue對(duì)象是從當(dāng)前目錄的runtime文件夾引入的。打開(kāi)./runtime/index.js，先查看引入了哪些模塊， 發(fā)現(xiàn)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中發(fā)現(xiàn)transtion.js，它export了一個(gè)對(duì)象，這個(gè)對(duì)象有name，props和rander方法，一個(gè)標(biāo)準(zhǔn)的Vue組件。至此算是找到了源碼位置。

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

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

從上一節(jié)的代碼中，可以看到directives和components是保存在Vue.options里面的， 還需要注意一下后面的Vue.prototype.__patch__，因?yàn)閠ranstion并不單單是以一個(gè)組件來(lái)實(shí)現(xiàn)的，還需要在Vue構(gòu)造函數(shù)上打一些patch。

rander當(dāng)中的參數(shù)h方法，就是Vue用來(lái)創(chuàng)建虛擬DOM的createElement方法，但在此組件中，并沒(méi)有發(fā)現(xiàn)處理過(guò)度動(dòng)畫(huà)相關(guān)的邏輯，主要是集中處理props和虛擬DOM參數(shù)。因?yàn)閠ranstion并不單單是以一個(gè)組件來(lái)實(shí)現(xiàn)的，它需要操作真實(shí)dom（未插入文檔流）和虛擬dom，所以只能在Vue的構(gòu)造函數(shù)上打一些patch了。

往回看了下代碼，之前有一句Vue.prototype.__patch__ = inBrowser ? patch : noop，在patch相關(guān)的代碼中找到了transition相關(guān)的實(shí)現(xiàn)。modules/transtion.js

這就是過(guò)渡動(dòng)畫(huà)效果相關(guān)的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()
    }
  }
} : {}

這個(gè)模塊默認(rèn)export的對(duì)象包括了三個(gè)生命周期函數(shù)create，activate，remove，這應(yīng)該是Vue沒(méi)有對(duì)外暴露的生命周期函數(shù)，create和activate直接運(yùn)行的就是上面的enter方法，而remove執(zhí)行了leave方法。

繼續(xù)看最重要的是兩個(gè)方法，enter和leave。通過(guò)在這兩個(gè)方法上打斷點(diǎn)得知，執(zhí)行這兩個(gè)方法的之前，vnode已經(jīng)創(chuàng)建了真實(shí)dom, 并掛載到了vnode.elm上。其中這段代碼比較關(guān)鍵

// el就是真實(shí)dom節(jié)點(diǎn)
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, 此時(shí)dom節(jié)點(diǎn)還未插入到文檔流，推測(cè)應(yīng)該是在create或activate勾子執(zhí)行完以后，該節(jié)點(diǎn)被插入文檔流的。nextFrame方法的實(shí)現(xiàn)如下, 如requestAnimationFrame不存在，用setTimeout代替

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

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

這種方式的nextFrame實(shí)現(xiàn)，正如官方文檔中所說(shuō)的在下一幀添加了toClass，并remove掉startClass，最后在過(guò)渡效果結(jié)束以后，remove掉了所有的過(guò)渡相關(guān)class。至此‘進(jìn)入過(guò)渡’的部分完畢。

再來(lái)看‘離開(kāi)過(guò)渡’的方法leave，在leave方法中打斷點(diǎn)，發(fā)現(xiàn)html標(biāo)簽的狀態(tài)如下

xxx

為vue的占位符，當(dāng)元素通過(guò)v-if隱藏后，會(huì)在原來(lái)位置留下占位符。那就說(shuō)明，當(dāng)leave方法被觸發(fā)時(shí)，原本的真實(shí)dom元素已經(jīng)隱藏掉了(從vnode中被移除)，而正在顯示的元素，只是一個(gè)真實(shí)dom的副本。

leave方法關(guān)鍵代碼其實(shí)和enter基本一致，只不過(guò)是將startClass換為了leaveClass等，還有處理一些動(dòng)畫(huà)生命周期的勾子函數(shù)。在動(dòng)畫(huà)結(jié)束后，調(diào)用了由組件生命周期remove傳入的rm方法，把這個(gè)dom元素的副本移出了文檔流。

如有錯(cuò)誤，歡迎指正。

這篇并沒(méi)有去分析Vue core相關(guān)的內(nèi)容，推薦一篇講Vue core非常不錯(cuò)的文章，對(duì)Vue構(gòu)造函數(shù)如何來(lái)的感興趣的同學(xué)可以看這里