Vue 已經(jīng)成為很多公司前端項(xiàng)目的首選框架，而要成為一個(gè)會用 Vue 的開發(fā)者并不需要花太多時(shí)間和精力去學(xué)習(xí)大的概念，但作為成為一個(gè)更高級的開發(fā)者就需要去深入框架和基礎(chǔ)知識的學(xué)習(xí)。本文跟分享幾個(gè)在Vue 項(xiàng)目開發(fā)中可以用到的小技巧。

[[418866]]

1. 使用 prop 限制屬性列表

Vue 讓自定義組件變得容易，在自定義組件的時(shí)候難免不需要傳值，建議使用 prop 定義屬性，并使用屬性中的 validator 來為屬性定義合法性規(guī)則：

<template> 
    <div></div> 
</template> 
<script> 
export default { 
    name: "QtCardBox", 
    props: { 
        content: { 
            type: String, 
        }, 
        style: { 
            type: String, 
            validator: (s) => ["boxShadow", "rounded"].includes(s), 
        }, 
    }, 
}; 
</script> 

這個(gè)validator 函數(shù)接受 prop 值，驗(yàn)證并返回 true 或 false 。

如實(shí)例中的 Card 組件，限制其樣式的可選選項(xiàng)，如 陰影 或者 圓角。還有按鈕類型或警報(bào)類型(信息、成功、危險(xiǎn)、警告)是一些最常見選線，使用validator 來限制屬性值的合法性。

2. 使用引號 watch 嵌套值

可以輕松地直接查看嵌套值，只需使用引號：

watch: { 
    "$route.query.id"() { 
        // ... 
    }, 
}, 

這對于處理深度嵌套的對象非常有用!

3. 錯誤(警告)處理

為 Vue 中的錯誤和警告提供自定義處理程序：

// Vue 3 
const app = createApp(App); 
app.config.errorHandler = (err) => { 
    console.error(err); 
}; 
 
// Vue 2 
Vue.config.errorHandler = (err) => { 
    console.error(err); 
}; 

Bug 跟蹤服務(wù)可以跟蹤記錄處理程序中的錯誤，也可以使用它們更優(yōu)雅地處理錯誤，以獲得更好的UX。如有興趣，可以參閱《一種Vue應(yīng)用程序錯誤/異常處理機(jī)制》。

4. 使用模板標(biāo)簽進(jìn)行分組

template 標(biāo)簽可以在模板內(nèi)的任何地方使用，以更好地組織代碼?？梢杂盟鼇砗喕?v-if 和 v-for 邏輯，來看下面的代碼：

<template> 
    <div class="card"> 
        <h3> 
            {{ title }} 
        </h3> 
        <h4 v-if="expanded"> 
            {{ subheading }} 
        </h4> 
        <div v-if="expanded" class="card-content"> 
            <slot /> 
        </div> 
        <ActionShare v-if="expanded" /> 
    </div> 
</template> 

從上面代碼看，一堆元素被顯示和隱藏在一起，如在更大、更復(fù)雜的組件上，這可能是糟糕的表現(xiàn)?？梢允褂?template 標(biāo)簽對這些元素進(jìn)行分組：

<template> 
    <div class="card"> 
        <h3> 
            {{ title }} 
        </h3> 
        <template v-if="expanded"> 
            <h4> 
                {{ subheading }} 
            </h4> 
            <div class="card-content"> 
                <slot /> 
            </div> 
            <ActionShare /> 
        </template> 
    </div> 
</template> 

5. 從組件外部調(diào)用方法

通過 ref 可以從組件外部調(diào)用組件內(nèi)的方法，在代碼和邏輯上更加清晰?，F(xiàn)在假如有一個(gè) Form 表單組件，對于新增或者編輯都是使用同一個(gè)表單組件，就會涉及初始化的問題，下面來看看代碼：

組件代碼，其邏輯這里就忽略。

<template> 
    <div></div> 
</template> 
<script> 
export default { 
    name: "QtForm", 
    methods: { 
        init(options) {}, 
    }, 
}; 
</script> 

調(diào)用 From 組件，如下：

<template> 
    <QtForm ref="dataForm" /> 
</template> 
export default { 
    methods: { 
        showForm(){ 
            this.$refs.dataForm.init({action:"add"}); 
        } 
    }, 
}; 
</script> 

6. 在 v-for 中解構(gòu)

在模板中使用 v-for 遍歷輸出數(shù)據(jù)，可以在其使用解構(gòu)語法。

<li 
  v-for="{ title, id } in articles" 
  :key="id" 
> 
  {{ title }} 
</li> 

或者數(shù)據(jù)數(shù)據(jù)遍歷，需要獲取索引，如下：

<li 
  v-for="( item, index ) in articles" 
  :key="index" 
> 
  {{ index }} 
</li> 

總結(jié)

Vue 項(xiàng)目開發(fā)入門容易，但要做到最佳實(shí)踐，可以在項(xiàng)目開發(fā)過程中積累。