你會Vue嗎，你看以下知識點你掌握了多少？實際工作中是否運用的得心應手？如果是，那麼恭喜你！

Vue中的資料和DOM已經被關聯起來，所有的東西都是響應式的。注意我們不再和HTML直接互動。一個Vue應用會將其掛載到DOM元素上然後對齊進行完全的控制，那個HTML是我們的入口，但是其他的都會發生在新建立的Vue例項內部。詳情可見MVVM原理極其實現。

下面是Vue的一些基本知識點相關學習跟應用，差缺補漏吧。Vue.js官網好好看一遍還是很香的。

Vue例項

1、例項宣告週期鉤子函式

8個宣告週期函式

模板語法

1、插值

①、 v-once 指令，你也能執行一次性地插值，當資料改變時，插值處的內容不會更新。

②、可以使用js表示式但是不能使用語句和流控制(if判斷語句)

{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
​
<!-- 這是語句，不是表示式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表示式 -->
{{ if (ok) { return message } }}

2、指令

①、動態引數 -2.60新增

可以使用動態引數為一個動態的事件名繫結處理函式：

約束：為某些字元，如空格和引號，放在 HTML attribute 名裡是無效的。會觸發警告。

<a v-on:[eventName]="doSomething"> ... </a>

當 eventName 的值為 "focus" 時，v-on:[eventName] 將等價於 v-on:focus

3、修飾符

在移動端最好的應用就是

①、 .stop 阻止事件冒泡

②、 .prevent （@touchmove.prevent 禁止底層頁面滑動）

計算屬性和偵聽器

模板中不應該放入過多的邏輯，會讓模板過重且難以維護，所以對於任何複雜邏輯，都應該使用計算屬性。

基礎例子

 <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: {

      // 計算屬性的 getter

      reversedMessage: function () {

        // `this` 指向 vm 例項

        return this.message.split('').reverse().join('')

      }

    }

  })

  // Original message: "Hello"

  ​

  // Computed reversed message: "olleH"

我們宣告瞭一個計算屬性 reversedMessage。Vue 知道 vm.reversedMessage 依賴於 vm.message，因此當 vm.message 發生改變時，，所有依賴 vm.reversedMessage 的繫結也會更新。

計算屬性快取 vs 方法

我們通過表示式中呼叫方法可以同樣達到效果：

  <p>Reversed message: "{{ reversedMessage() }}"</p>

  // 在元件中

  methods: {

    reversedMessage: function () {

      return this.message.split('').reverse().join('')

    }

  }

兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的響應式依賴進行快取。只在相關響應依賴發生改變時它們才會重新計算求值。這就意思只要message還沒有改變，多次訪問reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函式

注：這也同樣意味著下面的計算屬性將不再更新，因為 Date.now() 不是響應式依賴：

 computed: {

    now: function () {

      return Date.now()

    }

  }

如你不希望有快取，請用方法來替代。

計算屬性 vs 偵聽屬性

Vue 提供了一種更通用的方式來觀察和響應 Vue 例項上的資料變動：偵聽屬性。

但是有些時候可以使用computed代替watch

計算屬性的 setter

計算屬性預設只有 getter，不過在需要時你也可以提供一個 setter：

  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 = 'John Doe' 時，setter 會被呼叫，vm.firstName 和 vm.lastName 也會相應地被更新。

偵聽器

當資料變化要執行非同步或者開銷較大的操作，watch 是最有用的選擇。

Class於Style繫結

繫結HTML Class

物件語法

①、我們可以傳給 v-bind:class 一個物件，以動態地切換 class：

 <div v-bind:class="{ active: isActive }"></div>

是否渲染取決於isActive是 true或false

②、你可以在物件中傳入更多欄位來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class attribute 共存。當有如下模板：

  <div

    class="static"

    v-bind:class="{ active: isActive, 'text-danger': hasError }"

  ></div>

  ​

  // data定義如下

  data: {

    isActive: true,

    hasError: false

  }

  ​

  // 渲染結果

  // <div class="static active"></div>

