title: vue入門淺析author: Sun-Winddate: May 14，2022

寫這篇博文的目的在于為初學vue的同學對vue有一些更進一步的了解讀這篇博文前，您應該至少安裝了vue環境，能在本地運行一個簡單的demo本文將淺析vue項目工程的結構，以及用npm運行項目的過程中發生的一些事件注明：該文本應在2022.5.14發表，由于博主有其他安排耽擱后面忘了，現在補上。

項目的文件結構主文件結構

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

(資料圖片)

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

我們在本地運行vue項目，常見的指令就是npm run serve/dev;與其說是指令，不如說是腳本我們通常會在package.json中配置 script 字段作為 NPM 的執行腳本。以個人開發項目為例，Vue.js 源碼構建的腳本如下：

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

所以當我們在終端運行npm run serve時，實際上運行的是vue-cli-service serve通過這個腳本去構建整個vue項目

構建的過程中發生了什么public/index.html

之前我們提到過，這個文件作為項目的入口文件，首先加載這個html文件下面這些代碼是個例子

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

src/main.js

這里的app其實與src/main.js文件有關

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

我們都知道，new 關鍵字在 Javascript 語言中代表實例化是一個對象，而 Vue 實際上是一個類，類在 Javascript 中是用 Function 來實現的,在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只能通過關鍵字初始化,this._init函數這里就不再具體介紹Vue 初始化主要就干了幾件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。

在初始化的最后，檢測到如果有 el 屬性，則調用 vm.$mount 方法掛載 vm，掛載的目標就是把模板渲染成最終的DOM在compiler版本的$mount實現中，它對 el 做了限制，Vue 不能掛載在 body、html這樣的根節點上。接下來的是很關鍵的邏輯 —— 如果沒有定義 render 方法，則會把 el 或者 template字符串轉換成 render 方法。

這里我們要牢記，在 Vue 2.0 版本中，所有 Vue 的組件的渲染最終都需要 render方法，無論我們是用單文件 .vue 方式開發組件，還是寫了 el 或者 template 屬性，最終都會轉換成 render 方法，那么這個過程是 Vue 的一個在線編譯的過程。

最后，調用原先原型上的 $mount 方法掛載。

結合之前public/index.html中的例子

實際上是編寫了如下render函數

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

vm._render 最終是通過執行 createElement 方法并返回的是 vnode，它是一個虛擬 Node

Virtual DOM介紹

瀏覽器真正的DOM通常是非常龐大的，因為瀏覽器產生DOM的標準本身就比較復雜，當我們頻繁地進行DOM更新，就會產生一系列的性能問題而 Virtual DOM 就是用一個原生的 JS 對象去描述一個 DOM 節點，所以它比創建一個 DOM 的代價要小很多。在 Vue.js 中，Virtual DOM 是用 VNode 這么一個 Class 去描述在 Vue.js 中，VNode 的 create 是通過之前提到的 createElement 方法創建的。

生命周期

這也是一張比較經典的圖了在開發過程中，我們會頻繁地跟vue的生命周期打交道

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

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

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 */)  // ...}

可以看到這里有一個vm._isMounted的判斷，也就是說組件在mounted后才會去執行這個鉤子函數同時這里實例化了一個watcher去監聽vm上的數據變化重新渲染

beforeDestroy 和 destroyed 鉤子函數的執行時機在組件銷毀的階段注意mounted和destroyed的執行過程都是先子后父從下圖可以看到初始化vue到最終渲染的整個過程

注冊組件

在開發一個組件的過程中往往會用到其他的組件組件注冊的語法如下

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

或

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

注冊組件實際上是一個合并的過程，合并option再創建vnode。

由于博主在這一部分學識尚淺，暫不做過多的描述

下載插件

開發的過程中很可能需要一些其他的插件如Element等使用一般來說通過Vue.use()來下載插件，并且會阻止多次注冊相同的插件

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方法的源碼，可以看到其參數只能是object或者function，然后判斷其是否被注冊過然后再調用該插件的install方法

可以看到 Vue 提供的插件注冊機制很簡單，每個插件都需要實現一個靜態的 install 方法，當我們執行 Vue.use 注冊插件的時候，就會執行這個 install 方法，并且在這個 install 方法的第一個參數我們可以拿到 Vue 對象，這樣的好處就是作為插件的編寫方不需要再額外去import Vue 了。

路由

路由的主要作用是根據不同的路徑映射到不同的視圖，一般我們用官方插件vue-router來解決路由的問題

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

在vue-router的類定義中有在vue原型上定義的 $router 和 $route 兩個屬性的get方法，這也是為什么可以在組件實例上訪問 this.$router和this.$route

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

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

所以在執行該鉤子函數時，如果有傳入router實例，則會執行router.init方法匹配是利用matcher匹配，并且會生成用戶的路由表（具體細節暫時不表）當我們點擊router-link的時候，會通過一系列函數找到完整的url，執行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)  }}

該方法會更新瀏覽器的url地址，并且把當前url壓入歷史棧中有一個專門的監聽器會監聽歷史棧的變化情況

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)      }    })  })}

當點擊瀏覽器的返回按鈕時,會觸發popstate事件，通過同樣的方法拿到當前要跳轉的url并進行路徑轉換

在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]

這個循環就是從當前的的父節點向上找，一直找到根節點（vue實例），遍歷完成后，就根據當前遍歷的深度和路徑找到對應的組件并進行渲染在router-view的最后有根據 component 渲染出對應的組件 vonde：

return h(component, data, children)

hash模式：單頁應用標配，hash發生變化的url都會被瀏覽器記錄下來history模式：可以進行切換和修改（歷史狀態），使得路由配置更自由其他vuex

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。該狀態管理模式包含以下幾個部分：

state：驅動數據的應用源view：以聲明方法將state映射到視圖actions：響應在view上用戶的輸入導致的狀態變化以下是一個簡單的數據流模式

需要注意以下兩點

Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。

參考書籍《vue.js技術揭秘》

關鍵詞：