Vue中容易被忽視的知識點(diǎn)有哪些-創(chuàng)新互聯(lián)

小編給大家分享一下Vue中容易被忽視的知識點(diǎn)有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

站在用戶的角度思考問題，與客戶深入溝通，找到溆浦網(wǎng)站設(shè)計(jì)與溆浦網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋溆浦地區(qū)。

Vue的優(yōu)點(diǎn)

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

容易忽視的點(diǎn)

箭頭函數(shù)的使用

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

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

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

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

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

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

template中使用方法

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

<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)式依賴進(jìn)行緩存的，只在相關(guān)依賴發(fā)生改變時才會重新求值，而methods每次調(diào)用都會重新計(jì)算，調(diào)用methods時可以傳參，進(jìn)行指定計(jì)算，但是computed不行，這在遍歷數(shù)組時十分有用

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

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

<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將不會清除用戶已經(jīng)輸入的內(nèi)容，因?yàn)閮蓚€模版使用了相同的元素，如果不想復(fù)用也很簡單，只需要添加一個具有唯一值的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)在切換，每次都會重新渲染，但是label元素還是會被復(fù)用，因?yàn)樗鼪]有加唯一key值

v-if與v-for一起使用

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

對象變更檢測

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

<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為這個對象重新賦值，這樣就能添加多個新的響應(yīng)式屬性

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

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

<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中提供了多個事件修飾符， once、passive是后面新增的兩個，once用于限定事件只觸發(fā)一次，passive用于修飾的事件發(fā)生后立即觸發(fā)，用于提升移動端性能

表單輸入修飾符

.lazy

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

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

.number

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

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

.trim

如果要自動過濾用戶輸入的首尾空白字符，可以給v-model添加trim修飾符，舉個例子：

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

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

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

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

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

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

.sync修飾符

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

<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就會改變

以上是“Vue中容易被忽視的知識點(diǎn)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前文章：Vue中容易被忽視的知識點(diǎn)有哪些-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://muchs.cn/article14/dpjgde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、微信公眾號、外貿(mào)建站、關(guān)鍵詞優(yōu)化、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化