1 創(chuàng)建實(shí)例

var vm = new Vue({
  // 選項(xiàng)
})

• 每個(gè) Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例開始的
• 一個(gè) Vue 應(yīng)用由一個(gè)通過 new Vue 創(chuàng)建的根 Vue 實(shí)例，以及可選的嵌套的、可復(fù)用的組件樹組成。

2 數(shù)據(jù)與方法

2.1 數(shù)據(jù)

• 當(dāng)一個(gè) Vue 實(shí)例被創(chuàng)建時(shí)，它向 Vue 的響應(yīng)式系統(tǒng)中加入了其 data 對象中能找到的所有的屬性。當(dāng)這些屬性的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”，即匹配更新為新的值。
• 只有當(dāng)實(shí)例被創(chuàng)建時(shí) data 中存在的屬性才是響應(yīng)式的
• 如果你知道你會(huì)在晚些時(shí)候需要一個(gè)屬性，但是一開始它為空或不存在，那么你僅需要設(shè)置一些初始值

2.2 實(shí)例方法

Vue 實(shí)例還暴露了一些有用的實(shí)例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區(qū)分開來

• vm.$el
• vm.$data
• vm.$watch(dataAttr, fn)

3 計(jì)算屬性和偵聽器

3.1 methods

methods用來裝載可以調(diào)用的函數(shù)，你可以直接通過 Vue 實(shí)例訪問這些方法，或者在指令表達(dá)式中使用。方法中的 this 自動(dòng)綁定為 Vue 實(shí)例。

注意，不應(yīng)該使用箭頭函數(shù)來定義 methods 函數(shù)（例如 plus: () => this.a++）。理由是箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以 this 將不會(huì)按照期望指向 Vue 實(shí)例，this.a 將是 undefined。示例代碼如下。

如果你要通過對 DOM 的操作來觸發(fā)這些函數(shù)，那么應(yīng)該使用 v-on 對操作和事件進(jìn)行綁定

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})

vm.plus()
vm.a // 2

3.2 computed 計(jì)算屬性

模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù),這時(shí)候應(yīng)該使用計(jì)算屬性

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

<!--以下是計(jì)算屬性的用法-->
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計(jì)算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實(shí)例
      return this.message.split('').reverse().join('')
    }
  }
})

3.3 watch 監(jiān)聽器

雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽器。這就是為什么 Vue 通過 watch 選項(xiàng)提供了一個(gè)更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的

var vm = new Vue({
    data: {
        question: ''
    },
    watch: {
        // 如果 `question` 發(fā)生改變，這個(gè)函數(shù)就會(huì)運(yùn)行
        question: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.debouncedGetAnswer()
        }
  },
})

3.4 三者區(qū)別

它們?nèi)叨际且院瘮?shù)為主體，但是它們之間卻各有區(qū)別。

計(jì)算屬行與方法

我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性。兩種方式的最終結(jié)果確實(shí)是完全相同的。然而，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。

相比之下，每當(dāng)觸發(fā)重新渲染時(shí)，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)。

計(jì)算屬性與偵聽屬性

• watch擅長處理的場景：一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)
• computed擅長處理的場景：一個(gè)數(shù)據(jù)受多個(gè)數(shù)據(jù)影響

4 生命周期

4.1 生命周期鉤子函數(shù)

1.beforeCreate

在實(shí)例初始化之后，數(shù)據(jù)觀測（data observer）和 event/watcher 事件配置之前被調(diào)用。

2.created

在實(shí)例創(chuàng)建完成后被立即調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測（data observer）、屬性和方法的運(yùn)算、watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。

3.beforeMount

在掛載開始之前被調(diào)用，相關(guān)的 render 函數(shù)將首次被調(diào)用。

注意：該鉤子在服務(wù)器端渲染期間不被調(diào)用。

4.mounted

el 被新創(chuàng)建的 vm.el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng)mounted被調(diào)用時(shí)vm.el 也在文檔內(nèi)。頁面渲染完成后初始化的處理都可以放在這里。

注意：mounted 不會(huì)承諾所有的子組件也都一起被掛載。

5.beforeUpdate

數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。

你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過程。

6.updated

由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。

當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計(jì)算屬性或 watcher 取而代之。

注意：updated 不會(huì)承諾所有的子組件也都一起被重繪。

7.activated

keep-alive 組件激活時(shí)調(diào)用。

8.deactivated

keep-alive 組件停用時(shí)調(diào)用。

9.beforeDestroy

實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。

10.destroyed

Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。

4.2 生命周期圖示