vue學習及應用也有一年多了，但一直沒能系統的總結過。多少有些遺憾。正好趕上找工作，就趁此鞏固、總結下吧。

一、vue生命週期函式

beforeCreate ，  created             // 建立前， 建立完成
beforeMount  ，  mounted            //  掛載前， 掛載完成
beforeUpdate  ， updated           //   更新前， 更新完成
beforeDestory ， destroyed        //  銷燬前， 銷燬完成

二、vue 生命週期鉤子的 this

生命週期鉤子的this上下文指向呼叫它的vue例項
//  說明：不要在選項屬性或回撥上使用箭頭函式，因為箭頭函式是和父級上下文繫結在一起的
 

//  this不會是如你所預期的vue例項，經常導致 "Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function "之類的錯誤。

三、響應式屬性

1、當一個vue例項被建立時，它向vue的響應式系統中加入了其data物件中能找到的所有的屬性。當這些屬性的值發生改變時，檢視將會產生"響應"，即匹配更新為新的值。
但是隻有當例項被建立時data物件中已經存在的屬性才是響應式的。所以在一開始不會使用後面卻要使用的屬性，最好一開始就宣告到data
 
中，初始化為空值即可。
2、使用Object.freeze(),會阻止修改現有屬性，意味著響應系統無法在追蹤屬性變化。

四、模板語法

1、在模板資料繫結時可以用單個javascript表示式，
2、模板表示式都被放在沙盒中，只能訪問全域性變數的一個白名單，如 Math和Date，你不應該在模板表示式中試圖訪問使用者定義的全域性變數。

五、計算屬性和偵聽器

1、計算屬性：
將同一函式定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的計算屬性是基於它們的依賴進行快取的。
計算屬性只有在它的相關依賴發生改變時才會重新求值，多次訪問計算屬性會立即返回之前的計算結果，而不必再次執行函式。
而對於方法，每當觸發重新渲染時，呼叫方法將總會再次執行函式。

 2、偵聽器：watch
 當需要在資料變化時執行非同步或開銷較大的操作時使用。
 

六、條件渲染

1.v-if: 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。
2.v-if也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
3.v-show: v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
4.v-show: 不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於CSS 進行切換。
5.v-if與v-show對比：v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。
6.v-if與v-for:當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先順序。
7.v-if可以與計算屬性和方法一起使用：但方法和計算屬性名後不能有(),會報錯。

七、列表渲染

/** 1、v-for迭代陣列 **/
<div v-for="(item,index) in items">{{item}}</div>
/**說明:item是迭代的元素，index是索引。可用 of 代替 in 。 **/

/** 2、v-for迴圈物件 **/
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>
/**value 是屬性值，key 是屬性名，index 是索引。 **/

/** 3、key: 為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的且唯一的 id。
注： 建議儘可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴預設行為以獲取效能上的提升。 *

/** 4、陣列更新檢測：以下方法將會觸發檢視更新 **/

//變異方法：會改變原始陣列
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
//非變異方法：不會改變原始陣列，返回新陣列
    filter)
    concat()
    slice()

注：由於 JavaScript 的限制，Vue 不能檢測以下變動的陣列：當你利用索引直接設定一個項時，例如：
vm.items[indexOfItem] = newValue
當你修改陣列的長度時，例如：
vm.items.length = newLength
解決以上問題，使用Vue.set和splice方法。

/** 5、物件更改檢測注意事項：**/
由於 JavaScript 的限制，Vue 不能檢測物件屬性的新增或刪除，對於已經建立的例項，Vue不能動態新增根級別的響應屬性。最好一開始就宣告在data中。但可以使用 Vue.set(object, key, value) 方法向巢狀物件新增響應式屬性。即object只能是data物件下的的屬性物件。或者使用
vm.$set（object, key, value）

為已有物件賦予多個新屬性使用一下方法：
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

/** 6、顯示過濾/排序結果：**/

想要顯示一個數組的過濾或排序副本，而不實際改變或重置原始資料。在這種情況下，可以建立返回過濾或排序陣列的計算屬性。

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}
在計算屬性不適用的情況下 (例如，在巢狀 v-for 迴圈中) 可以使用一個method 方法：
<li v-for="n in even(numbers)">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 == 0
    })
  }
}


