一、class 與 style

• 動態(tài)class( 與普通的 class 屬性共存):可直接用對象，如果有普通class，應該用數(shù)組語法，對象中只有動態(tài)的
  ① :class="[{ active: isActive },errorClass]"
  ② :class="{ active: isActive, 'text-danger': hasError }"
• 內(nèi)聯(lián)樣式：對象語法，駝峰和短橫線都行
  ① :style="{ color: activeColor, fontSize: fontSize + 'px' }"

二、v-if 與v-for與v-show

• v-if切換多個元素標簽，使用<template>包裹
• Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染，需要key標識
• v-show 不支持 <template> 元素，也不支持 v-else
• v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷
  ①如果需要非常頻繁地切換，則使用 v-show 較好
  ②如果在運行時條件很少改變，則使用 v-if 較好
• 當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優(yōu)先級。所有一般用有v-if的template包裹v-for，不讓他們在同一層

三、列表渲染

#數(shù)組
v-for="(item,index) in items"
v-for="item of items"

#對象
v-for="value in object"
v-for="(value, key) in object"
v-for="(value, key, index) in object"

• 為了給Vue一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一key屬性。理想的key值是每項都有的且唯一的id。
• 一段取值范圍的v-for <span v-for="n in 10">{{ n }} </span>
• 不能直接修改數(shù)組某一項，長度
  ①使用this.$set(arr，index，newValue) 改變某項
  ②使用this.arr.splice（newLength）刪除也會觸發(fā)DOM更新

四、生命周期

• beforeCreated：實例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。
• created：實例創(chuàng)建完成后立即調(diào)用；數(shù)據(jù)觀測，屬性和方法的計算，watch/event事件回調(diào)已經(jīng)完成；$el元素目前不可見；this可以使用；一般，異步獲取數(shù)據(jù)在created里被賦值，用于初次渲染頁面。
• beforeMount：實例掛載之前被調(diào)用；相關(guān)render函數(shù)首次被調(diào)用。
• mounted：實例掛載完成后立即調(diào)用；$el元素可用，此時可以操作DOM元素。
  ①注意mounted不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用vm.$nextTick替換掉mounted：

mounted: function () {
   this.$nextTick(function () {
   // Code that will run only after the
   // entire view has been rendered
   //[ nextTick： 將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。]
   })
}

• beforeDestory:實例銷毀之前調(diào)用。在這一步，實例仍然完全可用
• destroy：實例銷毀之后被立即調(diào)用

五、不要在watch、computed、method等選項屬性上使用箭頭函數(shù)定義函數(shù)

• 例如在watch中searchQuery: newValue => this.updateAutocomplete(newValue)。理由是箭頭函數(shù)綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.updateAutocomplete 將是 undefined。因為在標準函數(shù)中，this引用的是把函數(shù)當成方法調(diào)用的上下文對象，this指向的就是vue實例。在比如method函數(shù)（一般function寫法下）中進行事件回調(diào)調(diào)用某個函數(shù)，this指向的并非想要的結(jié)果，此時把回調(diào)函數(shù)寫成箭頭函數(shù)的形式就可以解決問題，因為箭頭函數(shù)的this就是父作用域的this，而父作用域就是method函數(shù)調(diào)用時生成的上下文作用域。從原理上的解釋像vue中method函數(shù)中的代碼，這個函數(shù)定義的時候是必須是一般函數(shù)。一般函數(shù)中指針this引用的是把函數(shù)當成方法調(diào)用的上下文，vue中就是實例vue把method函數(shù)作為方法調(diào)用，所以指向的是vue實例。method函數(shù)內(nèi)部又有一個閉包箭頭函數(shù)，這個閉包中的this指向的是method的上下文，而method的上下文是vue實例，所以就被覆蓋了。閉包中的this指的就是vue實例也就是method的上下文，都是同一個。

六、事件修飾符：快速理解

• .stop：防止事件冒泡，等同于JavaScript中的event.stopPropagation()
  防止事件冒泡，通俗來說就是阻止事件向父元素傳遞，阻止任何父事件處理程序被執(zhí)行，等同于JavaScript中的event.stopPropagation()。
• .prevent：防止執(zhí)行預設的行為，等同于JavaScript中的event.preventDefault()
  某些標簽擁有自身的默認事件，比如<a>標簽點擊后會進行頁面的跳轉(zhuǎn)。這類默認事件雖然是冒泡后開始的，但不會因為stop而停止執(zhí)行。阻止執(zhí)行這類預設的行為，.prevent就派上用場了。例如下： <a @click.prevent>點擊跳轉(zhuǎn)</a>
• .capture：捕獲冒泡
  捕獲冒泡，即冒泡發(fā)生時，有.capture修飾符的dom元素會優(yōu)先執(zhí)行。我們還是用回stop時候的例子，正常情況下點擊最內(nèi)層按鈕，是由下往上冒泡。
• .self：將事件綁定到自身，只有自身才能觸發(fā)
  將事件綁定到自身，只有自身才能觸發(fā)，通常用于避免冒泡事件的影響。
• .once：只觸發(fā)一次
  這個比較好理解，加上once修飾符以后事件只觸發(fā)一次，但是不影響事件的冒泡，上層的事件仍然會被觸發(fā)，并且頁面刷新后這個次數(shù)會重置。
• .passive：不阻止事件的默認行為
  .passive是2.3.0 新增的修飾符。這里涉及到一個問題，為什么需要告訴瀏覽器不阻止事件的默認行為？ 原因是這樣的，瀏覽器只會在每次觸發(fā)監(jiān)聽器的時候，才去判斷這次是否有調(diào)用preventDefault()來阻止默認行為。這樣的判斷，在某些場景下會影響交互，像用戶通過手勢滑動頁面時，就沒法迅速滾動了，而使用.passive就可以提前告訴瀏覽器，我們沒有用preventDefault阻止默認動作，你也不用反復去判斷了，從而提高性能解決卡頓。

七、Vue插槽

• Vue具名插槽:
  就是子組件中的提供給父組件使用的一個占位符，用<slot> </slot>表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會替換子組件的<slot> </slot>標簽。
  ①2.6.0以后的版本中的用法是這樣的：<template v-slot:header>// 在父組件中使用模板語法，使用v-slot綁定插槽的名字。
  ②<slot name="header"></slot>// 在子組件中仍然使用name來作為插槽的標識符。
或者直接把 slot 屬性用在一個普通元素上，例如：<h1 slot="header">Here might be a page title</h1>。這種寫法是在2.6.0之前版本的語法，現(xiàn)在已經(jīng)廢棄。
• Vue作用域插槽:
  有時讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)是很有用的，但是因為只有子組件可以訪問到例如user數(shù)據(jù)，而我們提供的內(nèi)容是在父級渲染的。
  ①為了讓user數(shù)據(jù)在父級的插槽內(nèi)容中可用，第一步：我們可以將user作為元素的一個屬性attribute綁定上去，<slot v-bind:user="user"> {{ user.lastName }} </slot>。
  ②第二步：綁定在元素上的屬性被稱為插槽 prop?，F(xiàn)在在父級作用域中，我們可以使用帶值的 v-slot 來定義我們提供的插槽 prop 的名字。<template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template>，在這個例子中，我們選擇將包含所有插槽 prop 的對象命名為 slotProps，但你也可以使用任意你喜歡的名字。
• 注意事項:
  ①默認插槽的縮寫語法不能和具名插槽混用，因為它會導致作用域不明確。
  ②只要出現(xiàn)多個插槽，請始終為所有的插槽使用完整的基于 <template> 的語法：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>