15個Vue技巧,你都知道嗎
前言
學(xué)習(xí)成為一個更好的 Vue 開發(fā)者，并不總是關(guān)于那些需要花時間和精力才能掌握的大概念。
掌握一些技巧和竅門，可以讓我們的編程生活變得更容易--沒有大量重復(fù)的工作。
在使用 Vue 開發(fā)的這幾年里，掌握一些有用的技巧，使用一些更高級的技術(shù)點，總會有用的。
1、將一個 prop 限制在一個類型的列表中
我們在使用 prop 時，可能會有時候需要判斷該 prop 是否在我們規(guī)定的范圍內(nèi)（或者說規(guī)定的值內(nèi)），此時可以使用 prop 定義中的 validator 選項，將一個 prop 類型限制在一組特定的值中。
export default {
name: 'Test',
props: {
name: {
type: String,
},
size: {
type: String,
validator: s => ['small', 'middle'].includes(s)
}
}
};
這個驗證函數(shù)接受一個 prop，如果 prop 有效或無效，則返回 true 或 false。當(dāng)單單傳入的 true 或 false 來控制某些條件不能滿足需求時，我通常使用這個方法來做。
2、使用引號來監(jiān)聽嵌套屬性
你可能使用過 watch 來監(jiān)聽過某個屬性，但是你可能不知道這一點，我們可以通過使用引號輕松地直接監(jiān)聽嵌套值
watch {
'obj.message.name'() {
// ...
}
}
3、知道何時使用 v-if
有時候使用 v-if，往往使用 v-show 來代替，會有更高的性能。
<TableList v-show="isShow" />
當(dāng) v-if 被打開或關(guān)閉時，它將創(chuàng)建并完全銷毀該元素。相反，v-show 將創(chuàng)建該元素并將其留在那里，通過設(shè)置其樣式為 display: none 來隱藏它，如果你要切換的組件的渲染成本很高，那么這樣做會更有效率，特別是對于結(jié)構(gòu)復(fù)雜的組件或頁面來說，更推薦使用 v-show。
反過來說，如果不需要立即執(zhí)行昂貴的組件，可以使用 v-if，這樣它就會跳過渲染它，而使頁面的加載速度更快一些。
4、單個作用域插槽的簡寫
限定范圍的插槽非常有趣，但為了使用它們，您還必須使用許多模板標(biāo)記。幸運的是，有一個簡寫可以讓我們擺脫它，但只有在我們使用單個作用域槽的情況下。
你或許這樣使用過
<TableList>
<template #header="attrList">
<TableHeader v-bind="attrList" />
</template>
</TableList>
不使用 template
<TableList #header="attrList"> <TableHeader v-bind="attrList" /> </TableList>
簡單、直截了當(dāng)，令人贊嘆不已。
5、將局部和全局的 style 混合在一起
通常情況下，在處理樣式時，我們希望它們只在當(dāng)前組件內(nèi)起作用
<style scoped>
.content {
background: green;
}
</style>
不過，如果需要的話，也可以添加一個非作用域樣式塊來添加全局樣式
<style>
/* 全局 */
.content p {
font-size: 12px;
}
</style>
<style scoped>
/* 在該組件內(nèi)有效 */
.content {
background: green;
}
</style>
需要注意，全局樣式是危險的，難以追蹤。但有時，它們是一個完美的逃生艙口，正是你所需要的。
6、重寫子組件的樣式
Scoped CSS 在保持內(nèi)容整潔方面非常棒，而且不會將樣式引入應(yīng)用的其他組件中。但有時我們需要覆蓋一個子組件的樣式，并跳出這個作用域。
Vue 有一個 deep 選擇器可以完成以上功能
<style scoped>
.my-content >>> .child-component {
font-size: 16px;
}
</style>
注意：如果你使用像 LESS 這樣的 CSS 預(yù)處理器，你可能需要使用 /deep/ 來代替
<style lang="less" scoped>
.my-content /deep/ .child-component {
font-size: 16px;
}
</style>
7、如何在 Vue 之外創(chuàng)建一個具有響應(yīng)性的變量
如果你從 Vue 之外得到一個變量，讓它具有反應(yīng)性是很好的。這樣，我們就可以在 computed props、watch 和其他任何地方使用它，它的工作方式就像 Vue 中的任何其他狀態(tài)一樣。
如果我們使用的選項 API，需要的只是將其放在組件的數(shù)據(jù)部分中
const externalVariable = getValue();
export default {
data() {
return {
reactiveVariable: externalVariable,
};
}
};
如果使用 Vue3 的組合 API，可以直接使用 ref 或 reactive
import { ref } from 'vue';
// 可以完全在 Vue 組件之外完成
const externalVariable = getValue();
const reactiveVariable = ref(externalVariable); //使用ref使其具有響應(yīng)性
使用 reactive 代替
import { reactive } from 'vue';
// 可以完全在 Vue 組件之外完成
const externalVariable = getValue();
// reactive 只對對象和數(shù)組起作用
const anotherReactiveVariable = reactive(externalVariable);
如果你還在使用 Vue2，你可以使用 observable 而不是 reactive 來實現(xiàn)完全相同的結(jié)果
import Vue from 'vue' // 可以完全在 Vue 組件之外完成 const externalVariable = getValue(); const anotherReactiveVariable = Vue.observable(externalVariable);
8、v-for 中的解構(gòu)
你是否在v-for 中使用解構(gòu)？
// users: [{name:'leo',id:'1'},{name:'lion',id:'2'}]
<li
v-for="{ name, id } in users"
:key="id"
>
{{ name }}
</li>
更廣為人知的是，可以通過使用這樣的元組從 v-for 中取出索引
<li v-for="(movie, index) in [
'Lion King',
'Frozen',
'The Princess Bride'
]">
{{ index + 1 }} => {{ movie }}
</li>
當(dāng)使用一個對象時，可以這樣使用 key
<li v-for="(value, key) in {
name: 'Lion King',
released: 2019,
director: 'Jon Favreau',
}">
{{ key }}: {{ value }}
</li>
也可以將這兩種方法結(jié)合起來，獲取 key 以及屬性的 index
<li v-for="(value, key, index) in {
name: 'Lion King',
released: 2019,
director: 'Jon Favreau',
}">
{{ index + 1 }} => {{ key }}: {{ value }}
</li>
9、在指定范圍內(nèi)循環(huán)
v-for 允許我們遍歷數(shù)組，也允許我們遍歷一個范圍
<template>
<ul>
<li v-for="num in 6">Item {{ num }}</li>
</ul>
</template>
渲染結(jié)果
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
這里有個注意點，當(dāng)我們使用 v-for 遍歷一個范圍時，它將從 1 開始，以我們指定的數(shù)字結(jié)束。
10、竊取 prop 類型
我們從一個子組件中復(fù)制 prop 類型，只是為了在一個父組件中使用它們。但是往往偷取這些 prop 類型要比僅僅復(fù)制它們好得多，什么意思？
舉個例子，我們在某個組件中使用了一個 List 組件
<template>
<div>
<h2>{{ title }}</h2>
<List
:type="listType"
:size="listSize"
:name="listName"
/>
</div>
</template>
為了讓它正常工作，我們需要添加正確的 prop 類型，從 List 組件復(fù)制
import List from './List';
export default {
components: { List },
props: {
listType: {
type: String,
required: true,
},
listSize: {
type: String,
default: 'medium',
validator: size => [
'small',
'medium',
'large',
'x-large'
].includes(size),
},
listName: {
type: String,
default: 'list',
},
title: {
type: String,
required: true,
},
},
};看下來，有沒有覺得很麻煩？
當(dāng) List 組件的 prop 類型被更新時，我們肯定會忘記返回這個組件并更新它們。隨著時間的推移，當(dāng)該組件的 prop 類型開始偏離 List 組件中的 prop 類型時，就會引入錯誤。
因此，這就是為什么我們要竊取組件的 prop 類型，具體如下
import List from './List';
export default {
components: { List },
props: {
...List.props, // 竊取List的prop，不需要再重復(fù)累贅地一一列出
title: {
type: String,
required: true,
},
},
};
這樣是不是簡便了很多？
除了在上面的例子中，我們把 List 加在每個 prop 名稱的開頭。所以我們必須做一些額外的工作來實現(xiàn)這一點
import List from './List';
const listProps = {};
Object.entries(List.props).forEach((key, val) => {
listProps[`list${key.toUpperCase()}`] = val;
});
export default {
components: { List },
props: {
...listProps,
title: {
type: String,
required: true,
},
},
};現(xiàn)在，如果 List 組件中的 prop 類型被修改，我們的組件將保持最新狀態(tài)。但是，如果一個 prop 類型從 List 組件中被添加或刪除了呢？為了應(yīng)對這些情況，我們可以使用 v-bind 和一個計算的 prop 來保持動態(tài)。
11、檢測元素外部(或內(nèi)部)的單擊
當(dāng)我們需要檢測一個點擊是發(fā)生在一個特定元素 el 的內(nèi)部還是外部，通常使用的方法
window.addEventListener('click', e => {
// 獲取被點擊的元素
const currtentEl = e.target;
// 檢測在el元素的內(nèi)部還是外部
if (el.contains(currtentEl)) {
// 在el里面點擊了
} else {
// 在el外面點擊了
}
});
12、從組件外部調(diào)用一個方法
我們可以從一個組件的外部通過給它一個 ref 用來調(diào)用一個方法
<!-- Parent.vue --> <template> <Child ref="child" /> </template> // 在該組件調(diào)用子組件的方法 this.$refs.child.method();
通常情況下，我們使用 props 和 events 在組件之間進行交流。props 被下發(fā)到子組件中，而 events 被上發(fā)到父組件中
<template>
<Child
:tell-me-what-to-do="someInstructions"
@something-happened="hereIWillHelpYouWithThat"
/>
</template>
// Child.vue
export default {
props: ['trigger'],
watch: {
shouldCallMethod(newVal) {
if (newVal) {
// Call the method when the trigger is set to `true`
this.method();
}
}
}
}這可以正常工作，但只能在第一次調(diào)用時使用。如果您需要多次觸發(fā)此操作，則必須進行清理并重置狀態(tài)。邏輯如下
- 父組件將 true 傳遞給觸發(fā)器 prop
- Watch 被觸發(fā)，然后 Child 組件調(diào)用該方法
- 子組件發(fā)出一個事件，告訴父組件該方法已被成功觸發(fā)
- Parent 組件將 trigger 重置為 false，所以我們可以從頭再來一次
相反，如果我們在子組件上設(shè)置一個 ref，我們可以直接調(diào)用該方法（如最開始的方式），我們打破了 “props down, events up” 的規(guī)則，我們打破了封裝，但是這樣做更清晰，更容易理解。
13、監(jiān)聽數(shù)組和對象
有時候使用 watcher 不能正確觸發(fā)，很多情況下是因為我們試圖監(jiān)聽數(shù)組或?qū)ο?，但沒有將 deep 設(shè)置為 true
export default {
name: 'namesChange',
props: {
names: {
type: Array,
required: true,
},
},
watch: {
names: {
// 這將讓 Vue 知道要在數(shù)組內(nèi)部尋找，如不添加，則不能進行深度監(jiān)聽
deep: true,
handler(newVal,oldVal)
console.log('The list of names has changed!');
}
}
}
}在vue3中使用
watch(
names,
(newVal,oldVal) => {
console.log('The list of names has changed!');
},
{
deep: true,
}
);
14、template 標(biāo)簽的另一個用途
template 標(biāo)簽可以在模板中的任何地方使用，以更好地組織代碼。有時它來簡化 v-if 邏輯，有時也用 v-for。如下，我們有幾個元素都使用同一個 v-if 條件
<template>
<div class="card">
<img src="imgPath" />
<h3>
{{ title }}
</h3>
<h4 v-if="expanded">
{{ subheading }}
</h4>
<div
v-if="expanded"
class="card-content"
>
<slot />
</div>
<SocialShare v-if="expanded" />
</div>
</template>仔細(xì)觀察上面的代碼，我們會發(fā)現(xiàn)一些元素的顯示與隱藏的條件是一樣的，但是這樣寫并不友好，當(dāng)在一個更大、更復(fù)雜的組件上，有可能是一個糟糕的情況。
我們可以使用 template 標(biāo)簽來分組這些元素（v-if 條件一致的元素），并將 v-if 提升到模板 template 本身，達到優(yōu)化的目的
<template>
<div class="card">
<img src="imgPath" />
<h3>
{{ title }}
</h3>
<!-- 將 v-if 提升到分組上 -->
<template v-if="expanded">
<h4>
{{ subheading }}
</h4>
<div class="card-content">
<slot />
</div>
<SocialShare />
</template>
</div>
</template>現(xiàn)在看起來清晰了許多，也更容易理解，而且它在做什么，一目了然。
15、處理錯誤（和警告）的更好方法
我們可以為 Vue 中的錯誤和警告提供一個全局的自定義處理程序
// Vue 2
Vue.config.errorHandler = (err) => {
alert(err);
};
// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {
alert(err);
};
當(dāng)然你也可以用它們來更優(yōu)雅地處理錯誤，以獲得更好的用戶體驗。例如，如果一個錯誤未被處理，應(yīng)用程序不會直接崩潰，而是顯示一個完整的錯誤屏幕，提示用戶刷新或嘗試其他操作。
到此這篇關(guān)于15個Vue技巧,你都知道嗎的文章就介紹到這了,更多相關(guān)Vue 技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Axios 是 Javascript 中最受歡迎的 HTTP 庫之一，我們可以用它在 Vue 程序中調(diào)用API。在本文中我們用 Vue 3 和 Axios 寫一個侃爺語錄小應(yīng)用，可以用這個小程序?qū)W習(xí)英語，同時也能從侃爺?shù)脑捴械玫揭恍﹩l(fā)，而且還可以學(xué)習(xí)用 Vue 異步請求API，一舉多得，何樂而不為呢？2021-05-05
這篇文章主要介紹了vue?導(dǎo)入js中的方法,本文通過兩種方法結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue router重定向redirect如何傳值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了關(guān)于vue動態(tài)合并單元格并添加小計合計功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue-cli3使用postcss-plugin-px2rem方式
這篇文章主要介紹了vue-cli3使用postcss-plugin-px2rem方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue腳手架（vue-cli）搭建項目，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
使用element+vuedraggable實現(xiàn)圖片上傳拖拽排序
這篇文章主要為大家詳細(xì)介紹了使用element+vuedraggable實現(xiàn)圖片上傳拖拽排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
elementPlus組件之表格編輯并校驗功能實現(xiàn)
本文詳細(xì)介紹了如何使用Element Plus組件實現(xiàn)表格的單條數(shù)據(jù)新增、編輯、刪除操作,并對數(shù)據(jù)進行校驗,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧2024-12-12
Vue項目設(shè)置多個靜態(tài)文件及自定義靜態(tài)文件目錄的方案詳解
本文介紹了如何在Vue項目中配置多個靜態(tài)文件目錄,并提供了使用Vite和Webpack實現(xiàn)的示例,通過在vite.config.ts或vue.config.js中引入相關(guān)插件和配置,可以輕松實現(xiàn)自定義靜態(tài)文件目錄,希望這些內(nèi)容對您有所幫助,感興趣的朋友一起看看吧2025-01-01
這篇文章主要為大家介紹了vue項目下載文件重命名監(jiān)測進度demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10