Vue基礎知識簡介

基礎知識：

• 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來標記，緩存靜態內容

過渡 & 動畫

• transition組件控制過渡動畫，能夠給任何元素和組件添加進入/離開過渡

• 當插入或刪除transition中的元素時，vue會作以下處理

  • 自動嗅探元素是否使用了css過渡和動畫，適當時機添加/刪除類名
  • 元素的鉤子函數會在適當時機被調用
  • 元素既沒有鉤子函數也沒有css動畫，插入和刪除操做在下一幀當即執行（瀏覽器逐幀動畫機制）

• 過渡的類名

  • v-enter/v-enter-active/v-enter-to
  • v-leave/v-leave-active/v-leave-to
• css動畫用法同css過渡，區別是類名v-enter不會在DOM插入後當即刪除，而是在animationend事件觸發時刪除

• 自定義過渡類名，使用如下屬性指定:

  • enter-class/enter-active-class/enter-to-class
  • leave-class/leave-active-class/leave-to-class
  • 自定義類名優先級高於普通的類名
• 使用type屬性設置transition或animation來申明vue使用的動畫類型
• transition組件上使用duration來設置動畫執行的時間

• 可使用鉤子函數

  • beforeEnter/enter/afterEnter/enterCancelled
  • beforeLeave/leave/afterLeave/leaveCancelled
  • 鉤子函數使用v-on指令綁定
  • 鉤子和結合過渡和動畫使用，也能夠單獨使用
  • 在enter/leave中，必須使用done()來進行回調，不然會同步調用，過渡或動畫會當即完成
  • 對於純使用JavaScript來進行的動畫，推薦使用v-bind:css=「false」來取消css的檢測，減小css的影響

• 可以使用apear設置初始渲染的過渡

  • apear/apear-active/apear-to
  • beforeApear/apear/afterApear/apearCancelled
• 多元素過渡，設置惟一key

• 過渡模式:

  • In-out 新元素先過渡，完成後當前元素過渡離開
  • out-in 當前元素先過渡，完成後新元素過渡進入
  • 默認行爲：進入和離開同時發生
• 多個組件過渡使用動態組件實現

• 列表過渡 <transition-group>

  • 以真實元素呈現，默認爲<span>，可以使用tag更改呈現標籤
  • 過渡模式不可用
  • 內部須要惟一key
• 列表排序過渡，使用的是FLIP動畫，使用類名v-move來定義class

可複用性 & 組合

• mixins混入屬性發生衝突時，以組件數據優先（一層屬性深度淺合併）
• mixins混入方法發生衝突時，會將函數合併爲一個數組，優先執行混入方法，其次執行組件方法
• Vue.extend策略和mixins相同
• 慎用全局混入
• 合併策略能夠自定義（參考vuex的具體實現：Vue.config.optionMergeStrategies）
• 全局自定義指令：Vue.directive()
• 局部自定義指令：屬性directives，類型爲Object

• 鉤子函數

  • bind 指令第一次綁定到元素時調用，只執行一次，可用於一次性初始化設置
  • inserted 元素插入父節點時調用
  • update 全部VNode更新時調用，可能發生在子VNode以前
  • componentUpdated 指令所在組件在VNode和其子VNode更新後調用
  • unbind 指令與元素解綁時調用

• 鉤子函數都會被傳入如下參數：

  • el 指令綁定元素，可操做DOM
  • binding 指令描述對象
  • vnode Vue生成的虛擬節點
  • oldVnode 上一個Vnode，僅在update和componentUpdated中使用
• 指令接受全部合法的JavaScript表達式

渲染函數 & JSX

• render函數接受createElement方法做爲參數
• createElement方法的做用是建立一個虛擬節點(VNode)
• createElement參數比較複雜，參照官網：參數
• 組件樹中的VNodes必須惟一
• render中的v-if/v-for可使用if/else和map重寫
• 插槽使用this.$slot.default訪問，做用域插槽使用this.$scopeSlots.default訪問和設置
• 可使用插件babel-plugin-transform-vue-jsx支持JSX語法
• 將h做爲createElement的別名是Vue生態的一個慣例，也是JSX要求的
• 函數式組件 關鍵詞：functional
• 函數式組件渲染開銷低，但相應的，它不會出如今Vue devtools的組件樹裏邊
• 函數式組件要求你本身實現同名特性的替換與智能合併
• Vue的模板實際編譯成了render方法實現的VNode，可使用Vue.compile()方法來輸出編譯結果

插件

• 插件會爲vue提供全局的功能，包括但不限於如下幾種：

  • 添加全局的屬性或方法，如vue-custom-element
  • 添加全局的資源（指令、過濾器、過渡等），如：vue-touch
  • 經過全局mixins添加一些組件選項，如：vue-router
  • 添加Vue實例方法，經過添加到Vue.prototype上實現
  • 一個獨立的庫，同時有本身的API，又實現以上部分功能，如：vue-router
• Vue插件有一個公開的方法install，第一個參數是Vue構造器，第二個參數是一個可選對象。
• 插件的使用經過全局方法Vue.use(MyPlugin)使用，只會註冊一次插件
• 在CommonJS中，應該始終顯式的調用Vue.use方法
• 社區插件列表awesome-vue

過濾器

• {{ msg | filter }}
• <div v-bind=「msg | filter"></div>
• 全局過濾器使用Vue.filter()建立
• 局部過濾器使用對象屬性filters建立
• 過濾器函數老是接收表達式的值做爲第一個參數，過濾器能夠有多個，值依次向後傳遞
• 過濾器能夠接收額外的參數

構建 & 部署

• <script>標籤引入[vue.min.js](https://vuejs.org/js/vue.min.js)

• 使用vue-cli

  • webpack + vue-loader
  • browserify + vueify
  • rollup + rollup-plugin-vue
• 利用鉤子函數Vue.config.errorHandler定義配置來跟蹤運行時錯誤，能夠搭配[Sentry](https://sentry.io/)使用（集成配置）
• 單文件組件（.vue文件）