/** 7、v-for 與 v-if:**/
當它們處於同一節點，v-for 的優先順序比 v-if 更高，這意味著 v-if 將分別重複運行於每個 v-for 迴圈中。
如果目的是有條件地跳過迴圈的執行，那麼可以將 v-if 置於外層元素 (或template)上。如：

  <ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

八、過濾器

Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示:
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

1.在一個元件中自定義本地過濾器
<div id='example'>
            {{message | capitalize}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: '#example',
        data: {
            message: 'hello world'
        },
        filters: {
            capitalize: function (value){
                return value.toUpperCase();
            }
        }
    });
</script>

2.定義全域性過濾器
<div id='example'>
    {{name | capitalize}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    Vue.filter('capitalize', function (value) {

        return value[0].toUpperCase() + value.slice(1);
    });
    new Vue({
        el: '#example',
        data: {
            name: 'john'
        }
    });
</script>
3.過濾器函式總接受表示式的值作為第一個引數，上述例子中， capitalize 過濾器函式將 message 的值作為第一個引數。
4.過濾器可以串聯：
<div id='example'>
            {{name | filterA | filterB}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
        el: '#example',
        data: {
            name: 'john'
        },
        filters: {
            filterA: function (value) {
                return value[0].toUpperCase() + value.slice(1);
            },
            filterB: function (value) {
                return value.slice(0,value.length-1) + value[value.length-1].toUpperCase();
            }
        }
});
</script>

5.過濾器可以接受引數
{{ message | filterA('arg1', arg2) }}

九、響應式原理

Vue的特性之一是其非侵入性的響應式系統。資料模型是普通的 JavaScript 物件，修改資料時，檢視會進行更新
1、如何追蹤變化
當把一個普通的 JavaScript 物件傳給 Vue 例項的 data 選項時，Vue將遍歷此物件的所有屬性，並使用 Object.defineProperty 把這些屬性全部轉化為 getter/setter。 這些 getter/setter 對使用者來說是不可見的，但在內部使用它們讓 Vue 來追蹤依賴，在屬性被訪問和修改時通知變化。
每個元件例項都有相應的 watcher 例項物件，它會在元件渲染的過程中把屬性記錄為依賴，之後當依賴項的 setter 被呼叫時，會通知 watcher 重新計算，從而致使它關聯的元件得以更新。

2、 檢測變化的注意事項
Vue 會在初始化例項時對 data 選項上的屬性執行 getter/setter 的轉化，但 Vue 不能檢測到物件屬性的新增或刪除，所以想要屬性是響應式的，必須在初始化例項前宣告根級響應式屬性，如果屬性初始無值，可以賦一個空值。
var vm = new Vue({
    data:{
        a: 1
    }
});
// vm.a 是響應的
vm.b = 2;
// vm.b 不是響應的

Vue 不允許在已經建立的例項上動態新增新的根級響應式屬性。但允許使用 Vue.set(obj,key,value) 將響應式屬性新增到巢狀的物件上：
var vm = new Vue({
    data:{
        someObj: {
            a： 1
        }
    }
});

Vue.set(vm.someObj,'b',2);//還可以使用 vm.$set 例項方法，這是全域性 Vue.set 方法的別名


3、非同步更新佇列
vue 非同步執行 DOM 更新。只要觀察到資料變化，Vue 將開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料改變，去除重複資料，避免不必要的計算和 DOM 操作。如果同一個 watcher 被多次觸發，只會被推入到佇列中一次。然後，在下一個的事件迴圈‘tick’ 中，Vue 重新整理並執行實際（已去重的）工作。Vue 在內部嘗試對非同步佇列使用原生的 Promise.then 和 MessageChannel，如果執行環境不支援，會採用 setTimeout(fn,0)代替。
例如，當設定 vm.someData = 'new value'，該元件不會立即重新渲染。當重新整理佇列時，元件會在事件迴圈佇列清空時的下一個 'tick' 更新。


增加內容：
a.使用 script 標籤引入 vue.js 時，將 vue.js 放到 head 裡面，可以防止頁面出現插值雙 {{}} 的閃屏問題。
b. v-text vs v-html
v-text:遇到 html 的字串值時會轉義成字串顯示
v-html:遇到 html 的字串值時會解析成 dom 節點