③、繫結的資料物件不必內聯定義在模板裡：

 <div v-bind:class="classObject"></div>

  data: {

    classObject: {

      active: true,

      'text-danger': false

    }

  }

④、這是一個常用且強大的模式，我們也可以在這裡繫結一個返回物件的計算屬性：

 <div v-bind:class="classObject"></div>

 data: {

   isActive: true,

   error: null

 },

 computed: {

   classObject: function () {

     return {

       active: this.isActive && !this.error,

       'text-danger': this.error && this.error.type === 'fatal'

     }

   }

 }

陣列語法

①、我們可以把一個陣列傳給 v-bind:class，以應用一個 class 列表：

  <div v-bind:class="[activeClass, errorClass]"></div>

  data: {

    activeClass: 'active',

    errorClass: 'text-danger'

  }

  // 渲染為：

  // <div class="active text-danger"></div>

②、 陣列語法中也可以使用物件語法：

  <div v-bind:class="[{ active: isActive }, errorClass]"></div>

用在元件上

當在一個自定義元件上使用 class 時，這些 class 將被新增到該元件的根元素上面。這個元素上已經存在的 class 不會被覆蓋。

你宣告瞭這個元件：

 Vue.component('my-component', {

    template: '<p class="foo bar">Hi</p>'

  })

  <!-- 在使用它的時候新增一些 class： -->

  <my-component class="baz boo"></my-component>

  ​

  <!-- HTML 將被渲染為： -->

  <p class="foo bar baz boo">Hi</p>

繫結內聯樣式

物件語法

v-bind:style 的物件語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 物件。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

  ​

  <!-- 直接繫結到一個樣式物件通常更好，這會讓模板更清晰： -->

  <div v-bind:style="styleObject"></div>

  data: {

    activeColor: 'red',

    fontSize: 30

  }

  ​

  // 繫結物件

  data: {

    styleObject: {

      color: 'red',

      fontSize: '13px'

    }

  }

同樣的，物件語法常常結合返回物件的計算屬性使用。

多重值

從 2.3.0 起你可以為 style 繫結中的 property 提供一個包含多個值的陣列，常用於提供多個帶字首的值，例如：

  <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

條件渲染

在<template>元素上使用v-if條件渲染分組

因為 v-if 是一個指令，所以必須將它新增到一個元素上。但是如果想切換多個元素呢？此時可以把一個 <template> 元素當做不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。

  <template v-if="ok">

    <h1>Title</h1>

    <p>Paragraph 1</p>

    <p>Paragraph 2</p>

  </template>

v-else-if v-else

類似於 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之後。

用key可以管理可複用的元素

Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許使用者在不同的登入方式之間切換：

<template v-if="loginType === 'username'">

   <label>Username</label>

   <input placeholder="Enter your username">

 </template>

 <template v-else>

   <label>Email</label>

   <input placeholder="Enter your email address">

 </template>

那麼在上面的程式碼中切換 loginType 將不會清除使用者已經輸入的內容。因為兩個模板使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的 placeholder。

這樣也不總是符合實際需求，所以 Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要複用它們”。只需新增一個具有唯一值的 key attribute 即可：

<template v-if="loginType === 'username'">

   <label>Username</label>

   <input placeholder="Enter your username" key="username-input">

 </template>

 <template v-else>

   <label>Email</label>

   <input placeholder="Enter your email address" key="email-input">

 </template>

現在，每次切換時，輸入框都將被重新渲染。

v-for和v-if

永遠不要把 v-if 和 v-for 同時用在同一個元素上。

一般我們在兩種常見的情況下會傾向於這樣做：

• 為了過濾一個列表中的專案 (比如 v-for="user in users" v-if="user.isActive")。在這種情形下，請將 users 替換為一個計算屬性 (比如 activeUsers)，讓其返回過濾後的列表。

• 為了避免渲染本應該被隱藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將 v-if 移動至容器元素上 (比如 ul、ol)。

  <ul>

    <li

      v-for="user in users"

      v-if="user.isActive"

      :key="user.id"

    >

      {{ user.name }}

    </li>

  </ul>

