前端架构师成长之路：分享 6 个实用的 Vue 技巧

Vue 已经成为很多公司前端项目的首选框架，而要成为一个会用 Vue 的开发者并不需要花太多时间和精力去学习大的概念，但作为成为一个更高级的开发者就需要去深入框架和基础知识的学习。本文跟分享几个在Vue 项目开发中可以用到的小技巧。

1. 使用 prop 限制属性列表

Vue 让自定义组件变得容易，在自定义组件的时候难免不需要传值，建议使用 prop 定义属性，并使用属性中的 validator 来为属性定义合法性规则：

1. <template> 
2.     <div></div> 
3. </template> 
4. <script> 
5. export default { 
6.     name: "QtCardBox", 
7.     props: { 
8.         content: { 
9.             type: String, 
10.         }, 
11.         style: { 
12.             type: String, 
13.             validator: (s) => ["boxShadow", "rounded"].includes(s), 
14.         }, 
15.     }, 
16. }; 
17. </script> 

这个validator 函数接受 prop 值，验证并返回 true 或 false 。

如实例中的 Card 组件，限制其样式的可选选项，如 阴影 或者 圆角。还有按钮类型或警报类型(信息、成功、危险、警告)是一些最常见选线，使用validator 来限制属性值的合法性。

2. 使用引号 watch 嵌套值

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

1. watch: { 
2.     "$route.query.id"() { 
3.         // ... 
4.     }, 
5. }, 

这对于处理深度嵌套的对象非常有用!

3. 错误(警告)处理

为 Vue 中的错误和警告提供自定义处理程序：

1. // Vue 3 
2. const app = createApp(App); 
3. app.config.errorHandler = (err) => { 
4.     console.error(err); 
5. }; 
6.  
7. // Vue 2 
8. Vue.config.errorHandler = (err) => { 
9.     console.error(err); 
10. }; 

Bug 跟踪服务可以跟踪记录处理程序中的错误，也可以使用它们更优雅地处理错误，以获得更好的UX。如有兴趣，可以参阅《一种Vue应用程序错误/异常处理机制》。

4. 使用模板标签进行分组

template 标签可以在模板内的任何地方使用，以更好地组织代码。可以用它来简化 v-if 和 v-for 逻辑，来看下面的代码：

1. <template> 
2.     <div class="card"> 
3.         <h3> 
4.             {{ title }} 
5.         </h3> 
6.         <h4 v-if="expanded"> 
7.             {{ subheading }} 
8.         </h4> 
9.         <div v-if="expanded" class="card-content"> 
10.             <slot /> 
11.         </div> 
12.         <ActionShare v-if="expanded" /> 
13.     </div> 
14. </template> 

从上面代码看，一堆元素被显示和隐藏在一起，如在更大、更复杂的组件上，这可能是糟糕的表现。可以使用 template 标签对这些元素进行分组：

1. <template> 
2.     <div class="card"> 
3.         <h3> 
4.             {{ title }} 
5.         </h3> 
6.         <template v-if="expanded"> 
7.             <h4> 
8.                 {{ subheading }} 
9.             </h4> 
10.             <div class="card-content"> 
11.                 <slot /> 
12.             </div> 
13.             <ActionShare /> 
14.         </template> 
15.     </div> 
16. </template> 

5. 从组件外部调用方法

通过 ref 可以从组件外部调用组件内的方法，在代码和逻辑上更加清晰。现在假如有一个 Form 表单组件，对于新增或者编辑都是使用同一个表单组件，就会涉及初始化的问题，下面来看看代码：

组件代码，其逻辑这里就忽略。

1. <template> 
2.     <div></div> 
3. </template> 
4. <script> 
5. export default { 
6.     name: "QtForm", 
7.     methods: { 
8.         init(options) {}, 
9.     }, 
10. }; 
11. </script> 

调用 From 组件，如下：

1. <template> 
2.     <QtForm ref="dataForm" /> 
3. </template> 
4. export default { 
5.     methods: { 
6.         showForm(){ 
7.             this.$refs.dataForm.init({action:"add"}); 
8.         } 
9.     }, 
10. }; 
11. </script> 

6. 在 v-for 中解构

在模板中使用 v-for 遍历输出数据，可以在其使用解构语法。

1. <li 
2.   v-for="{ title, id } in articles" 
3.   :key="id" 
4. > 
5.   {{ title }} 
6. </li> 

或者数据数据遍历，需要获取索引，如下：

1. <li 
2.   v-for="( item, index ) in articles" 
3.   :key="index" 
4. > 
5.   {{ index }} 
6. </li> 

总结

Vue 项目开发入门容易，但要做到最佳实践，可以在项目开发过程中积累。

原文链接：https://www.toutiao.com/a6998678000191685133/