前言

Vue的學(xué)習(xí)成本和難度不高，這除了和框架本身的設(shè)計(jì)理念有關(guān)之外，還和Vue完善的官方文檔有著密不可分的關(guān)系，相信有很多的開(kāi)發(fā)者和我一樣，很長(zhǎng)時(shí)間沒(méi)有仔細(xì)去看過(guò)官方文檔了，最近花時(shí)間仔細(xì)看了一下官方文檔，將里面一些容易忽視的點(diǎn)整理出來(lái)和大家分享。

容易忽視的點(diǎn)

箭頭函數(shù)的使用

ES6的普及使得箭頭函數(shù)的使用更加頻繁，但是在Vue中不要在選項(xiàng)屬性或者回調(diào)上使用箭頭函數(shù)，舉個(gè)例子：

new Vue({
 el: '#app',
 data: {
  show: true
 },
 created: () => {
  console.log(this.show)
 },
})

將created鉤子寫(xiě)成箭頭函數(shù)，這里的this將不再指向Vue對(duì)象，在瀏覽器中將會(huì)指向window對(duì)象，這是因?yàn)榧^函數(shù)并沒(méi)有this，this會(huì)作為變量一直向上級(jí)詞法作用域查找，直到找到為止

指令動(dòng)態(tài)參數(shù)

Vue從2.6.0開(kāi)始，可以用方括號(hào)括起來(lái)的JavaScript表達(dá)式作為一個(gè)指令參數(shù)，舉個(gè)例子：

<div id="app">
 <input v-on:[event] = "doSomething">
 <button v-on:click="event = 'focus'">change</button>
</div>

new Vue({
 el: '#app',
 data() {
  return {
   event: 'input'
  }
 },
 methods: {
  doSomething () {
   console.log('sss')
  }
 },
})

這里將input的事件監(jiān)聽(tīng)設(shè)置為一個(gè)動(dòng)態(tài)的參數(shù)event，默認(rèn)是監(jiān)聽(tīng)點(diǎn)擊事件，當(dāng)點(diǎn)擊change的時(shí)候，改為監(jiān)聽(tīng)focus事件，動(dòng)態(tài)參數(shù)預(yù)期會(huì)求出一個(gè)字符串，異常情況下值為null，null值可以用于移除綁定，任何其他非字符串類(lèi)型的值都會(huì)觸發(fā)一個(gè)警告

template中使用方法

methods中提供的方法大多數(shù)時(shí)候都是用來(lái)給其他方法調(diào)用的，但是它其實(shí)也可以像computed計(jì)算屬性一樣直接寫(xiě)在模版里，舉個(gè)例子：

<div id="app">{{reversedMessage('hello')}}</div>

var app = new Vue({
 el: '#app',
 methods: {
  reversedMessage: function (message) {
   return message.split('').reverse().join('')
  }
 },
})

有了computed計(jì)算屬性，為什么還要用methods呢？計(jì)算屬性是基于響應(yīng)式依賴(lài)進(jìn)行緩存的，只在相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新求值，而methods每次調(diào)用都會(huì)重新計(jì)算，調(diào)用methods時(shí)可以傳參，進(jìn)行指定計(jì)算，但是computed不行，這在遍歷數(shù)組時(shí)十分有用

用key管理可復(fù)用元素

Vue會(huì)盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素而不是從頭開(kāi)始渲染。這么做會(huì)使 Vue變得非?？欤e個(gè)例子：

<div id="app">
  <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>
  <button @click="change">change</button>
</div>

var app = new Vue({
 el: '#app',
 data() {
  return {
   loginType: 'username'
  }
 },
 methods: {
  change () {
   this.loginType = this.loginType === 'username' ? 'email' : 'username'
  }
 }
})

上面代碼中切換loginType將不會(huì)清除用戶(hù)已經(jīng)輸入的內(nèi)容，因?yàn)閮蓚€(gè)模版使用了相同的元素，如果不想復(fù)用也很簡(jiǎn)單，只需要添加一個(gè)具有唯一值的key屬性即可：

<template v-if="loginType === 'username'">
 <label>Username</label>
 <input key="username" placeholder="Enter your username">
</template>
<template v-else>
 <label>Email</label>
 <input key="email" placeholder="Enter your email address">
</template>
<button @click="change">change</button>

現(xiàn)在切換，每次都會(huì)重新渲染，但是label元素還是會(huì)被復(fù)用，因?yàn)樗鼪](méi)有加唯一key值

v-if與v-for一起使用

Vue的風(fēng)格指南不推薦同時(shí)使用v-if與v-for，當(dāng)項(xiàng)目中的eslint繼承了@vue/standard時(shí)，同時(shí)使用就會(huì)編譯報(bào)錯(cuò)，但是可以通過(guò)在模版上加<!-- eslint-disable -->進(jìn)行忽略，同時(shí)當(dāng)它們處于同一節(jié)點(diǎn)，v-for的優(yōu)先級(jí)比v-if更高，這意味著v-if 將分別重復(fù)運(yùn)行于每個(gè)v-for循環(huán)中

對(duì)象變更檢測(cè)