當 Vue 處理指令時v-for 比 v-if 具有更高的優先順序，哪怕我們只渲染出一小部分使用者資料的元素，也得在每次重新渲染的時候遍歷整個列表，不論活躍使用者是否發生變化，應該使用計算屬性

列表渲染

v-for

在v-for中，既可以使用陣列也可以使用物件

狀態維護

當Vue正在更新使用v-for渲染列表時，它預設使用“就地更新策略”。如果資料項的順序被改變，Vue將不會移動DOM元素來匹配資料項的順序，而是就地更新每一個元素，並確保它們在每個位置索引位置正確渲染。

不要使用物件或陣列之類的非基本型別值作為v-for的key。請用字串或數值型的值。

key的特殊主要用在Vue的虛擬DOM演演算法，在新舊nodes對比時辨識VNodes。如果不使用key，Vue會使用一種最大限度減少動態元素並且儘可能的嘗試就地修改/複用相同型別元素的演演算法。而使用key時，它會基於key的變化重新排列元素順序，並且會移除key不存在的元素

事件處理

內聯處理器的方法

有時也需要在內聯語句處理器中訪問原始的DOM事件。可以使用特殊變數$event把它傳入方法：

 <button v-on:click="warn('Form cannot be submitted yet.', $event)">

   Submit

 </button>

 // ...

 methods: {

   warn: function (message, event) {

     // 現在我們可以訪問原生事件物件

     if (event) {

       event.preventDefault()

     }

     alert(message)

   }

 }

事件修飾符

以上方法雖然可以實現，但是更好的方式是：方法只有純粹的資料邏輯，而不是去處理DOM事件細節。為瞭解決這個問題，Vue提供了事件修飾符。

.stop // 等同於js中的event.stopPropagation(),防止事件冒泡 
.prevent // 取消預設事件，比如a標籤的連結跳轉
.caputer // 捕獲事件，點選子節點，由外到內父節點->子節點觸發點選事件（不加是由內到外）
.self // 只觸發自己範圍內的事件，不會包含子元素
.once // 只執行一次點選

.passive

【瀏覽器只有等核心執行緒執行到事件監聽器對應的JavaScript程式碼時，才能知道內部是否會呼叫preventDefault函式來阻止事件的預設行為，所以瀏覽器本身是沒有辦法對這種場景進行優化的。這種場景下，使用者的手勢事件無法快速產生，會導致頁面無法快速執行滑動邏輯，從而讓使用者感覺到頁面卡頓。】

通俗點說就是每次事件產生，瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的預設動作。我們加上passive就是為了告訴瀏覽器，不用查詢了，我們沒用preventDefault阻止預設動作。

表單輸入繫結

修飾符

.lazy

在預設情況下，v-model 在每次 input 事件觸發後將輸入框的值與資料進行同步 。你可以新增 lazy 修飾符，從而轉為在 change 事件之後進行同步：

<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg">
​
<!--注：ElementUI的input輸入框不支援 `v-model` 修飾符-->

number

可以自動將使用者輸入的值轉換成數值型別：

只有這個值無法被 parsenFloat()解析，則會返回原始的值

 <input v-model.number="age" type="number">

.trim

過濾使用者輸入的收尾空白字元：

 <input v-model.trim="msg">

元件基礎

通過Prop向子元件傳遞資料

傳入一個物件的所有property

如果想將一個物件的所有property都作為prop傳入，可以不用每個引數分別使用v-bind

 post: {

    id: 1,

    title: 'My Journey with Vue'

  }

下面的模板

 <blog-post v-bind="post"></blog-post>

  ​

  <!-- 等價於 -->

  <blog-post

    v-bind:id="post.id"

    v-bind:title="post.title"

  ></blog-post>

單向資料流

所有的prop傳值都讓父子prop之間形成一個單行下行繫結。每次父元件發生變更時，子元件中所有的prop都將會重新整理為最新的值，這說明你不應該在子元件內部改prop（強行做，Vue會有警告）

