本篇文章給大家?guī)?lái)了關(guān)于vue技術(shù)棧的相關(guān)知識(shí)，希望對(duì)大家有幫助。

vue筆記一：Vue技術(shù)棧

1、node.js

如果想要javascript代碼能夠在服務(wù)器端運(yùn)行就必須提供一個(gè)Javascript的運(yùn)行環(huán)境(runtime environment)，這就是node.js。

node.js是對(duì)Chrome V8引擎進(jìn)行了封裝，是一個(gè)能讓JavaScript運(yùn)行在服務(wù)端的開發(fā)平臺(tái)，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務(wù)端語(yǔ)言平起平坐的腳本語(yǔ)言。

2、 npm

node.js的包管理工具，用于統(tǒng)一管理我們前端項(xiàng)目中需要用到的包、插件、工具、命令等，便于開發(fā)和維護(hù)。
npm會(huì)根據(jù)package.json配置文件中的插件名稱和對(duì)應(yīng)的版本號(hào)的依賴配置，通過npm install命令來(lái)下載插件，下載后自動(dòng)放在node_modules目錄下面。

3、ES6

Javascript的新版本，ECMAScript6的簡(jiǎn)稱。利用ES6我們可以簡(jiǎn)化我們的JS代碼，同時(shí)利用其提供的強(qiáng)大功能來(lái)快速實(shí)現(xiàn)JS邏輯。

4、Babel

一款將ES6代碼轉(zhuǎn)化為瀏覽器兼容的ES5代碼的插件。

5、項(xiàng)目構(gòu)建工具vue-cli

腳手架工具，搭建開發(fā)所需要的環(huán)境和自動(dòng)生成Vue項(xiàng)目的生成目錄架構(gòu)。

6、路由vue-router

創(chuàng)建單?應(yīng)?，我們的單?應(yīng)?只做路由切換，組件拼湊成的 ??映射成路由 路由是我們單?應(yīng)?的核?插件

7、狀態(tài)管理vuex

狀態(tài)管理庫(kù)，可理解為全局?jǐn)?shù)據(jù)集中地推薦?項(xiàng)?盡量別?vuex，會(huì)顯得有點(diǎn)繁瑣，bus總線機(jī)制完全可以處理了。用于統(tǒng)一管理我們項(xiàng)目中各種數(shù)據(jù)的交互和重用，存儲(chǔ)我們需要用到數(shù)據(jù)對(duì)象。

8、http請(qǐng)求?具axios

?個(gè)經(jīng)過封裝的ajax,可以根據(jù)??的項(xiàng)?情況再進(jìn)?封裝 axios是經(jīng)過了ES6的promise封裝的

9、文件打包工具webpack

可以將我們的前端項(xiàng)目文件統(tǒng)一打包壓縮至js中，并且可以通過vue-loader等加載器實(shí)現(xiàn)語(yǔ)法轉(zhuǎn)化與加載。
將TypeScript、SCSS、LESS、stylus(CSS預(yù)處理器)等不能直接被瀏覽器解析的技術(shù)，翻譯成瀏覽器可以直接解析的代碼。

10、Vue.js

它是一個(gè)輕量級(jí)的MVVM框架。

響應(yīng)式：頁(yè)面響應(yīng)數(shù)據(jù)變化

編程范式：聲明式編程（js是命令式編程）

數(shù)據(jù)雙向綁定(當(dāng)修改視圖時(shí)數(shù)據(jù)也會(huì)賦值給model，當(dāng)更改model的時(shí)候也會(huì)反應(yīng)到視圖上)。

Vue實(shí)例

