簡(jiǎn)述Vue中容易被忽視的知識(shí)點(diǎn)
前言
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ì)大家有所幫助。也希望大家多多支持腳本之家。
- 關(guān)于vue.js彈窗組件的知識(shí)點(diǎn)總結(jié)
- Vue面試題及Vue知識(shí)點(diǎn)整理
- Vue.js進(jìn)階知識(shí)點(diǎn)總結(jié)
- Vue.js在使用中的一些注意知識(shí)點(diǎn)
- vuex進(jìn)階知識(shí)點(diǎn)鞏固
- vue雙向數(shù)據(jù)綁定知識(shí)點(diǎn)總結(jié)
- vue項(xiàng)目前端知識(shí)點(diǎn)整理【收藏】
- vue路由攔截器和請(qǐng)求攔截器知識(shí)點(diǎn)總結(jié)
- Vue組件通信中非父子組件傳值知識(shí)點(diǎn)總結(jié)
相關(guān)文章
el-table?動(dòng)態(tài)合并不定項(xiàng)多級(jí)表頭的方法
本文主要介紹了el-table?動(dòng)態(tài)合并不定項(xiàng)多級(jí)表頭的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue精美簡(jiǎn)潔登錄頁(yè)完整代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue精美簡(jiǎn)潔登錄頁(yè)完整代碼的相關(guān)資料,通過(guò)文中的方法大家可以使用實(shí)現(xiàn)簡(jiǎn)單的用戶(hù)登錄界面,下面通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue?退出登錄?清除localStorage的問(wèn)題
這篇文章主要介紹了vue?退出登錄?清除localStorage的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12
UniApp在Vue3下使用setup語(yǔ)法糖創(chuàng)建和使用自定義組件的操作方法
通過(guò)defineProps定義屬性,defineEmits定義事件,computed創(chuàng)建計(jì)算屬性,emitEvent方法觸發(fā)事件,在其他組件中導(dǎo)入并使用這些自定義組件,傳遞屬性和監(jiān)聽(tīng)事件,實(shí)現(xiàn)組件的復(fù)用性和可維護(hù)性,感興趣的朋友跟隨小編一起看看吧2024-11-11
VUE3使用Element-Plus時(shí)如何修改ElMessage中的文字大小
在使用Element-plus的Elmessage時(shí)使用默認(rèn)的size無(wú)法滿(mǎn)足我們的需求時(shí),我們可以自定義字體的大小,但是直接重寫(xiě)樣式后,并沒(méi)有起作用,甚至使用::v-deep深度選擇器也沒(méi)有效果,本文介紹VUE3使用Element-Plus時(shí)如何修改ElMessage中的文字大小,感興趣的朋友一起看看吧2023-09-09
Vue手動(dòng)埋點(diǎn)設(shè)計(jì)的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue手動(dòng)埋點(diǎn)設(shè)計(jì)的相關(guān)資料,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,需要的朋友可以參考下2022-03-03
Vue3中實(shí)現(xiàn)歌詞滾動(dòng)顯示效果
本文分享如何在Vue 3中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的歌詞滾動(dòng)效果,我將從歌詞數(shù)據(jù)的處理開(kāi)始,一步步介紹布局的搭建和事件的實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-02-02

