title: vue入門(mén)淺析author: Sun-Winddate: May 14，2022

寫(xiě)這篇博文的目的在于為初學(xué)vue的同學(xué)對(duì)vue有一些更進(jìn)一步的了解讀這篇博文前，您應(yīng)該至少安裝了vue環(huán)境，能在本地運(yùn)行一個(gè)簡(jiǎn)單的demo本文將淺析vue項(xiàng)目工程的結(jié)構(gòu)，以及用npm運(yùn)行項(xiàng)目的過(guò)程中發(fā)生的一些事件注明：該文本應(yīng)在2022.5.14發(fā)表，由于博主有其他安排耽擱后面忘了，現(xiàn)在補(bǔ)上。

項(xiàng)目的文件結(jié)構(gòu)主文件結(jié)構(gòu)

一般的vue工程項(xiàng)目核心部分都在src里存放 vue 項(xiàng)目的源代碼。其文件夾下的各個(gè)文件（文件夾）分別為：

(資料圖片)

assets?：資源文件，比如存放 css，圖片等資源component?：組件文件夾，用來(lái)存放 vue 的公共組件（注冊(cè)于全局，在整個(gè)項(xiàng)目中通過(guò)關(guān)鍵詞便可直接輸出）。router?:用來(lái)存放 ?index.js?，這個(gè) js 用來(lái)配置路由tool?：用來(lái)存放工具類(lèi) js，將 js 代碼封裝好放入這個(gè)文件夾可以全局調(diào)用（比如常見(jiàn)的? api.js?，?http.js? 是對(duì) http 方法和 api 方法的封裝）views?：用來(lái)放主體頁(yè)面，雖然和組件文件夾都是 vue 文件，但 views 下的 vue 文件是可以用來(lái)充當(dāng)路由 view 的。main.js?:是項(xiàng)目的入口文件，作用是初始化 vue 實(shí)例，并引入所需要的插件。app.vue?:是項(xiàng)目的主組件，所有頁(yè)面都是在該組件下進(jìn)行切換的.?其他文件結(jié)構(gòu)public:用于存放靜態(tài)文件public/index.html:是一個(gè)模板文件，作用是生成項(xiàng)目的入口文件，webpack打包的js,css也會(huì)自動(dòng)注入到該頁(yè)面中。我們?yōu)g覽器訪(fǎng)問(wèn)項(xiàng)目的時(shí)候就會(huì)默認(rèn)打開(kāi)生成好的index.htmlpackage.json: 模塊基本信息項(xiàng)目開(kāi)發(fā)所需要模塊，版本，項(xiàng)目名稱(chēng)vue.config.js:包含vue項(xiàng)目的其他配置，包括端口等信息node_modules:項(xiàng)目的依賴(lài)模塊dist:打包文件npm run serve/dev淺析

我們?cè)诒镜剡\(yùn)行vue項(xiàng)目，常見(jiàn)的指令就是npm run serve/dev;與其說(shuō)是指令，不如說(shuō)是腳本我們通常會(huì)在package.json中配置 script 字段作為 NPM 的執(zhí)行腳本。以個(gè)人開(kāi)發(fā)項(xiàng)目為例，Vue.js 源碼構(gòu)建的腳本如下：

"scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build",    "lint": "vue-cli-service lint",    "stylelint": "stylelint src/css/*.* --fix",    "htmlhint": "htmlhint **.html",    "eslint": "eslint src/**/*.js src/**/*.vue",    "eslint-fix-js": "eslint src/**/*.js --fix",    "eslint-fix-vue": "eslint src/**/*.vue --fix"  },

所以當(dāng)我們?cè)诮K端運(yùn)行npm run serve時(shí)，實(shí)際上運(yùn)行的是vue-cli-service serve通過(guò)這個(gè)腳本去構(gòu)建整個(gè)vue項(xiàng)目

構(gòu)建的過(guò)程中發(fā)生了什么public/index.html