var vm = new Vue({   // 選項(xiàng)   el:"#app",  //掛載要管理的元素，【string（CSS 選擇器）| Element（HTMLElement 實(shí)例）】只在用 new 創(chuàng)建實(shí)例時(shí)生效。   data:{     //定義數(shù)據(jù)，【Object | Function】組件的定義只接受 function   	message:'hello world',   },   methods:{  //方法【{ [key: string]: Function }】，不應(yīng)該使用箭頭函數(shù)來(lái)定義 method 函數(shù)     plus: function () {       this.a++     }   }})

雖然沒有完全遵循 MVVM 模型，但是 Vue 的設(shè)計(jì)也受到了它的啟發(fā)。因此在文檔中經(jīng)常會(huì)使用 vm (ViewModel 的縮寫) 這個(gè)變量名表示 Vue 實(shí)例。

當(dāng)一個(gè) Vue 實(shí)例被創(chuàng)建時(shí)，它將 data 對(duì)象中的所有的 property 加入到 Vue 的響應(yīng)式系統(tǒng)中。當(dāng)這些 property 的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”，即匹配更新為新的值。

值得注意的是只有當(dāng)實(shí)例被創(chuàng)建時(shí)就已經(jīng)存在于 data 中的 property 才是響應(yīng)式的。也就是說(shuō)如果你添加一個(gè)新的 property，比如：vm.b = 'hi' ，那么對(duì) b 的改動(dòng)將不會(huì)觸發(fā)任何視圖的更新。如果你知道你會(huì)在晚些時(shí)候需要一個(gè) property，但是一開始它為空或不存在，那么你僅需要設(shè)置一些初始值。比如：

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

這里唯一的例外是使用 Object.freeze()，這會(huì)阻止修改現(xiàn)有的 property，也意味著響應(yīng)系統(tǒng)無(wú)法再追蹤變化。Object.freeze() 方法可以凍結(jié)一個(gè)對(duì)象。一個(gè)被凍結(jié)的對(duì)象再也不能被修改；凍結(jié)了一個(gè)對(duì)象則不能向這個(gè)對(duì)象添加新的屬性，不能刪除已有屬性，不能修改該對(duì)象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結(jié)一個(gè)對(duì)象后該對(duì)象的原型也不能被修改。freeze() 返回和傳入的參數(shù)相同的對(duì)象。

在實(shí)例掛載之后，el ,data元素可以用 vm.$el ,vm.$data訪問。

vue生命周期以及不同生命周期下的應(yīng)用

生命周期：一個(gè)對(duì)象從創(chuàng)建到消亡的過程。

生命周期鉤子:created、mounted、updated、destroyed

以上是vue官網(wǎng)上的生命周期的方法，大致劃分一下分為創(chuàng)建前/后，掛載前/后，更新前/后，銷毀前/后這四個(gè)階段。各個(gè)階段的狀態(tài)總結(jié)如下：

beforeCreate：在beforeCreate生命周期執(zhí)行時(shí)，data和methods中的數(shù)據(jù)還未初始化，所以此時(shí)不能使用data中的數(shù)據(jù)和methods中的方法

created：data 和 methods初始化完畢，此時(shí)可以使用methods 中的方法和data 中的數(shù)據(jù)

beforeMount：template模版已經(jīng)編譯好，但還未掛載到頁(yè)面，此時(shí)頁(yè)面還是上一個(gè)狀態(tài)

mounted：此時(shí)Vue實(shí)例初始化完成了，DOM掛載完畢，可以直接操作dom或者使用第三發(fā)dom庫(kù)

beforeUpdate： 此時(shí)data已更新，但還未同步頁(yè)面

updated：data和頁(yè)面都已經(jīng)更新完成

beforeDestory：Vue實(shí)例進(jìn)入銷毀階段，但所有的 data 和 methods ，指令， 過濾器等都處于可用狀態(tài)

destroyed： 此時(shí)組件已經(jīng)被銷毀，data，methods等都不可用

根據(jù)以上介紹，頁(yè)面第一次加載時(shí)會(huì)執(zhí)行 beforeCreate， created， beforeMount， mounted這四個(gè)生命周期，所以我們一般在created階段處理http請(qǐng)求獲取數(shù)據(jù)或者對(duì)data做一定的處理， 我們會(huì)在mounted階段操作dom，比如使用jquery，或這其他第三方dom庫(kù)。其次，根據(jù)以上不同周期下數(shù)據(jù)和頁(yè)面狀態(tài)的不同，我們還可以做其他