注：JavaScript中陣列和物件是通過引用傳入的，對於一個陣列或物件型別的prop來說，在子元件中改變變更這個物件的本身將會影響父元件的狀態

Prop驗證

  Vue.component('my-component', {

      props: {

          // 基礎的型別檢查（'null' 和 'undefined'會通過任何型別的驗證

          propA: Number,

          // 多個型別

          propB: [Number, String]

          // 必填字串

          propC: [

              type: String,

              required: true

          ]

      }

  })

自定義事件

始終使用 kebab-case 的事件名。

插槽

編譯作用域

父級模板裡的所有內容都是在父級作用域中編譯的；子模板裡的所有內容都是在子作用域中編譯的。

具名插槽

作用域插槽

混入

基礎

混入(mixin)提供了一種非常靈活的方式，來分發Vue元件中的可複用功能。一個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項

選項合併

當元件和混入物件有同名選項是， 資料物件在內部會進行遞迴合併，並且在發生衝突時以元件資料優先

 var mixin = {

      data() {

          return {

              message: 'hello',

              foo: 'abc'

          }

      }

  }

  ​

  new Vue({

      mixin: [mixin],

      data() {

          return {

              message: 'goodbye',

              bar: 'def'

          }

      },

      created() {

          console.log(this.$data)

          // => {message: 'goodbye', foo:'adc', bar: 'def'}

      }

  })

同名鉤子函式將合併為一個陣列，因此都將被呼叫。只是混入物件的鉤子將在元件自身鉤子之前呼叫

值為物件的選項，例如methods、components和directives，將別合併成同一個物件。兩個物件鍵名衝突時，取元件物件的鍵值對。

自定義選項合併策略

自定義選項將使用預設策略，即簡單地覆蓋已有值。如果想要自定義選項以自定義邏輯合併，可以向 Vue.config.optionMergeStrategies新增一個函式

自定義指令

鉤子函式

鉤子函式引數

動態指令引數

物件字面量

如果指令需要多個值，可以傳入一個JavaScript物件字面量。指令函式可以接受所有合法的JavaScript表示式

  <div v-demo="{ color: 'white', text: 'hello!' }"></div>

  Vue.directive('demo', function (el, binding) {

    console.log(binding.value.color) // => "white"

    console.log(binding.value.text)  // => "hello!"

  })

渲染函式 & JSX

看懂百分之30%，過段時間再看

路由

程式設計式導航和宣告式導航

  //  宣告式

  <router-link :to="....">

  ​

  // 程式設計式

  router.push(...)

  // ex:

  // 字串

  router.push('home')

  // 物件

  router.push({ path: 'home' })

  // 命名的路由

  router.push({ name: 'user', params: { userId: '123' }})

  // 帶查詢引數，變成 /register?plan=private

  router.push({ path: 'register', query: { plan: 'private' }})

導航守衛

全域性前置守衛

router.beforeEach

全域性解析守衛

router.beforeResolve

全域性後置鉤子

router.afterEach((to, from) => {
 // ...
})

路由獨享守衛

 beforeEnter: (to, from, next) => {
    // ...
 }

元件內的守衛

① beforeRouteEnter

② beforeRouteUpdate

③ beforeRouteLeave

  beforeRouteEnter (to, from, next) {

      // 在渲染該元件的對應路由被 confirm 前呼叫

      // 不！能！獲取元件例項 `this`

      // 因為當守衛執行前，元件例項還沒被建立。

       next(vm => {

           // 通過`vm`訪問元件例項

       })

    },

    beforeRouteUpdate (to, from, next) {

      // 在當前路由改變，但是該元件被複用時呼叫

      // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉       的時候，

      // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被調       用。

      // 可以訪問元件例項 `this`

    },

    beforeRouteLeave (to, from, next) {

      // 導航離開該元件的對應路由時呼叫

      // 可以訪問元件例項 `this`

    }

完整的導航解析流程

