Vue 已經成為很多公司前端項目的首選框架，而要成為一個會用 Vue 的開發者并不需要花太多時間和精力去學習大的概念，但作為成為一個更高級的開發者就需要去深入框架和基礎知識的學習。本文跟分享幾個在Vue 項目開發中可以用到的小技巧。

[[418866]]

1. 使用 prop 限制屬性列表

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

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

這個validator 函數接受 prop 值，驗證并返回 true 或 false 。

如實例中的 Card 組件，限制其樣式的可選選項，如 陰影 或者 圓角。還有按鈕類型或警報類型(信息、成功、危險、警告)是一些最常見選線，使用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 跟蹤服務可以跟蹤記錄處理程序中的錯誤，也可以使用它們更優雅地處理錯誤，以獲得更好的UX。如有興趣，可以參閱《一種Vue應用程序錯誤/異常處理機制》。

4. 使用模板標簽進行分組

template 標簽可以在模板內的任何地方使用，以更好地組織代碼。可以用它來簡化 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> 

從上面代碼看，一堆元素被顯示和隱藏在一起，如在更大、更復雜的組件上，這可能是糟糕的表現。可以使用 template 標簽對這些元素進行分組：

<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. 從組件外部調用方法

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

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

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

調用 From 組件，如下：

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

6. 在 v-for 中解構

在模板中使用 v-for 遍歷輸出數據，可以在其使用解構語法。

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

或者數據數據遍歷，需要獲取索引，如下：

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

總結

Vue 項目開發入門容易，但要做到最佳實踐，可以在項目開發過程中積累。