實踐開發：vue框架重點知識分析

一個VUE項目的主樹：

 

     assets文件夾是放靜態資源；

     components是放組件；

     router是定義路由相關的配置;

     view視圖；

     app.vue是一個應用主組件；

     main.js是入口文件

 知識點：

 

1.MVC和MVVM

MVC是Model-View- Controller的簡寫，分別表示：

      Model（數據模型），用於存放數據

      View（視圖），也就是用戶界面

      Controller（y業務邏輯）是Model和View的協調者，Controller把Model中的數據拿過來給View使用

      關係：用戶操做> View (負責接受用戶的輸入操做)>Controller（業務邏輯處理）>Model（數據持久化）>View（將結果經過View反饋給用戶）

      缺點：1.全部業務邏輯都在Controller裏操做，邏輯複雜且不利於維護，
　　　　　2.大量的DOM 操做使頁面渲染性能下降，加載速度變慢，影響用戶體驗。
　　　　    3.當 Model 頻繁發生變化，須要主動更新到View ；當用戶的操做致使Model發生變化，一樣須要將變化的數據同步到Model中， 這樣的工做不只繁瑣，並且很難維護複雜多變的數據狀態。

MVVM是Model-View-ViewModel的簡寫，分別表示：

  　Movel（數據模型）

　    View（視圖）
　　ViewModel 是一個同步View 和 Model的對象

       核心是雙向數據綁定，View和Model之間並無直接的聯繫，是經過ViewModel進行交互，View的變更，自動反映在ViewModel上，反之亦然，這樣就保證視圖和數據的一致性。

2.vue的優勢是什麼？

     ·   低耦合。視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。

       · 可重用性。一些視圖邏輯放在一個ViewModel裏面，讓不少view重用視圖邏輯。

      ·  獨立開發。開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計。

       · 可測試。界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫。

3.vue的生命週期

     第一對用於簡單的ajax請求，頁面初始化。

          beforeCreate

             實例對象剛建立，元素DOM和數據都尚未初始化，沒有綁定屬性。

          created

            實例對象完成建立，屬性已綁定，但DOM未生成，數據data已經初始化完成，方法也已經能夠調用，可是DOM爲渲染。

        第二對立刻渲染真實的DOM，獲取vnode信息，ajax請求。

         beforeMount

             組件掛載以前觸發，虛擬DOM建立已完成。DOM未完成掛載，數據也初始化完成，可是數據的雙向綁定仍是顯示{{}}，這是由於Vue採用了Virtual DOM（虛擬Dom）技術，先佔住了一個坑。

         mounted

            組件掛載完成觸發，真實DOM完成，數據和DOM都完成掛載，在上一個週期佔位的數據把值給渲染進去。通常請求會放在這個地方，由於這邊請求改變數據以後恰好能渲染。

        第三對

         beforeUpdate

            數據更新前觸發，diff算法對比以後從新渲染。只要是頁面數據改變了都會觸發，數據更新以前，頁面數據仍是原來的數據，當你請求賦值一個數據的時候會執行這個週期，若是沒有數據改變不執行。

        updated

            組件更新完成，不能更改數據，負責死循環。只要是頁面數據改變了都會觸發，數據更新完畢，頁面的數據是更新完成的。beforeUpdate和updated要謹慎使用，由於頁面更新數據的時候都會觸發，在這裏操做數據很影響性能和容易死循環。

       第四對

        beforeDestroy

            實例對象銷燬以前觸發，清除計時器和事件。這個週期是在組件銷燬以前執行，在我項目開發中，以爲這個其實有點相似路由鉤子beforeRouterLeave,都是在路由離開的時候執行，只不過beforeDestroy沒法阻止路由跳轉，可是能夠作一些路由離開的時候操做，由於這個週期裏面還可使用data和method。好比一個倒計時組件，若是在路由跳轉的時候沒有清除，這個定時器仍是在的，這時候就能夠在這個裏面清除計時器。

       Destroyed

          實例對象銷燬後觸發，剩餘DOM空殼。