1.導航被觸發。 2.在失活的元件裡呼叫 beforeRouterLeave守衛。 3.呼叫全域性的 beforeEach守衛。 4.在重用的元件裡呼叫 beforeRouterUpdate守衛。 5.在路由配置裡呼叫 beforeEnter。 6.解析非同步路由元件。 7.在被啟用的元件裡呼叫 beforeRouterEnter。 8.呼叫全域性的 beforeResolve守衛。 9.導航被確認。 10.呼叫全域性 afterEach鉤子。 11.觸發DOM更新。 12.用建立好的例項呼叫 beforeRouteEnter 守衛中傳給 next的回撥函式。

Vuex

State

state 提供唯一的公共資料來源。所有共享的資料要統一放到Store的State中進行儲存

元件訪問State中資料的第一種方式：

  this.$store.state.全域性資料名稱

元件訪問State中資料的第二種方式：

 // 1.從Vuex中按需匯入`mapState`函式

  import { mapState } from 'vuex'

  ​

  // 2.將全域性資料，對映為當前元件的計算屬性

  computed: {

      ...mapState(['count'])

  }

Mutation

Mutation用於變更Store中的資料。

① 只能通過muntation變更Store資料，不可以直接操作Store中的資料。

② 通過這種方式雖然操作起來稍微繁瑣一些，但是可以集中監控所有資料的變化。

 // 定義motation

  mutations: {

      add(state) {

          // 變更狀態

          state.count++

      }，

      // 傳參

      addN(state,n) {

          state.count+=n

      }

  }

  ​

  //元件中觸發mutation

  methods: {

      handle() {

          // 觸發mutations 的第一種方式

          this.$store.commit('add')

          // 觸發mutations傳參

          this.$store.commit('addN', 3)

      }

  }

this.$store.commit()是觸發mutations的第一種方式，觸發mutations的第二種方式:

  // 1.從vuex中按需匯入`mapMutations`函式

  import { mapMutations } from 'vuex'

  ​

  // 2.將指定的 mutations函式，對映為當前元件的 methods函式

  methods: {

      ...mapMutations(['add','addN'])

  }

Action

Action用於處理非同步任務。

如果通過非同步變更資料，必須通過Action，而不能使用Mutation，但是在Action中還是要通過觸發Mutation的方式間接變更資料。

// 定義Action

 actions: {

     // context 第一個形參可以理解為當前new 的例項

     addAsync(context,n) {

         setTimeout(() => {

             context.commit('addN',n)

         },1000)

     }

 }

 ​

 // 觸發Action

 methods: {

     handle: {

         // 觸發actions 的第一種方式

         // 攜帶引數

         this.$store.dispath('addAsync', 5)

     }

 }

this.$store.dispatch()是觸發actions的第一種方式，觸發actions的第二種方式：

  // 1.從vuex中按需匯入`mapActions`函式

  import { mapActions } from 'vuex'

  ​

  // 2.將指定的actions函式，對映為當前元件的methods函式

  methods: {

      ...mapActions(['addAsync', 'addNAsync'])

  }

Getter

Getter用於對Store中的資料進行加工處理形成新的資料。

① Getter可以對Store中已有的資料加工處理之後形成新的資料，類似Vue的計算屬性

② Store中資料發生變化，Getter的資料也會跟著變化。

 // 定義Getter

  const strore = new Vuex.Store({

      state: {

          count: 0

      },

      getters: {

          showNum: state => {

              return '當前最新的數量是【'+ state.count +'】'

          }

      }

  })

使用getters的第一種方式：

 this.$store.getters.名稱

使用getters的第二種方式：

 import { MapGetters } from 'vuex'

  ​

  computed: {

      ...mapGetters(['showNum'])

  }

namespaced

這個屬性是用來解決不同模組命名衝突的問題：

  // 不同頁面引入getter、actions、mutations時，要加上模組名

  // ex

  ...mapGetters('BadInfo', ['DialogDate'])

  ​

  // 第二種寫法

  this.$store.commit('XXX/SETXXX',sth);

  this.$store.getters['XXX/getXXX'];