VUE入門知識，官方文檔梳理

子曰：“溫故而知新氛谜，可以為師矣掏觉。”
本人已使用VUE一段時間值漫，官方文檔寫的非常的詳細澳腹，本次整理主要是為了溫習，加深對各個知識點的熟悉程度杨何，本文不適合做為初學者的入門教程酱塔，建議初學者移步官方文檔。不過 Vue 本身含有非常豐富的功能危虱，要用 Vue 搭建完整的應用羊娃，仍然需要了解大量 Vue 設(shè)計概念和操作技巧。

VUE 后臺管理系統(tǒng)開發(fā)交流Q~群:942802115

官方文檔地址

基本指令

v-text 輸出渲染后的值
v-html 輸出解析HTML元素后的值
v-if 條件判斷
v-else-if
v-else
v-for 循環(huán)
v-model 表單雙向數(shù)據(jù)綁定
v-show 控制元素顯示與隱藏
v-bind 綁定元素的屬性和style
v-on 綁定事件
v-pre 原樣輸出
v-clock 渲染完之后才顯示埃跷，防止將{{message}}類似的輸出到頁面
v-once 只渲染一次

生命周期

011.png

beforeCreate
創(chuàng)建前）在數(shù)據(jù)觀測和初始化事件還未開始
created
創(chuàng)建后）完成數(shù)據(jù)觀測蕊玷，屬性和方法的運算，初始化事件弥雹，$屬性還沒有顯示出來（載入前）在掛載開始之前被調(diào)用垃帅，相關(guān)的函數(shù)首次被調(diào)用。實例已完成以下的配置：編譯模板剪勿，把里面的數(shù)據(jù)和模板生成贸诚。注意此時還沒有掛載到頁面上。（載入后）在被新創(chuàng)建的el屬性還沒有顯示出來
beforeMount
(載入前）在掛載開始之前被調(diào)用厕吉，相關(guān)的render函數(shù)首次被調(diào)用酱固。實例已完成以下的配置：編譯模板，把data里面的數(shù)據(jù)和模板生成html头朱。注意此時還沒有掛載html到頁面上媒怯。此時打印this.$el 輸出的是節(jié)點
mounted
(載入后）在el 被新創(chuàng)建的vm

el 輸出的是節(jié)點內(nèi)掛載的DOM元素
beforeUpdate
（更新前）在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之前髓窜∩劝可以在該鉤子中進一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程寄纵。數(shù)據(jù)改變,但是還沒有渲染的時候
updated
（更新后）在由于數(shù)據(jù)更改導致的虛擬DOM重新渲染和打補丁之后調(diào)用鳖敷。調(diào)用時，組件DOM已經(jīng)更新程拭，所以可以執(zhí)行依賴于DOM的操作定踱。然而在大多數(shù)情況下，應該避免在此期間更改狀態(tài)恃鞋，因為這可能會導致更新無限循環(huán)崖媚。該鉤子在服務器端渲染期間不被調(diào)用亦歉。頁面渲染之后
activated
keep-alive 組件激活時調(diào)用。
deactivated
keep-alive 組件停用時調(diào)用.
beforeDestroy
(銷毀前）在實例銷毀之前調(diào)用畅哑。實例仍然完全可用肴楷。
destroyed
銷毀后）在實例銷毀之后調(diào)用。調(diào)用后荠呐，所有的事件監(jiān)聽器會被移除赛蔫，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調(diào)用泥张。
errorCaptured

計算屬性

計算屬性的緩存 vs 方法

在許多情況下,計算屬性和方法都能達到同樣的效果,我們可以將同一函數(shù)定義為一個方法而不是一個計算屬性呵恢。兩種方式的最終結(jié)果確實是完全相同的。然而媚创，不同的是計算屬性是基于它們的依賴進行緩存的渗钉。只在相關(guān)依賴發(fā)生改變時它們才會重新求值。這就意味著只要依賴條件還沒有發(fā)生改變钞钙，多次訪問函數(shù) 計算屬性會立即返回之前的計算結(jié)果鳄橘，而不必再次執(zhí)行函數(shù)。

所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例歇竟。
計算屬性默認只顯示getter,當你需要的時候也可以提供一個setter
注意如果你為一個計算屬性使用了箭頭函數(shù)挥唠，則 this 不會指向這個組件的實例抵恋，不過你仍然可以將其實例作為函數(shù)的第一個參數(shù)來訪問焕议。

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
//

vm.fullName = 'jack ma'
<!-- 此時會觸發(fā)set -->

watch 屬性

watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    # 方法名
    b: 'someMethod',
    # 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    # 該回調(diào)將會在偵聽開始之后被立即調(diào)用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    # watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
}

條件渲染

v-if
v-else // 必須緊跟在帶 v-if 或者 v-else-if 的元素的后面
v-if-else // 必須搭配v-if使用并且必須緊跟在帶 v-if 或者 v-else-if 的元素之后

v-if vs v-show

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建弧关。
v-if 也是惰性的：如果在初始渲染時條件為假盅安，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊世囊。
相比之下别瞭，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染株憾，并且只是簡單地基于 CSS 進行切換蝙寨。
一般來說，v-if 有更高的切換開銷嗤瞎，而 v-show 有更高的初始渲染開銷墙歪。因此，如果需要非常頻繁地切換贝奇，則使用 v-show 較好虹菲；如果在運行時條件很少改變，則使用 v-if 較好掉瞳。

列表渲染

可以渲染數(shù)組,對象,數(shù)字,字符串

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

key
和元素復用性能有關(guān)毕源，有相同父元素的子元素必須有獨特的 key浪漠，一般可以用id

顯示過濾后的數(shù)據(jù)

items 可以是computed屬性
items 可以是methods方法

數(shù)組的更新

修改數(shù)組中的數(shù)據(jù),但是頁面渲染不會響應式的更新可以通過以下三種方式

變異方法

push()
pop()
shift()
unshift()
splice()
sort()
reserve()

改變引用 | 重新賦值 | 替換數(shù)組

使用新數(shù)組替換舊的數(shù)組

set方法 (同樣適用于對象的更新)

Vue.set(vm.items, indexOfItem, newValue)
this.$set(vm.items, indexOfItem, newValue)

動態(tài)組件

必須使用 <component> 標簽
使用is屬性決定要渲染的組件

is屬性的使用

在一些標簽對內(nèi)部元素有著嚴格的限制,這個時候我們想要使用組件就需要is屬性

// 這里就會把tr屬性渲染成對應的組件,直接使用組件不被允許
<table>
  <tr is="blog-post-row"></tr>
</table>

Prop屬性傳遞

傳遞使用了v-bind 所有傳遞的值都為動態(tài)的,例如

<!-- 傳遞的為字符串 -->
<blog-post likes="42"></blog-post>
<!-- 傳遞的為數(shù)字 -->
<blog-post v-bind:likes="42"></blog-post>

數(shù)字
字符串
布爾值

<!-- 包含該 prop 沒有值的情況在內(nèi)，都意味著 `true`,即使子組件設(shè)置了default為false霎褐。-->
  <blog-post is-published></blog-post>

對象
數(shù)組
! prop 為單向數(shù)據(jù)流,子組件接收后不能直接修改數(shù)據(jù),如果要對數(shù)據(jù)進行加工,需要先將接收到的數(shù)據(jù)賦值給data中自定義的參數(shù)

prop驗證

type 類型檢查
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
- 自定義構(gòu)造函數(shù) 詳見文檔
required 是否必填
validator:function() 自定義驗證函數(shù)

作用域插槽

對于作用于插槽的理解:正常的插槽不論具名插槽還是匿名插槽都不帶數(shù)據(jù),只是留出一片區(qū)域讓你自己插入
作用域插槽則是帶有數(shù)據(jù)的,樣式父組件說了算址愿，但內(nèi)容可以顯示子組件插槽綁定的。

<!-- 作用域插槽可以輸具名插槽,要講本身的數(shù)據(jù)或者通過prop接收到的數(shù)據(jù)傳出來 -->
<slot name="up" :data="data"></slot>

<!-- 父組件調(diào)用的時候 -->
    <child>
      <template slot-scope="user">  # 這里使用 user接收傳過來的data,必須要使用template標簽和slot-scope
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
    </child>

依賴注入

個人理解在 $root 和$ parent 都無法很好的訪問上級組件的時候使用依賴注入

provide選項允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法瘩欺。在這個例子中必盖，就是

provide: function () {
  return {
    getMap: this.getMap
  }
}

inject 然后在任何后代組件里，我們都可以使用 inject 選項來接收指定的我們想要添加在這個實例上的屬性

inject: ['getMap']

循環(huán)引用

遞歸組件

遞歸組件調(diào)用自身的時候只能通過name來調(diào)用,不用在自身引入注冊
傳值的時候最好做下判斷如果有值再調(diào)用

組件之間的循環(huán)引用

組件互相引用,互為父子,形成悖論.只有組件為全局注冊組件時才會解開悖論
解決方案
- 等到生命周期鉤子 beforeCreate 時去注冊它：
- 在本地注冊組件的時候俱饿，你可以使用 webpack 的異步 import

動畫&&過渡

在 CSS 過渡和動畫中自動應用 class
可以配合使用第三方 CSS 動畫庫暇咆，如 Animate.css
在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js

過渡的類名

v-enter
只存在第一幀
v-enter-active
第一幀到最后一幀
v-enter-to
第二幀到最后一幀
v-leave
只存在第一幀
v-leave-active
第一幀到最后一幀
v-leave-to
第二幀到最后一幀
v-enter-active,v-leave-active
都是處于整個流程中,故可以用來監(jiān)視過渡的變化

v-enter 第一幀設(shè)置以一個屬性,第二幀屬性移除一般都是從無到有,第一幀設(shè)置無
v-enter-to 因為第一幀已經(jīng)移除,所以第二幀無需設(shè)置
v-enter-active 檢測到屬性變化,設(shè)置過渡動效時間
v-leave 離開的第一幀,不設(shè)置
v-leave-to 第二幀設(shè)置為改變后的狀態(tài),并移除了第一幀,狀態(tài)改變
v-leave-active 檢測到第二幀的變化設(shè)置過渡動效時間等

綜上, 一般v-enter,v-leave-to寫在一起 v-enter-active,v-leave-active寫在一起設(shè)置相同的效果
對于這些在過渡中切換的類名來說毙玻，如果你使用一個沒有名字的 <transition>勺届，則 v- 是這些類名的默認前綴。如果你使用了 <transition name="my-transition">枣购，那么 v-enter 會替換為 my-transition-enter嬉探。

過渡順序

CSS3動畫

直接寫在 v-*-active中即可

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

自定義過渡類名 && animate.css的使用

transtion 的API文檔中有明確的解釋
animate.css 是基于@keyfamse的animated動畫
自定義名稱的鉤子函數(shù),通過這些鉤子可以自定義對應的class過渡類名

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
通過自定義過渡類名結(jié)合animate.css使用
必須使用自定義過渡類名
必須先加 animated 這個類

<transition
    name="custom-classes-transition"
    appear // 允許首次進入加載動畫
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
    appear-active-class = "animated tada" // 首次進入加載的過渡效果具體
  >
    <p v-if="show">hello</p>
</transition>

同時使用過渡和動畫

對于一些過渡和動畫同時使用的情況,可以在自定義過渡類名中加入原始的過渡類名,然后書寫對應的效果

<transition
    name="fade"
    type= "animation | transition " // 如果過渡和動畫的時間不一致,這里可以指定以誰的為準
    appear
    enter-active-class="animated tada fade-enter-active" // 這里加入了原始的類,可以自定義
    leave-active-class="animated bounceOutRight"
    appear-active-class = "animated tada"
>

但是，在一些場景中棉圈，你需要給同一個元素同時設(shè)置兩種過渡動效涩堤，比如 animation 很快的被觸發(fā)并完成了，而 transition 效果還沒結(jié)束分瘾。在這種情況中胎围，你就需要使用 type 特性并設(shè)置 animation 或 transition 來明確聲明你需要 Vue 監(jiān)聽的類型。
你也可以自定義效果執(zhí)行時長

<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

多個組件的過渡

當有相同標簽名的元素切換時德召，需要通過 key 特性設(shè)置唯一的值來標記以讓 Vue 區(qū)分它們白魂，否則 Vue 為了效率只會替換相同標簽內(nèi)部的內(nèi)容。即使在技術(shù)上沒有必要上岗，給在 <transition> 組件中的多個元素設(shè)置 key 是一個更好的實踐福荸。

過渡模式

在多個元素或組件切換過度的時候，可以設(shè)置mode 模式來控制顯隱順序

out-in 先隱藏后進入
in-out 先進入后隱藏

動態(tài)組件的過渡

通過is屬性控制組件

列表的過渡

使用 <transition-group> 標簽
內(nèi)部元素總是需要提供唯一的 key 屬性值肴掷。
不同于 <transition>敬锐，它會以一個真實元素呈現(xiàn)：默認為一個 <span>。你也可以通過 tag 特性更換為其他元素
其他和原來一樣

列表的排序過渡

實現(xiàn)添加刪除等過程中列表的平滑過渡
v-move 屬性來實現(xiàn) *-move

列表的交錯過渡

通過 data 屬性與 JavaScript 通信呆瞻，就可以實現(xiàn)列表的交錯過渡,文檔講的很清楚

可復用過渡

就是封裝一個過渡組件結(jié)合slot

動態(tài)過渡

通過數(shù)據(jù)驅(qū)動的方式設(shè)置過渡效果,具體看文檔

狀態(tài)過渡

這部分比較復雜,主要還是數(shù)據(jù)驅(qū)動的思想.通過數(shù)據(jù)的改變影響

混入

我對混入的理解是,你定義一個一個對象,可以寫vue中的數(shù)據(jù),方法,以及生命周期等,在對應的組件如果引入了.那么這個對象中定義的就混合為同一個對象台夺。兩個對象鍵名沖突時，取組件對象的鍵值對.因為混入對象的鉤- 子將在組件自身鉤子之前調(diào)用栋烤。
全局混入要慎用,因為他會影響所有實例
關(guān)于自定義合并策略,抱歉沒搞懂 - -

extend

主要用途是組件的繼承和多態(tài),可以將一個組件擴展為Vue的一個子類

const compont = {}

const ComVue = Vue.extend(compont)

new ComVue({
    el:"#root",
    ....
})

可以一個組件繼承另一個組件類似minxins

const Comp2 = {
    extend: compont,
    .....
}

自定義指令

因為這個文檔已經(jīng)寫的很清楚了,所以這里寫一下我的理解.當內(nèi)置指令例如 v-if 等無法滿足我們需求的時候,我們可以自定義一些指令以幫助我們實現(xiàn)需求. 具體實現(xiàn)方法看文檔.

// 注冊
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

渲染函數(shù) && JSX

參考react就很好理解了

render (createElement) {
    return createment (
        'com-one',{
            ref: 'com'
        },[
            createElement('span',{
                ref: 'span'
            },this.value)
        ]
    )
}

插件

插件是一個經(jīng)常用到的地方.主要是一些全局功能

使用Vue.use()方法使用插件
插件的開發(fā)

# wxpay
export const wxpay = {
    install:() => {
        Vue.prototype.$wxpay = () => {
            # xxxx
        }
    }
}

# toast.js
var Toast = {};
Toast.install = function (Vue, options) {
    Vue.prototype.$msg = 'Hello World';
}
module.exports = Toast;