在Vue中對(duì)于已經(jīng)創(chuàng)建的實(shí)例，不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性，但是我們知道可以通過(guò)Vue.set(object, propertyName, value)方法向嵌套對(duì)象添加響應(yīng)式屬性，那如果需要為已有對(duì)象賦值多個(gè)新屬性呢？舉個(gè)例子：

<div id="app">{{user.name}}-{{user.age}}-{{user.sex}}</div>

var app = new Vue({
 el: '#app',
 data() {
  return {
   user: {
    name: 'xxx'
   }
  }
 },
 created() {
  this.user = Object.assign({}, this.user, {
   age: 18,
   sex: 'name'
  })
 },
})

可以用Object.assign為這個(gè)對(duì)象重新賦值，這樣就能添加多個(gè)新的響應(yīng)式屬性

內(nèi)聯(lián)方法訪問(wèn)原始DOM事件

有時(shí)在模版中調(diào)用方法時(shí)，我們需要向方法中傳參數(shù)，但是同時(shí)又要傳遞原始的DOM事件，怎么處理呢？舉個(gè)例子：

<div id="app">
 <button @click="share('share info', $event)">share</button>
</div>

var app = new Vue({
 el: '#app',
 data() {
  return {
   user: {
    name: 'xxx'
   }
  }
 },
 methods: {
  share (info, event) {
   console.log(info, event)
  }
 },
})

如例子所示，可以用特殊變量$event把它傳入方法

once、passive事件修飾符

Vue中提供了多個(gè)事件修飾符， once、passive是后面新增的兩個(gè)，once用于限定事件只觸發(fā)一次，passive用于修飾的事件發(fā)生后立即觸發(fā)，用于提升移動(dòng)端性能

表單輸入修飾符

.lazy

在默認(rèn)情況下，v-model在每次input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步，可以添加lazy修飾符，從而轉(zhuǎn)變?yōu)槭褂胏hange事件進(jìn)行同步，舉個(gè)例子：

<input placeholder="lazy" v-model.lazy="msg" @input="input" @change="change">

.number

如果想自動(dòng)將用戶(hù)的輸入值轉(zhuǎn)為數(shù)值類(lèi)型，可以給v-model添加number修飾符，這通常很有用，因?yàn)榧词乖趖ype="number"時(shí)，HTML輸入元素的值也總會(huì)返回字符串。如果這個(gè)值無(wú)法被 parseFloat()解析，則會(huì)返回原始的值，舉個(gè)例子：

<input placeholder="number" v-model.number="age" @input="input">

.trim

如果要自動(dòng)過(guò)濾用戶(hù)輸入的首尾空白字符，可以給v-model添加trim修飾符，舉個(gè)例子：

<input placeholder="trim" v-model.trim="trim" @input="input">

子組件替換/合并已有的特性

在Vue中對(duì)于絕大多數(shù)特性來(lái)說(shuō)，從外部提供給組件的值會(huì)替換掉組件內(nèi)部設(shè)置好的值。所以如果傳入type="text"就會(huì)替換掉 type="date"并把它破壞！慶幸的是，class和 style特性會(huì)稍微智能一些，即兩邊的值會(huì)被合并起來(lái)，從而得到最終的值，舉個(gè)例子：

<div id="app">
 <base-input type="text" class="out"></base-input>
</div>

Vue.component('base-input', {
 template: `<input type="date" placeholder="replace" class="default">`
})
new Vue({
 el: '#app',
})

在上例中input的type值為date，class為deafault，在使用子組件時(shí)，向子組件中傳入type="text" class="out"，此時(shí)input的type值會(huì)被替換為text，class值會(huì)被合并為"default out"，那么如果想要禁用屬性繼承怎么辦呢？可以在組件的選項(xiàng)中設(shè)置inheritAttrs:false，舉個(gè)例子：

Vue.component('base-input', {
 inheritAttrs: false,
 template: `<input type="date" placeholder="replace" class="default">`
})

但是inheritAttrs:false選項(xiàng)不會(huì)影響style和class的綁定，因此style和class還是會(huì)合并

.sync修飾符

在有些情況下，可能需要對(duì)一個(gè) prop進(jìn)行“雙向綁定”。不幸的是，真正的雙向綁定會(huì)帶來(lái)維護(hù)上的問(wèn)題，因?yàn)樽咏M件可以修改父組件，且在父組件和子組件都沒(méi)有明顯的改動(dòng)來(lái)源，因此Vue提供了sync修飾符，舉個(gè)例子：

<div id="app">
 <span>{{title}}</span>
 <text-document v-bind:title.sync="title"></text-document>
</div>

Vue.component('text-document', {
 props: ['title'],
 template: `<button @click="change">change</button>`,
 methods: {
  change () {
   this.$emit('update:title', 'change')
  }
 },
})
new Vue({
 el: '#app',
 data() {
  return {
   title: 'default'
  }
 }
})

當(dāng)調(diào)用this.$emit('update:title', 'change')，父組件中的title就會(huì)改變

總結(jié)

這篇文章對(duì)Vue中一些容易忽視的點(diǎn)進(jìn)行了簡(jiǎn)單的總結(jié)，希望看完之后能對(duì)大家有所幫助。也希望大家多多支持腳本之家。