基于vue前端架构设计（vue前端开发技术）

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

1. 使用 prop 限制属性列表

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

1. <template>
2. <div></div>
3. </template>
4. <script>
5. exportdefault{
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. //Vue3
2. constapp=createApp(App);
3. app.config.errorHandler=(err)=>{
4. console.error(err);
5. };
7. //Vue2
8. Vue.config.errorHandler=(err)=>{
9. console.error(err);
10. };

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

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

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

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

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

1. <template>
2. <divclass="card">
3. <h3>
4. {{title}}
5. </h3>
6. <templatev-if="expanded">
7. <h4>
8. {{subheading}}
9. </h4>
10. <divclass="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. exportdefault{
6. name:"QtForm",
7. methods:{
8. init(options){},
9. },
10. };
11. </script>

调用 From 组件，如下：

1. <template>
2. <QtFormref="dataForm"/>
3. </template>
4. exportdefault{
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}inarticles"
3. :key="id"
4. >
5. {{title}}
6. </li>

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

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

总结

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

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

如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）

您的姓名 *

身份证号码 *

手机号码 *

选择地区 *

详细地址 *

留言备注 *