Vue 曾经成为很多公司前端项目的首选框架，而要成为一个会用 Vue 的开发者并不需求花太多时间和精神去学习大的概念，但作为成为一个更初级的开发者就需求去深化框架和基础知识的学习。本文跟分享几个在Vue 项目开发中可以用到的小技巧。
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 项目开发入门容易，但要做到最佳实际，可以在项目开发进程中积聚。
【编辑引荐】
支付宝接口开发视频教程
适宜开发人员的 5款 Linux 发行版
(责任编辑：admin)