4.vue雙向綁定原理

   Vue數據雙向綁定（即數據響應式），是利用了Object.defineProperty()數據劫持從新定義了，對象獲取屬性值get和設置屬性值set的操做來實現的。

        監聽器Observer，劫持並監聽全部屬性，有變更的，就通知訂閱者。
        訂閱者Watcher，能夠收到屬性的變化通知並執行相應的函數，從而更新視圖。
        解析器Compile，解析每一個節點的相關指令，並根據初始化模板data數據以及初始化相應的訂閱器。替換數據v-model,  v-on

5.組件的傳值

 a.父組件與子組件傳值

   父組件經過標籤上面定義傳值  ：eg='data'  父組件中 data(){return {data:'egdata'}}.
   子組件經過props方法接受數據 props:['eg'] ,  在props 中添加了元素以後，就不須要在 data 中再添加變量了.

     b.子組件向父組件傳遞數據
  子組件經過$emit方法傳遞參數觸發事件，在父組件監聽事件$on( )

  子組件部分:

 

    父組件中：

 

   c.同級傳值

               1.query或params傳參，this.$router.push( )

               2.sessionstore傳參

6.路由之間跳轉

    聲明式（標籤跳轉） 編程式（ js跳轉）

          ①.直接修改地址欄中的路由地址    ②經過router-link實現跳轉   ③經過js的編程的方式

           vue路由兩種方式：name和<router-link>中的to傳參

            <router-link:to = "{name: xxx, params: { key :value }}"> valuestring </router-link>

            

           vue-router利用url傳參

7.vue計算屬性

   watch：監聽屬性，監聽數的變化，監聽對象。

   computed：計算屬性，對屬性業務邏輯的操做，不循環。它對數據處理後，緩存內存裏面。方法對任務操做。

8.vuex是什麼？怎麼使用？哪一種功能場景使用它？

    vue框架中狀態管理，處理組件間的通信。

    使用：在main.js引入store，注入。新建一個目錄store，….. export 。

 場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車

   main.js:

      import store from './store'

      new Vue({

     el:'#app',

     store

     })

  屬性有五種，分別是 State、 Getter、Mutation 、Action、 Module

·  vuex的State特性
           A、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於通常Vue對象裏面的data
           B、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新
           C、它經過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中

· vuex的Getter特性
           A、getters 能夠對State進行計算操做，它就是Store的計算屬性
           B、 雖然在組件內也能夠作計算屬性，可是getters 能夠在多組件之間複用
           C、 若是一個狀態只在一個組件內使用，是能夠不用getters

·  vuex的Mutation特性
           Action 相似於 mutation，不一樣在於：Action 提交的是 mutation，而不是直接變動狀態；Action 能夠包含任意異步操做。

（3）不用Vuex會帶來什麼問題？

·         可維護性會降低，想修改數據要維護三個地方；

·         可讀性會降低，由於一個組件裏的數據，根本就看不出來是從哪來的；

·         增長耦合，大量的上傳派發，會讓耦合性大大增長，原本Vue用Component就是爲了減小耦合，如今這麼用，和組件化的初衷相背。

9.Vue中引入組件的步驟?

     1）採用ES6的import ... from ...語法或CommonJS的require()方法引入組件
     2）對組件進行註冊,代碼以下

    1.  // 註冊

    2.  Vue.component('my-component', {

        template: '<div>A custom component!</div>'

      })

      使用組件<my-component></my-component>