之前我們提到過(guò)，這個(gè)文件作為項(xiàng)目的入口文件，首先加載這個(gè)html文件下面這些代碼是個(gè)例子

我們注意到一個(gè)特別的div塊，它的id為app

src/main.js

這里的app其實(shí)與src/main.js文件有關(guān)

import Vue from "vue";new Vue({  el: "#app",  render: h => h(app)});

我們都知道，new 關(guān)鍵字在 Javascript 語(yǔ)言中代表實(shí)例化是一個(gè)對(duì)象，而 Vue 實(shí)際上是一個(gè)類(lèi)，類(lèi)在 Javascript 中是用 Function 來(lái)實(shí)現(xiàn)的,在vue.js源碼中是這樣定義的

function Vue (options) {  if (process.env.NODE_ENV !== "production" &&    !(this instanceof Vue)  ) {    warn("Vue is a constructor and should be called with the `new` keyword")  }  this._init(options)}

可以看到vue只能通過(guò)關(guān)鍵字初始化,this._init函數(shù)這里就不再具體介紹Vue 初始化主要就干了幾件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。

在初始化的最后，檢測(cè)到如果有 el 屬性，則調(diào)用 vm.$mount 方法掛載 vm，掛載的目標(biāo)就是把模板渲染成最終的DOM在compiler版本的$mount實(shí)現(xiàn)中，它對(duì) el 做了限制，Vue 不能掛載在 body、html這樣的根節(jié)點(diǎn)上。接下來(lái)的是很關(guān)鍵的邏輯 —— 如果沒(méi)有定義 render 方法，則會(huì)把 el 或者 template字符串轉(zhuǎn)換成 render 方法。

這里我們要牢記，在 Vue 2.0 版本中，所有 Vue 的組件的渲染最終都需要 render方法，無(wú)論我們是用單文件 .vue 方式開(kāi)發(fā)組件，還是寫(xiě)了 el 或者 template 屬性，最終都會(huì)轉(zhuǎn)換成 render 方法，那么這個(gè)過(guò)程是 Vue 的一個(gè)在線(xiàn)編譯的過(guò)程。

最后，調(diào)用原先原型上的 $mount 方法掛載。

結(jié)合之前public/index.html中的例子

實(shí)際上是編寫(xiě)了如下render函數(shù)

render: function (createElement) {  return createElement("div", {     attrs: {        id: "app"      },  })}

vm._render 最終是通過(guò)執(zhí)行 createElement 方法并返回的是 vnode，它是一個(gè)虛擬 Node

Virtual DOM介紹

瀏覽器真正的DOM通常是非常龐大的，因?yàn)闉g覽器產(chǎn)生DOM的標(biāo)準(zhǔn)本身就比較復(fù)雜，當(dāng)我們頻繁地進(jìn)行DOM更新，就會(huì)產(chǎn)生一系列的性能問(wèn)題而 Virtual DOM 就是用一個(gè)原生的 JS 對(duì)象去描述一個(gè) DOM 節(jié)點(diǎn)，所以它比創(chuàng)建一個(gè) DOM 的代價(jià)要小很多。在 Vue.js 中，Virtual DOM 是用 VNode 這么一個(gè) Class 去描述在 Vue.js 中，VNode 的 create 是通過(guò)之前提到的 createElement 方法創(chuàng)建的。

生命周期

這也是一張比較經(jīng)典的圖了在開(kāi)發(fā)過(guò)程中，我們會(huì)頻繁地跟vue的生命周期打交道

beforeCreate 和 created 函數(shù)都是在實(shí)例化 Vue 的階段在vue.js源碼中 beforeCreate 和 created 的鉤子調(diào)用是在 initState 的前后，initState 的作用是初始化 props、data、methods、watch、computed 等屬性

