目录
前言
学习成为一个更好的 Vue 开发者，并不总是关于那些需要花时间和精力才能掌握的大概念。
掌握一些技巧和窍门，可以让我们的编程生活变得更容易–没有大量重复的工作。
在使用 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 来监听过某个属性，但是你可能不知道这一点，我们可以通过使用引号轻松地直接监听嵌套值
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、窃取 prop 类型
我们从一个子组件中复制 prop 类型，只是为了在一个父组件中使用它们。但是往往偷取这些 prop 类型要比仅仅复制它们好得多，什么意思？
举个例子，我们在某个组件中使用了一个 List组件
<template>
??<div>
????<h2>{{?title?}}</h2>
????<List
??????:type="listType"
??????:size="listSize"
:name="listName"
????/>
??</div>
</template>
为了让它正常工作，我们需要添加正确的 prop 类型，从 List 组件复制
import?List?from?'./List';
export?default?{
??components:?{?List?},
??props:?{
????listType:?{
??????type:?String,
??????required:?true,
????},
????listSize:?{
??????type:?String,
??????default:?'medium',
??????validator:?size?=>?[
????????'small',
????????'medium',
????????'large',
????????'x-large'
??????].includes(size),
????},
????listName:?{
??????type:?String,
??????default:?'list',
????},
????title:?{
??????type:?String,
??????required:?true,
????},
??},
};
看下来，有没有觉得很麻烦？
当 List组件的 prop 类型被更新时，我们肯定会忘记返回这个组件并更新它们。随着时间的推移，当该组件的 prop 类型开始偏离 List组件中的 prop 类型时，就会引入错误。
因此，这就是为什么我们要窃取组件的 prop 类型，具体如下
import?List?from?'./List';
export?default?{
??components:?{?List?},
??props:?{
????...List.props, // 窃取List的prop，不需要再重复累赘地一一列出
????title:?{
??????type:?String,
??????required:?true,
????},
??},
};
这样是不是简便了很多？
除了在上面的例子中，我们把 List加在每个 prop 名称的开头。所以我们必须做一些额外的工作来实现这一点
import?List?from?'./List';
const?listProps?=?{};
Object.entries(List.props).forEach((key,?val)?=>?{
??listProps[`list${key.toUpperCase()}`]?=?val;
});
export?default?{
??components:?{?List?},
??props:?{
????...listProps,
????title:?{
??????type:?String,
??????required:?true,
????},
??},
};
现在，如果 List组件中的 prop 类型被修改，我们的组件将保持最新状态。但是，如果一个 prop 类型从 List组件中被添加或删除了呢？为了应对这些情况，我们可以使用 v-bind 和一个计算的 prop 来保持动态。
11、检测元素外部(或内部)的单击
当我们需要检测一个点击是发生在一个特定元素 el 的内部还是外部，通常使用的方法
window.addEventListener('click',?e?=>?{
??//?获取被点击的元素
??const?currtentEl?=?e.target;
??// 检测在el元素的内部还是外部
??if?(el.contains(currtentEl))?{
???// 在el里面点击了
??}?else?{
???// 在el外面点击了
??}
});
12、从组件外部调用一个方法
我们可以从一个组件的外部通过给它一个 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” 的规则，我们打破了封装，但是这样做更清晰，更容易理解。
13、监听数组和对象
有时候使用 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,
??}
);
14、template 标签的另一个用途
template 标签可以在模板中的任何地方使用，以更好地组织代码。有时它来简化 v-if 逻辑，有时也用 v-for。如下，我们有几个元素都使用同一个 v-if 条件
<template>
??<div?class="card">
????<img?src="imgPath"?/>
????<h3>
??????{{?title?}}
????</h3>
????<h4?v-if="expanded">
??????{{?subheading?}}
????</h4>
????<div
??????v-if="expanded"
??????class="card-content"
????>
??????<slot?/>
????</div>
????<SocialShare?v-if="expanded"?/>
??</div>
</template>
仔细观察上面的代码，我们会发现一些元素的显示与隐藏的条件是一样的，但是这样写并不友好，当在一个更大、更复杂的组件上，有可能是一个糟糕的情况。
我们可以使用 template 标签来分组这些元素（v-if 条件一致的元素），并将 v-if 提升到模板 template本身，达到优化的目的
<template>
??<div?class="card">
????<img?src="imgPath"?/>
????<h3>
??????{{?title?}}
????</h3>
<!-- 将 v-if 提升到分组上 -->
????<template?v-if="expanded">
??????<h4>
????????{{?subheading?}}
??????</h4>
??????<div?class="card-content">
????????<slot?/>
??????</div>
??????<SocialShare?/>
????</template>
??</div>
</template>
现在看起来清晰了许多，也更容易理解，而且它在做什么，一目了然。
15、处理错误（和警告）的更好方法
我们可以为 Vue 中的错误和警告提供一个全局的自定义处理程序
//?Vue?2
Vue.config.errorHandler?=?(err)?=>?{
??alert(err);
};
//?Vue?3
const?app?=?createApp(App);
app.config.errorHandler?=?(err)?=>?{
??alert(err);
};
当然你也可以用它们来更优雅地处理错误，以获得更好的用户体验。例如，如果一个错误未被处理，应用程序不会直接崩溃，而是显示一个完整的错误屏幕，提示用户刷新或尝试其他操作。
看到这里，千万不要吝啬你的小手指喔，一键三连走起来~~~
总结
写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。
由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的GitHub免费获取。
还有免费的 高级web全套视频教程 前端架构 H5 vue node 小程序 视频+资料+代码+面试题！
全方面的web前端进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。
扫一扫
3350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
