您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue使用技巧實(shí)例分析”的相關(guān)知識,小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“Vue使用技巧實(shí)例分析”文章能幫助大家解決問題。
我們在使用 prop 時,可能會有時候需要判斷該 prop 是否在我們規(guī)定的范圍內(nèi)(或者說規(guī)定的值內(nèi)),此時可以使用 prop 定義中的 validator 選項(xiàng),將一個 prop 類型限制在一組特定的值中。
export default { name: 'Test', props: { name: { type: String, }, size: { type: String, validator: s => ['small', 'middle'].includes(s) } } };
這個驗(yàn)證函數(shù)接受一個 prop,如果 prop 有效或無效,則返回 true 或 false。當(dāng)單單傳入的 true 或 false 來控制某些條件不能滿足需求時,我通常使用這個方法來做。
你可能使用過 watch 來監(jiān)聽過某個屬性,但是你可能不知道這一點(diǎn),我們可以通過使用引號輕松地直接監(jiān)聽嵌套值
watch { 'obj.message.name'() { // ... } }
有時候使用 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,這樣它就會跳過渲染它,而使頁面的加載速度更快一些。
限定范圍的插槽非常有趣,但為了使用它們,您還必須使用許多模板標(biāo)記。幸運(yùn)的是,有一個簡寫可以讓我們擺脫它,但只有在我們使用單個作用域槽的情況下。
你或許這樣使用過
<TableList> <template #header="attrList"> <TableHeader v-bind="attrList" /> </template> </TableList>
不使用 template
<TableList #header="attrList"> <TableHeader v-bind="attrList" /> </TableList>
簡單、直截了當(dāng),令人贊嘆不已。
通常情況下,在處理樣式時,我們希望它們只在當(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>
需要注意,全局樣式是危險的,難以追蹤。但有時,它們是一個完美的逃生艙口,正是你所需要的。
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>
如果你從 Vue 之外得到一個變量,讓它具有反應(yīng)性是很好的。這樣,我們就可以在 computed props、watch 和其他任何地方使用它,它的工作方式就像 Vue 中的任何其他狀態(tài)一樣。
如果我們使用的選項(xiàng) 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 來實(shí)現(xiàn)完全相同的結(jié)果
import Vue from 'vue' // 可以完全在 Vue 組件之外完成 const externalVariable = getValue(); const anotherReactiveVariable = Vue.observable(externalVariable);
你是否在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>
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
這里有個注意點(diǎn),當(dāng)我們使用 v-for 遍歷一個范圍時,它將從 1 開始,以我們指定的數(shù)字結(jié)束。
我們從一個子組件中復(fù)制 prop 類型,只是為了在一個父組件中使用它們。但是往往偷取這些 prop 類型要比僅僅復(fù)制它們好得多,什么意思?
舉個例子,我們在某個組件中使用了一個 List 組件
<template> <div> <h3>{{ title }}</h3> <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 名稱的開頭。所以我們必須做一些額外的工作來實(shí)現(xiàn)這一點(diǎ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 和一個計(jì)算的 prop 來保持動態(tài)。
當(dāng)我們需要檢測一個點(diǎn)擊是發(fā)生在一個特定元素 el 的內(nèi)部還是外部,通常使用的方法
window.addEventListener('click', e => { // 獲取被點(diǎn)擊的元素 const currtentEl = e.target; // 檢測在el元素的內(nèi)部還是外部 if (el.contains(currtentEl)) { // 在el里面點(diǎn)擊了 } else { // 在el外面點(diǎn)擊了 } });
我們可以從一個組件的外部通過給它一個 ref 用來調(diào)用一個方法
<!-- Parent.vue --> <template> <Child ref="child" /> </template> // 在該組件調(diào)用子組件的方法 this.$refs.child.method();
通常情況下,我們使用 props 和 events 在組件之間進(jìn)行交流。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ā)此操作,則必須進(jìn)行清理并重置狀態(tài)。邏輯如下
父組件將 true 傳遞給觸發(fā)器 prop
Watch 被觸發(fā),然后 Child 組件調(diào)用該方法
子組件發(fā)出一個事件,告訴父組件該方法已被成功觸發(fā)
Parent 組件將 trigger 重置為 false,所以我們可以從頭再來一次
相反,如果我們在子組件上設(shè)置一個 ref,我們可以直接調(diào)用該方法(如最開始的方式),我們打破了 “props down, events up” 的規(guī)則,我們打破了封裝,但是這樣做更清晰,更容易理解。
有時候使用 watcher 不能正確觸發(fā),很多情況下是因?yàn)槲覀冊噲D監(jiān)聽數(shù)組或?qū)ο?,但沒有將 deep 設(shè)置為 true
export default { name: 'namesChange', props: { names: { type: Array, required: true, }, }, watch: { names: { // 這將讓 Vue 知道要在數(shù)組內(nèi)部尋找,如不添加,則不能進(jìn)行深度監(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, } );
template 標(biāo)簽可以在模板中的任何地方使用,以更好地組織代碼。有時它來簡化 v-if 邏輯,有時也用 v-for。如下,我們有幾個元素都使用同一個 v-if 條件
<template> <div class="card"> <img src="imgPath" /> <h4> {{ title }} </h4> <h5 v-if="expanded"> {{ subheading }} </h5> <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 本身,達(dá)到優(yōu)化的目的
<template> <div class="card"> <img src="imgPath" /> <h4> {{ title }} </h4> <!-- 將 v-if 提升到分組上 --> <template v-if="expanded"> <h5> {{ subheading }} </h5> <div class="card-content"> <slot /> </div> <SocialShare /> </template> </div> </template>
現(xiàn)在看起來清晰了許多,也更容易理解,而且它在做什么,一目了然。
我們可以為 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àn)。例如,如果一個錯誤未被處理,應(yīng)用程序不會直接崩潰,而是顯示一個完整的錯誤屏幕,提示用戶刷新或嘗試其他操作。
關(guān)于“Vue使用技巧實(shí)例分析”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。