技術文章 » vue技術筆記之Vue技術棧（圖文詳解）

vue技術筆記之Vue技術棧（圖文詳解）

2022-01-24 19:00:48
本篇文章給大家帶來了關於vue技術棧的相關知識，希望對大家有幫助。

vue筆記一：Vue技術棧

1、node.js

如果想要javascript程式碼能夠在伺服器端執行就必須提供一個Javascript的執行環境(runtime environment)，這就是node.js。

node.js是對Chrome V8引擎進行了封裝，是一個能讓JavaScript執行在伺服器端的開發平臺，它讓JavaScript成為與PHP、Python、Perl、Ruby等伺服器端語言平起平坐的指令碼語言。

2、 npm

node.js的包管理工具，用於統一管理我們前端專案中需要用到的包、外掛、工具、命令等，便於開發和維護。
npm會根據package.json組態檔中的外掛名稱和對應的版本號的依賴設定，通過npm install命令來下載外掛，下載後自動放在node_modules目錄下面。

3、ES6

Javascript的新版本，ECMAScript6的簡稱。利用ES6我們可以簡化我們的JS程式碼，同時利用其提供的強大功能來快速實現JS邏輯。

4、Babel

一款將ES6程式碼轉化為瀏覽器相容的ES5程式碼的外掛。

5、專案構建工具vue-cli

腳手架工具，搭建開發所需要的環境和自動生成Vue專案的生成目錄架構。

6、路由vue-router

建立單⻚應⽤，我們的單⻚應⽤只做路由切換，元件拼湊成的 ⻚⾯對映成路由 路由是我們單⻚應⽤的核⼼外掛

7、狀態管理vuex

狀態管理庫，可理解為全域性資料集中地推薦⼩項⽬儘量別⽤vuex，會顯得有點繁瑣，bus匯流排機制完全可以處理了。用於統一管理我們專案中各種資料的互動和重用，儲存我們需要用到資料物件。

8、http請求⼯具axios

⼀個經過封裝的ajax,可以根據⾃⼰的項⽬情況再進⾏封裝 axios是經過了ES6的promise封裝的

9、檔案打包工具webpack

可以將我們的前端專案檔案統一打包壓縮至js中，並且可以通過vue-loader等載入器實現語法轉化與載入。
將TypeScript、SCSS、LESS、stylus(CSS前處理器)等不能直接被瀏覽器解析的技術，翻譯成瀏覽器可以直接解析的程式碼。
在這裡插入圖片描述

10、Vue.js

它是一個輕量級的MVVM框架。

響應式：頁面響應資料變化

程式設計正規化：宣告式程式設計（js是指令式程式設計）

資料雙向繫結(當修改檢視時資料也會賦值給model，當更改model的時候也會反應到檢視上)。

在這裡插入圖片描述

Vue範例

var vm = new Vue({
  // 選項
  el:"#app",  //掛載要管理的元素，【string（CSS 選擇器）| Element（HTMLElement 範例）】只在用 new 建立範例時生效。
  data:{     //定義資料，【Object | Function】元件的定義只接受 function
  	message:'hello world',
  },
  methods:{  //方法【{ [key: string]: Function }】，不應該使用箭頭函數來定義 method 函數 
   plus: function () {
      this.a++
    }
  }})

雖然沒有完全遵循 MVVM 模型，但是 Vue 的設計也受到了它的啟發。因此在檔案中經常會使用 vm (ViewModel 的縮寫) 這個變數名錶示 Vue 範例。

當一個 Vue 範例被建立時，它將 data 物件中的所有的 property 加入到 Vue 的響應式系統中。當這些 property 的值發生改變時，檢視將會產生「響應」，即匹配更新為新的值。

值得注意的是只有當範例被建立時就已經存在於 data 中的 property 才是響應式的。也就是說如果你新增一個新的 property，比如：vm.b = 'hi' ，那麼對 b 的改動將不會觸發任何檢視的更新。如果你知道你會在晚些時候需要一個 property，但是一開始它為空或不存在，那麼你僅需要設定一些初始值。比如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null}

這裡唯一的例外是使用 Object.freeze()，這會阻止修改現有的 property，也意味著響應系統無法再追蹤變化。Object.freeze() 方法可以凍結一個物件。一個被凍結的物件再也不能被修改；凍結了一個物件則不能向這個物件新增新的屬性，不能刪除已有屬性，不能修改該物件已有屬性的可列舉性、可設定性、可寫性，以及不能修改已有屬性的值。此外，凍結一個物件後該物件的原型也不能被修改。freeze() 返回和傳入的引數相同的物件。

在範例掛載之後，el ,data元素可以用 vm.$el ,vm.$data存取。

vue生命週期以及不同生命週期下的應用

生命週期：一個物件從建立到消亡的過程。

生命週期勾點:created、mounted、updated、destroyed

在這裡插入圖片描述

以上是vue官網上的生命週期的方法，大致劃分一下分為建立前/後，掛載前/後，更新前/後，銷燬前/後這四個階段。各個階段的狀態總結如下：

beforeCreate：在beforeCreate生命週期執行時，data和methods中的資料還未初始化，所以此時不能使用data中的資料和methods中的方法

created：data 和 methods初始化完畢，此時可以使用methods 中的方法和data 中的資料

beforeMount：template模版已經編譯好，但還未掛載到頁面，此時頁面還是上一個狀態

mounted：此時Vue範例初始化完成了，DOM掛載完畢，可以直接操作dom或者使用第三發dom庫

beforeUpdate： 此時data已更新，但還未同步頁面

updated：data和頁面都已經更新完成

beforeDestory：Vue範例進入銷燬階段，但所有的 data 和 methods ，指令， 過濾器等都處於可用狀態

destroyed： 此時元件已經被銷燬，data，methods等都不可用

根據以上介紹，頁面第一次載入時會執行 beforeCreate， created， beforeMount， mounted這四個生命週期，所以我們一般在created階段處理http請求獲取資料或者對data做一定的處理， 我們會在mounted階段操作dom，比如使用jquery，或這其他第三方dom庫。其次，根據以上不同週期下資料和頁面狀態的不同，我們還可以做其他更多操作，所以說每個生命週期的發展狀態非常重要，一定要理解，這樣才能對vue有更多的控制權。

相關推薦：

以上就是vue技術筆記之Vue技術棧（圖文詳解）的詳細內容，更多請關注TW511.COM其它相關文章！