大家好，我是 TooBug，Web 前端工程師，目前就職于某互聯(lián)網(wǎng)金融公司任前端架構(gòu)師，負(fù)責(zé)過諸多項(xiàng)目的前端技術(shù)選型和架構(gòu)。
我從業(yè)十年，經(jīng)歷過長時(shí)間的純原生 JS 和 jQuery 開發(fā)，2012 年左右開始使用 backbone.js 開發(fā)，算是接觸到了 MVVM 時(shí)代的啟蒙框架。后來作為國內(nèi)較早一批使用 MVVM 框架的前端工程師，開始實(shí)踐 Angular.js / Vue。
一路走過來，見證了前端框架領(lǐng)域的諸多變化，時(shí)至今日，數(shù)據(jù)驅(qū)動(dòng)、組件化開發(fā)、單頁面前端路由……每一個(gè)點(diǎn)都是一步步探索而來，直到現(xiàn)在已經(jīng)成為每一個(gè)成熟框架的共識(shí)。
作為一個(gè)前端架構(gòu)師，在做技術(shù)選型的過程中，會(huì)面臨無數(shù)的問題：這個(gè)特性是否會(huì)引起理解上的歧義，使用這樣的開發(fā)方式是否會(huì)帶來性能的下降，為了提升團(tuán)隊(duì)效率應(yīng)該選擇激進(jìn)的技術(shù)還是保守的技術(shù)……對這些問題的思考，會(huì)使得我在評估每一個(gè)框架的時(shí)候有更多的維度，而不僅僅是從某一個(gè)方面進(jìn)行評價(jià)。
在日常工作及準(zhǔn)備這個(gè)專欄的過程中，我了解到很多前端工程師，哪怕是一直在使用 Vue 的工程師也很少關(guān)注 Vue 的技術(shù)原理，當(dāng)碰到問題的時(shí)候第一反應(yīng)就是搜索一下，找一個(gè)相似問題的代碼片段，粘貼使用。
這樣的方式能夠解決當(dāng)下的一小部分問題，然而當(dāng)真的碰到復(fù)雜場景下的問題時(shí)，不僅找不到合適的解決方式，甚至由于對原理理解太少，連合適的搜索關(guān)鍵詞都找不到。
因此學(xué)習(xí) Vue 絕不應(yīng)該僅僅是學(xué)習(xí)它的用法。在用法這一點(diǎn)上，Vue已經(jīng)做得足夠易用了。只有我們深入理解它的原理，才能夠應(yīng)付在開發(fā)過程中的各種問題，找到根本原因并提出最合適的解決辦法。
最后，我為大家簡單介紹一下課程的具體安排：
課程安排：
首先，我會(huì)介紹相關(guān)背景及專欄內(nèi)容，包含如何閱讀專欄的章節(jié)。
接下來我會(huì)用一章的篇幅來介紹相關(guān)前置知識(shí)，包含現(xiàn)代 Web 前端開發(fā)的特征及解讀 Vue 源碼需要的必備的相關(guān)前置知識(shí)。掌握這些知識(shí)可以幫助我們在閱讀源碼時(shí)不過分陷入細(xì)節(jié)，而是時(shí)刻保持對整體結(jié)構(gòu)的關(guān)注。
介紹完前置知識(shí)后會(huì)進(jìn)入接觸 Vue 的第一個(gè)部分，即實(shí)例及入口。通過了解 Vue 實(shí)例初始化的過程以及在不同環(huán)境下的包裝入口，我們就能弄清楚當(dāng)我們使用 Vue 的時(shí)候，到底是在使用什么。
在看過 Vue 實(shí)例之后，我將介紹 Vue 最核心的幾個(gè)機(jī)制，包括依賴收集、數(shù)據(jù)監(jiān)聽、模板編譯、組件機(jī)制等機(jī)制，掌握這些機(jī)制后可以說 Vue 源碼的精髓就已經(jīng)大致掌握了。
再接下來一章，我會(huì)介紹在前面章節(jié)中因?yàn)槠才哦桃饴┑舻囊恍┘?xì)節(jié)，例如渲染輔助方法、雙向綁定、slots、nextTick 等。
在看完 Vue 源碼的核心后，我們還會(huì)專門看一下編譯工具，因?yàn)檫@一部分實(shí)際上是貫穿在Vue 使用的全過程中的，了解編譯工具鏈的核心原理和實(shí)現(xiàn)有助于更好地理解 Vue 的實(shí)現(xiàn)原理。
最后，作為擴(kuò)展，vue-router/vuex 等周邊的核心原理和實(shí)現(xiàn)也會(huì)簡單做一些介紹。
此外，因?yàn)?Vue 3 已經(jīng)發(fā)布，我也將使用一章的篇幅來介紹 Vue 3 的主要變化和值得注意的實(shí)現(xiàn)細(xì)節(jié)。
這便是課程的全部內(nèi)容，相信大家在看完后會(huì)有一些收獲。