目录
我的博客原文：12个 Vue 技巧，你确定你知道？
学习成为一个更好的 Vue 开发者，并不总是关于那些需要花时间和精力才能掌握的大概念。掌握一些技巧和窍门，可以让我们的编程生活变得更容易--没有大量重复的工作。下面我主要介绍12个常用的vue技巧。
1、将一个 prop 限制在一个类型的列表中
我们在使用 prop 时，可能会有时候需要判断该 prop 是否在我们规定的范围内（或者说规定的值内），此时可以使用 prop 定义中的 validator 选项，将一个 prop 类型限制在一组特定的值中。
export default {
name: 'Test',
props: {
name: {
type: String,
},
size: {
type: String,
validator: s => ['small', 'middle'].includes(s)
}
}
};这个验证函数接受一个 prop，如果 prop 有效或无效，则返回 true 或 false。当单单传入的 true 或 false 来控制某些条件不能满足需求时，我通常使用这个方法来做。
2、使用引号来监听嵌套属性
watch {
'obj.message.name'() {
// ...
}
}3、知道何时使用 v-if
有时候使用 v-if，往往使用 v-show 来代替，会有更高的性能。
<TableList v-show="isShow" />当 v-if 被打开或关闭时，它将创建并完全销毁该元素。相反，v-show 将创建该元素并将其留在那里，通过设置其样式为 display: none 来隐藏它，如果你要切换的组件的渲染成本很高，那么这样做会更有效率，特别是对于结构复杂的组件或页面来说，更推荐使用 v-show。
反过来说，如果不需要立即执行昂贵的组件，可以使用 v-if，这样它就会跳过渲染它，而使页面的加载速度更快一些。
4、单个作用域插槽的简写
限定范围的插槽非常有趣，但为了使用它们，您还必须使用许多模板标记。幸运的是，有一个简写可以让我们摆脱它，但只有在我们使用单个作用域槽的情况下。
你或许这样使用过
<TableList>
<template #header="attrList">
<TableHeader v-bind="attrList" />
</template>
</TableList>不使用 template
<TableList #header="attrList">
<TableHeader v-bind="attrList" />
</TableList>简单、直截了当，令人赞叹不已。
5、将局部和全局的 style 混合在一起
<style scoped>
.content {
background: green;
}
</style>不过，如果需要的话，也可以添加一个非作用域样式块来添加全局样式
<style>
/* 全局 */
.content p {
font-size: 12px;
}
</style>
<style scoped>
/* 在该组件内有效 */
.content {
background: green;
}
</style>需要注意，全局样式是危险的，难以追踪。但有时，它们是一个完美的逃生舱口，正是你所需要的。
6、重写子组件的样式
Scoped CSS 在保持内容整洁方面非常棒，而且不会将样式引入应用的其他组件中。但有时我们需要覆盖一个子组件的样式，并跳出这个作用域。
Vue 有一个 deep 选择器可以完成以上功能
<style scoped>
.my-content >>> .child-component {
font-size: 16px;
}
</style>注意：如果你使用像 LESS 这样的 CSS 预处理器，你可能需要使用 /deep/ 来代替
<style lang="less" scoped>
.my-content /deep/ .child-component {
font-size: 16px;
}
</style>7、如何在 Vue 之外创建一个具有响应性的变量
如果你从 Vue 之外得到一个变量，让它具有反应性是很好的。这样，我们就可以在 computed props、watch 和其他任何地方使用它，它的工作方式就像 Vue 中的任何其他状态一样。
如果我们使用的选项 API，需要的只是将其放在组件的数据部分中
const externalVariable = getValue();
export default {
data() {
return {
reactiveVariable: externalVariable,
};
}
};如果使用 Vue3 的组合 API，可以直接使用 ref 或 reactive
import { ref } from 'vue';
// 可以完全在 Vue 组件之外完成
const externalVariable = getValue();
const reactiveVariable = ref(externalVariable); //使用ref使其具有响应性使用 reactive 代替
import { reactive } from 'vue';
// 可以完全在 Vue 组件之外完成
const externalVariable = getValue();
// reactive 只对对象和数组起作用
const anotherReactiveVariable = reactive(externalVariable)如果你还在使用 Vue2，你可以使用 observable 而不是 reactive 来实现完全相同的结果
import Vue from 'vue'
// 可以完全在 Vue 组件之外完成
const externalVariable = getValue();
const anotherReactiveVariable = Vue.observable(externalVariable);8、v-for 中的解构
你是否在v-for 中使用解构？
// users: [{name:'leo',id:'1'},{name:'lion',id:'2'}]
<li
v-for="{ name, id } in users"
:key="id"
>
{{ name }}
</li>更广为人知的是，可以通过使用这样的元组从 v-for 中取出索引
<li v-for="(movie, index) in [
'Lion King',
'Frozen',
'The Princess Bride'
]">
{{ index + 1 }} => {{ movie }}
</li>当使用一个对象时，可以这样使用 key
<li v-for="(value, key) in {
name: 'Lion King',
released: 2019,
director: 'Jon Favreau',
}">
{{ key }}: {{ value }}
</li>也可以将这两种方法结合起来，获取 key 以及属性的 index
<li v-for="(value, key, index) in {
name: 'Lion King',
released: 2019,
director: 'Jon Favreau',
}">
{{ index + 1 }} => {{ key }}: {{ value }}
</li>
9、在指定范围内循环
v-for 允许我们遍历数组，也允许我们遍历一个范围
<template>
<ul>
<li v-for="num in 6">Item {{ num }}</li>
</ul>
</template>渲染结果
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6这里有个注意点，当我们使用 v-for 遍历一个范围时，它将从 1 开始，以我们指定的数字结束。
10、检测元素外部(或内部)的单击
当我们需要检测一个点击是发生在一个特定元素 el 的内部还是外部，通常使用的方法
window.addEventListener('click', e => {
// 获取被点击的元素
const currtentEl = e.target;
// 检测在el元素的内部还是外部
if (el.contains(currtentEl)) {
// 在el里面点击了
} else {
// 在el外面点击了
}
});11、从组件外部调用一个方法
我们可以从一个组件的外部通过给它一个 ref 用来调用一个方法
<!-- Parent.vue -->
<template>
<Child ref="child" />
</template>
// 在该组件调用子组件的方法
this.$refs.child.method();通常情况下，我们使用 props 和 events 在组件之间进行交流。props 被下发到子组件中，而 events 被上发到父组件中
<template>
<Child
:tell-me-what-to-do="someInstructions"
@something-happened="hereIWillHelpYouWithThat"
/>
</template>
// Child.vue
export default {
props: ['trigger'],
watch: {
shouldCallMethod(newVal) {
if (newVal) {
// Call the method when the trigger is set to `true`
this.method();
}
}
}
}这可以正常工作，但只能在第一次调用时使用。如果您需要多次触发此操作，则必须进行清理并重置状态。逻辑如下
父组件将 true 传递给触发器 prop
Watch 被触发，然后 Child 组件调用该方法
子组件发出一个事件，告诉父组件该方法已被成功触发
Parent 组件将 trigger 重置为 false，所以我们可以从头再来一次
相反，如果我们在子组件上设置一个 ref，我们可以直接调用该方法（如最开始的方式），我们打破了 “props
down, events up” 的规则，我们打破了封装，但是这样做更清晰，更容易理解。
12、监听数组和对象
有时候使用 watcher 不能正确触发，很多情况下是因为我们试图监听数组或对象，但没有将 deep 设置为 true
export default {
name: 'namesChange',
props: {
names: {
type: Array,
required: true,
},
},
watch: {
names: {
// 这将让 Vue 知道要在数组内部寻找，如不添加，则不能进行深度监听
deep: true,
handler(newVal,oldVal)
console.log('The list of names has changed!');
}
}
}
}在vue3中使用
watch(
names,
(newVal,oldVal) => {
console.log('The list of names has changed!');
},
{
deep: true,
}
);今天就介绍到这里啦！ 欢迎在评论区交流。
如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。
往期回顾
vue3.x使用prerender-spa-plugin预渲染达到SEO优化
vue3.x使用prerender-spa-plugin预渲染达到SEO优化
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