在執(zhí)行 vm._render() 函數(shù)渲染 VNode 之前，執(zhí)行了 beforeMount 鉤子函數(shù)，在執(zhí)行完 vm._update() 把 VNode patch 到真實(shí) DOM 后，執(zhí)行 mouted 鉤子。beforeUpdate 和 updated 的鉤子函數(shù)執(zhí)行時(shí)機(jī)都應(yīng)該是在數(shù)據(jù)更新的時(shí)候，比如雙向綁定等等

export function mountComponent (  vm: Component,  el: ?Element,  hydrating?: boolean): Component {  // ...  // we set this to vm._watcher inside the watcher"s constructor  // since the watcher"s initial patch may call $forceUpdate (e.g. inside child  // component"s mounted hook), which relies on vm._watcher being already defined  new Watcher(vm, updateComponent, noop, {    before () {      if (vm._isMounted) {        callHook(vm, "beforeUpdate")      }    }  }, true /* isRenderWatcher */)  // ...}

可以看到這里有一個(gè)vm._isMounted的判斷，也就是說(shuō)組件在mounted后才會(huì)去執(zhí)行這個(gè)鉤子函數(shù)同時(shí)這里實(shí)例化了一個(gè)watcher去監(jiān)聽(tīng)vm上的數(shù)據(jù)變化重新渲染

beforeDestroy 和 destroyed 鉤子函數(shù)的執(zhí)行時(shí)機(jī)在組件銷(xiāo)毀的階段注意mounted和destroyed的執(zhí)行過(guò)程都是先子后父從下圖可以看到初始化vue到最終渲染的整個(gè)過(guò)程

注冊(cè)組件

在開(kāi)發(fā)一個(gè)組件的過(guò)程中往往會(huì)用到其他的組件組件注冊(cè)的語(yǔ)法如下

Vue.component("my-component", {  // 選項(xiàng)})

或

import HelloWorld from "./components/HelloWorld"export default {  components: {    HelloWorld  }}

注冊(cè)組件實(shí)際上是一個(gè)合并的過(guò)程，合并option再創(chuàng)建vnode。

由于博主在這一部分學(xué)識(shí)尚淺，暫不做過(guò)多的描述

下載插件

開(kāi)發(fā)的過(guò)程中很可能需要一些其他的插件如Element等使用一般來(lái)說(shuō)通過(guò)Vue.use()來(lái)下載插件，并且會(huì)阻止多次注冊(cè)相同的插件

export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) {  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))  if (installedPlugins.indexOf(plugin) > -1) {   return this  }  const args = toArray(arguments, 1)  args.unshift(this)  if (typeof plugin.install === "function") {   plugin.install.apply(plugin, args)  } else if (typeof plugin === "function") {   plugin.apply(null, args)  }  installedPlugins.push(plugin)  return this }}

這是use方法的源碼，可以看到其參數(shù)只能是object或者function，然后判斷其是否被注冊(cè)過(guò)然后再調(diào)用該插件的install方法

可以看到 Vue 提供的插件注冊(cè)機(jī)制很簡(jiǎn)單，每個(gè)插件都需要實(shí)現(xiàn)一個(gè)靜態(tài)的 install 方法，當(dāng)我們執(zhí)行 Vue.use 注冊(cè)插件的時(shí)候，就會(huì)執(zhí)行這個(gè) install 方法，并且在這個(gè) install 方法的第一個(gè)參數(shù)我們可以拿到 Vue 對(duì)象，這樣的好處就是作為插件的編寫(xiě)方不需要再額外去import Vue 了。

路由

路由的主要作用是根據(jù)不同的路徑映射到不同的視圖，一般我們用官方插件vue-router來(lái)解決路由的問(wèn)題

Object.defineProperty(Vue.prototype, "$router", {    get () { return this._routerRoot._router }  })  Object.defineProperty(Vue.prototype, "$route", {    get () { return this._routerRoot._route }  })

