再來討論vue開發中的那些事

vue路由的鉤子函式幾種

自從接觸前端開發以來，經歷了dw視覺化編輯html的前端，曾經以為jQuery很了不起了，操作dom真是太方便了，而且可以輕鬆的實現動畫互動，資料請求，一度的ajax讓人讚不絕口，然而當我還沉浸再前端的開發喜悅中時，一大堆開發框架和庫如雨後春筍般層出不窮，amazeui讓我們不用重新造輪子，快速搭建網站，開發起來也快了很多，然而前端的技術發展真是太快了，前端模組化的開發又來了，大專案的架構有了新的解決方案。

在vue出現之前react和angular佔據大公司開發的首選框架，但是學習成本相對較高，語法晦澀難懂，需要在實踐中理解。雖然vue僅僅是mvvm中的view層，但是其輕量無縫融入現有專案的能力備受青睞。

vue。js 是採用資料劫持結合釋出者-訂閱者模式的方式，透過Object。defineProperty（）來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。 具體步驟： 第一步：需要observe的資料物件進行遞迴遍歷，包括子屬性物件的屬性，都加上 setter和getter 這樣的話，給這個物件的某個值賦值，就會觸發setter，那麼就能監聽到了資料變化 第二步：compile解析模板指令，將模板中的變數替換成資料，然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函式，新增監聽資料的訂閱者，一旦資料有變動，收到通知，更新檢視 第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要做的事情是：

1、在自身例項化時往屬性訂閱器（dep）裡面新增自己

2、自身必須有一個update（）方法

3、待屬性變動dep。notice（）通知時，能呼叫自身的update（）方法，並觸發Compile中繫結的回撥，則功成身退。

4：MVVM作為資料繫結的入口，整合Observer、Compile和Watcher三者，透過Observer來監聽自己的model資料變化，透過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到資料變化 -> 檢視更新；檢視互動變化（input） -> 資料model變更的雙向繫結效果。

由於vue不需要進行資料髒檢查。因此，vue在效能上更高效，但是代價是對於ie9以下的瀏覽器無法支援。

再來看看vue的使用小技巧：

怎麼在vue-router中使用動態路由，獲取傳遞的引數：在路由定義的path上加上/：id然後透過params。id獲取，或者？：id，透過query。id獲取

vue-router的鉤子函式有哪些：

1）：是全域性導航鉤子：router。beforeEach（to，from，next），作用：跳轉前進行判斷攔截。

router。afterEach（（to，from）=>{}） 跳轉後進行操作

2）：元件內的鉤子

元件內鉤子函式

3）：單獨路由獨享元件在路由定義中

path：‘’，

beforeEnter：（to，from， next）=>{}

3。路由meta的使用，在meta中我們可以定義頁面的一些自定義屬性，比如頁面分享引數，或者頁面展示控制等。

4。vuex的使用，作為狀態管理器，合理使用專案會更加靈活易維護。對於應用共享的資料，我們透過vuex統一讀取和設定，保證資料的一致性；對於頁面內私有的則沒有必要使用vuex，否則會造成vuex的濫用和臃腫。

5。如何選擇css預處理語言sass、less，首先他們都是是動態的樣式語言，是CSS預處理器，是CSS上的一種抽象層。他們都是一種特殊的語法/語言而編譯成CSS。

1）：變數符不一樣，less是@，而Sass是$；

2）：Sass支援條件語句，可以使用if{}else{}，for{}迴圈等等。而Less不支援；

3）：Sass是基於Ruby的，是在服務端處理的，而Less是需要引入less。js來處理Less程式碼輸出Css到瀏覽器

6。生命週期鉤子的一些使用方法：

1）：beforecreate ： 可以在這加個loading事件，在載入例項時觸發

2）：created ： 初始化完成時的事件寫在這裡，如在這結束loading事件，非同步請求也適宜在這裡呼叫

3）：mounted ： 掛載元素，獲取到DOM節點

4）： updated ： 如果對資料統一處理，在這裡寫上相應函式

5）：beforeDestroy ： 可以做一個確認停止事件的確認框

6）：nextTick ： 更新資料後立即操作dom