這兩天學(xué)習(xí)了Vue transition感覺這個地方知識點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記。

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

了解構(gòu)建過程

既然要看源碼，就先讓Vue在開發(fā)環(huán)境跑起來，首先從GitHub clone下來整個項目，在文件./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對應(yīng)的shell語句，就是下面這句

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

Vue2使用rollup打包，-c 后面跟的是打包的配置文件（build/config.js），執(zhí)行的同時傳入了一個TARGET參數(shù)，web-full-dev。打開配置文件繼續(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的根目錄下并沒有web這個文件夾，實(shí)際上是因為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對應(yīng)的目錄為'../src/platforms/web'，也就是src/platforms/web，順著這個文件繼續(xù)往下找。查看src/platforms/web/entry-runtime-with-compiler.js的代碼，這里主要是處理將Vue實(shí)例掛載到真實(shí)dom時的一些異常操作提示， ，比如不要把vue實(shí)例掛載在body或html標(biāo)簽上等。但是對于要找的transition，這些都不重要，重要的是

import Vue from './runtime/index'

Vue對象是從當(dāng)前目錄的runtime文件夾引入的。打開./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 & componentsextend(Vue.options.directives, platformDirectives)extend(Vue.options.components, platformComponents)// install platform patch functionVue.prototype.__patch__ = inBrowser ? patch : noop