世界快資訊：Vue入門淺析

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

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

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

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

(資料圖片)

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

我們在本地運行vue項目，常見的指令就是npm run serve/dev;與其說是指令，不如說是腳本我們通常會在package.json中配置 script 字段作為 NPM 的執(zhí)行腳本。以個人開發(fā)項目為例，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)我們在終端運行npm run serve時，實際上運行的是vue-cli-service serve通過這個腳本去構(gòu)建整個vue項目

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

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

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

src/main.js

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

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

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

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

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

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

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

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

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

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

Virtual DOM介紹

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

生命周期

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

beforeCreate 和 created 函數(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 到真實 DOM 后，執(zhí)行 mouted 鉤子。beforeUpdate 和 updated 的鉤子函數(shù)執(zhí)行時機都應(yīng)該是在數(shù)據(jù)更新的時候，比如雙向綁定等等

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后才會去執(zhí)行這個鉤子函數(shù)同時這里實例化了一個watcher去監(jiān)聽vm上的數(shù)據(jù)變化重新渲染

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

注冊組件

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

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

或

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

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

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

下載插件

開發(fā)的過程中很可能需要一些其他的插件如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方法的源碼，可以看到其參數(shù)只能是object或者function，然后判斷其是否被注冊過然后再調(diào)用該插件的install方法

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

路由

路由的主要作用是根據(jù)不同的路徑映射到不同的視圖，一般我們用官方插件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)    // ...  }}  

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

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

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)點擊瀏覽器的返回按鈕時,會觸發(fā)popstate事件，通過同樣的方法拿到當(dāng)前要跳轉(zhuǎn)的url并進行路徑轉(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]

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

return h(component, data, children)

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

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

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

需要注意以下兩點

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

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

關(guān)鍵詞：