在vue-router的類(lèi)定義中有在vue原型上定義的 $router 和 $route 兩個(gè)屬性的get方法，這也是為什么可以在組件實(shí)例上訪(fǎng)問(wèn) this.$router和this.$route

在new一個(gè)vueRouter后會(huì)返回它的實(shí)例，在beforecreate()中有這樣一段代碼

beforeCreate() {  if (isDef(this.$options.router)) {    // ...    this._router = this.$options.router    this._router.init(this)    // ...  }}  

所以在執(zhí)行該鉤子函數(shù)時(shí)，如果有傳入router實(shí)例，則會(huì)執(zhí)行router.init方法匹配是利用matcher匹配，并且會(huì)生成用戶(hù)的路由表（具體細(xì)節(jié)暫時(shí)不表）當(dāng)我們點(diǎn)擊router-link的時(shí)候，會(huì)通過(guò)一系列函數(shù)找到完整的url，執(zhí)行pushState方法

export function pushState (url?: string, replace?: boolean) {  saveScrollPosition()  const history = window.history  try {    if (replace) {      history.replaceState({ key: _key }, "", url)    } else {      _key = genKey()      history.pushState({ key: _key }, "", url)    }  } catch (e) {    window.location[replace ? "replace" : "assign"](url)  }}

該方法會(huì)更新瀏覽器的url地址，并且把當(dāng)前url壓入歷史棧中有一個(gè)專(zhuān)門(mén)的監(jiān)聽(tīng)器會(huì)監(jiān)聽(tīng)歷史棧的變化情況

setupListeners () {  const router = this.router  const expectScroll = router.options.scrollBehavior  const supportsScroll = supportsPushState && expectScroll  if (supportsScroll) {    setupScroll()  }  window.addEventListener(supportsPushState ? "popstate" : "hashchange", () => {    const current = this.current    if (!ensureSlash()) {      return    }    this.transitionTo(getHash(), route => {      if (supportsScroll) {        handleScroll(this.router, route, current, true)      }      if (!supportsPushState) {        replaceHash(route.fullPath)      }    })  })}

當(dāng)點(diǎn)擊瀏覽器的返回按鈕時(shí),會(huì)觸發(fā)popstate事件，通過(guò)同樣的方法拿到當(dāng)前要跳轉(zhuǎn)的url并進(jìn)行路徑轉(zhuǎn)換

在router-view中

data.routerView = true// ...while (parent && parent._routerRoot !== parent) {  if (parent.$vnode && parent.$vnode.data.routerView) {    depth++  }  if (parent._inactive) {    inactive = true  }  parent = parent.$parent}const matched = route.matched[depth]// ...const component = cache[name] = matched.components[name]

這個(gè)循環(huán)就是從當(dāng)前的的父節(jié)點(diǎn)向上找，一直找到根節(jié)點(diǎn)（vue實(shí)例），遍歷完成后，就根據(jù)當(dāng)前遍歷的深度和路徑找到對(duì)應(yīng)的組件并進(jìn)行渲染在router-view的最后有根據(jù) component 渲染出對(duì)應(yīng)的組件 vonde：

return h(component, data, children)

hash模式：?jiǎn)雾?yè)應(yīng)用標(biāo)配，hash發(fā)生變化的url都會(huì)被瀏覽器記錄下來(lái)history模式：可以進(jìn)行切換和修改（歷史狀態(tài)），使得路由配置更自由其他vuex

Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。該狀態(tài)管理模式包含以下幾個(gè)部分：

state：驅(qū)動(dòng)數(shù)據(jù)的應(yīng)用源view：以聲明方法將state映射到視圖actions：響應(yīng)在view上用戶(hù)的輸入導(dǎo)致的狀態(tài)變化以下是一個(gè)簡(jiǎn)單的數(shù)據(jù)流模式

需要注意以下兩點(diǎn)

Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。

參考書(shū)籍《vue.js技術(shù)揭秘》

關(guān)鍵詞：