10.vue.cli中怎樣使用自定義的組件？

    第一步：在components目錄新建你的組件文件（smithButton.vue），script必定要export default {

    第二步：在須要用的頁面（組件）中導入：import smithButton from ‘../components/smithButton.vue’

    第三步：注入到vue的子組件的components屬性上面,components:{smithButton}

    第四步：在template視圖view中使用，<smith-button>  </smith-button>
    問題有：smithButton命名，使用的時候則smith-button。

11.vue的虛擬DOM 

     Virtual DOM算法，簡單總結下包括幾個步驟：

1. 用JS對象描述出DOM樹的結構，而後在初始化構建中，用這個描述樹去構建真正的DOM，並實際展示到頁面中
2. 當有數據狀態變動時，從新構建一個新的JS的DOM樹，經過新舊對比DOM數的變化diff，並記錄兩棵樹差別
3. 把步驟2中對應的差別經過步驟1從新構建真正的DOM，並從新渲染到頁面中，這樣整個虛擬DOM的操做就完成了，視圖也就更新了

12.自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？

  全局定義指令：在vue對象的directive方法裏面有兩個參數，一個是指令名稱，另一個是函數。

     組件內定義指令：directives

  鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）

  鉤子函數參數：el、binding

13.怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？ 

  在router目錄下的index.js文件中，對path屬性加上/:id。  使用router對象的params.id

14.active-class是哪一個組件的屬性？嵌套路由怎麼定義？

 vue-router模塊的router-link組件。
   嵌套路由顧名思義就是路由的多層嵌套。 一級路由裏面使用children數組配置子路由，就是嵌套路由。

15.爲何避免 v-if 和 v-for 用在一塊兒？

 當 Vue 處理指令時，v-for 比 v-if 具備更高的優先級，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。經過v-if 移動到容器元素，不會再重複遍歷列表中的每一個值。

16.爲何使用key？

  當有相同標籤名的元素切換時，須要經過 key 特性設置惟一的值來標記以讓 Vue 區分它們，不然 Vue 爲了效率只會替換相同標籤內部的內容。

17.4種vue當中的指令和它的用法

    v-if：判斷是否隱藏；v-for：數據循環；v-bind:class：綁定一個屬性；v-model：實現雙向綁定

18.怎麼定義vue-router的動態路由以及如何獲取傳過來的動態參數？

   在router目錄下的index.js文件中，對path屬性加上/:id。使用router對象的params.id。

19.<keep-alive></keep-alive>的做用是什麼?

         <keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例，主要用於保留組件狀態或避免從新渲染。

20.v-show和v-if指令的共同點和不一樣點

         v-show指令是經過修改元素的display的CSS屬性讓其顯示或者隱藏

   v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果

21.vue中v-if與v-show的區別以及使用場景

     v-if 是經過控制dom節點的存在與否來控制元素的顯隱；

    v-show是經過設置DOM元素的display樣式，block爲顯示，none爲隱藏；

    v-if 有更高的切換消耗；

    v-show有更高的初始渲染消耗；

    v-if切換局部編譯/卸載的過程當中合適地銷燬和重建內部的事件監聽和子組件；

    v-show只是簡單的基於css切換；

  場景：若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好

·         v-show指令是經過修改元素的display的CSS屬性讓其顯示或者隱藏

·         v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果

22.vue經常使用的修飾符

   事件修飾符

   .stop：用來阻止單擊事件的冒泡

   .self：表示當前事件發生在元素自己而不是子元素的時候進行觸發

   .prevent：表示提交事件再也不進行從新加載

   .capture：表示事件傾聽，在事件發生的時候進行調用

 表單修飾符（重點）：

   .lazy - 取代 input 監聽 change 事件

   .number - 輸入字符串轉爲有效的數字

   .trim - 輸入首尾空格過濾

 按鍵修飾符：

  .enter

  .tab

  .delete

鼠標按鍵修飾符

  .left

  .right

  .middle

23.axios是什麼？怎麼使用？它實現的登陸流程？

    登錄流程爲：1、提交登錄表單，拿到後臺返回的數據 2、將數據存入vuex

   登陸狀態token,和用戶名user存在sessionStorage裏，以便組件使用,若是token爲true表示用戶已經登錄

   axios是基於promise（諾言）用於瀏覽器和node.js是http客戶端。

   axios的做用是什麼呢：axios主要是用於向後臺發起請求的，還有在請求中作更可能是可控功能。

 特色：支持瀏覽器和node.js

            支持promise

            能攔截請求和響應

            能轉換請求和響應數據

            能取消請求

            自動轉換JSON數據

             瀏覽器支持防止CSRF（跨站請求僞造）