基礎知識：

• vue的生命週期： beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、beforeDestory/destoryed
• vue常用指令： v-for、v-bind（縮寫形式:prop）、v-on(縮寫形式@click=’sss')、v-if/v-else/v-else-if、v-model、v-once、v-html、v-show...
• vue自定義元件：Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘<li>{{ p1 }}</li>' })
• vue常用例項方法和屬性: data/$data、methods/$methods、$el、computed(計算屬性)、$watch、$set、$event、$emit...
• 如果需要更新的屬性需要快取，則使用計算屬性的方式，否則可以使用methods裡的方法來更新屬性（methods裡的方法每次重新渲染都會執行）
• 計算屬性預設提供了getter，你還可以給它設定setter
• 當你資料變化是非同步或者開銷較大時，可以使用watch偵聽器來響應資料的變化
• v-bind:class的值可以是一個物件，可實現類似react中classnames模組的功能
• 自定義元件上的class
  會被渲染拼接到template的根節點的class屬性上（自定義元件上可使用v-bind:class來做class的判斷顯示邏輯）
• v-bind:style可以用來繫結內聯樣式，這個內聯樣式的值可以由一個物件來定義（類似css in js的模式）,且可以被定義為陣列(多個樣式物件)
• v-bind:style可以使用多重值的形式：<div :style=“display:[‘-webkit-box’,’-ms-flexbox’, ‘flex']"></div>
• v-if/v-else/v-else-if的時候，可以用key來管理可複用的元素
• v-if是’真正’的渲染，它會確保在切換條件過程中條件塊內的元素的事件監聽器和子元件適時的銷燬和重建
• v-if是惰性的，初始為假，什麼也不做，直到為真的時候才渲染元素
• v-show總是渲染元素，只是簡單的進行切換
• v-if的切換開銷大，v-show則是初始渲染開銷大，頻繁切換使用v-show，執行時經常改變則使用v-if
• v-if和v-for一起使用時，v-for的優先順序更高
• v-for可遍歷陣列，第二個引數是索引
• v-for可遍歷物件，第二個引數是key，第三個引數是索引
• v-for和<template>搭配可減少渲染次數
• v-for和自定義元件使用時，需要使用props來傳遞值
• 儘可能的為遍歷子元素加上key，獲得渲染優化
• 陣列變異方法：push/pop/unshift/shift/splice/sort/reverse改變原始陣列
• 陣列非變異方法：filter/concat/slice 不改變原始陣列，總是返回新陣列
• Vue不能檢測到陣列索引賦值（使用vm.$set解決）和修改length長度賦值(使用splice解決)的情況
• Vue不能檢測物件屬性的新增和刪除(使用vm.$set或Object.assign)
• is=“todo-item”這種屬性的寫法比較適合DOM模板
• 事件修飾符，它們可串聯使用：.stop、.prevent、.capture、.self、.once、.passive(尤其適合移動端)
• .passive不用同時和.prevent使用，後者會被忽略
• 按鍵修飾符: .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right
• 系統按鍵修飾符:.ctrl、.alt、.shift、.meta(⌘|⊞|◆)、.exact(允許精確控制系統修飾符組合鍵觸發)
• 滑鼠修飾符： .left、.right、.middle
• v-model會忽略表單元素的value、checked、selected，僅僅使用例項中的資料作為資料來源
• 表單事件修飾符：.lazy、.number、.trim
• 元件是可複用的vue例項，具有vue例項大多數屬性和方法
• 元件可複用，每個元件有獨立的空間
• 元件上的data必須是一個函式，這樣做避免影響了其他元件
• 通過Vue.component()全域性註冊的元件可在其被註冊後的任何通過new Vue()建立的例項所使用，包含其元件樹中的所有元件
• 通過插槽<slot>分發內容(其實就是類似於react的children)
• 動態元件<component>配合屬性is來實現
• 解析DOM模板時需要注意下可能會有不生效的情況，需要使用is來傳遞元件

Vue元件

• 全域性註冊/區域性註冊
• 區域性註冊元件在子元件中不可用
• 全域性註冊的行為必須在根Vue例項建立之前發生
• camelCase的屬性可以在元件中使用kebab-case
• 可以以物件的模式指定每一個props屬性的型別
• 父級props的更新會向下流動，反之則不行
• 由於JavaScript物件和陣列是引用傳入的，所以當子元件對props的改變將會影響到父元件
• props型別校驗可以是原生構造物件的中的任意一個，也可以自定義檢驗型別，通過instanceof檢查
• 對於絕大多數特性來說，外部傳入的值會替換掉元件內部設定好的值，如input的type屬性，但有的屬性則是會進行合併，如class
• inhertAttrs:false設定不希望根元素繼承特性，可以使用$attrs屬性來設定繼承的目標元素
• v-on在設定事件監聽器時，會把事件名全部轉換成小寫，推薦始終使用kebab-case的事件名
• v-model可以使用自定義元件中的model屬性自定義
• 父元件模板的所有東西都會在父級作用域內編譯，子元件的所有內容都會在子元件作用域內編譯
• 插槽(<slot></slot>)/具名插槽(<slot name=“header"></slot>)/作用域插槽(slot/slot-scope)
• <keep-alive>元件可用來快取被切換後隱藏的元件的狀態
• $root訪問根例項，$parent訪問父元件例項(不推薦)
• 父元件訪問子元件，使用$refs屬性來獲取設定了ref屬性的子元件
• provide屬性允許我們指定要分享給後代元件使用的方法，然後後代元件使用inject屬性來獲得祖先元件分享的方法(依賴注入)

• 事件偵聽器（$emit派發的事件）

  • v-on 指令偵聽

  • $on 偵聽一個事件

  • $once 一次性偵聽一個事件

  • $off 停止偵聽一個事件

• 慎用遞迴元件
• 儘量避免元件的迴圈引用
• 優先使用template來定義模板，而不是inline-template
• $forceUpdate來強制更新view
• 元件包含大量靜態內容時，可使用v-once來標記，快取靜態內容