Vue最佳实践和实用技巧（下）
1.props限制以及透传属性和插槽
props自定义限制
props: {size: {// 自定义验证函数validator: (val) => {return ["small", "medium", "large"].includes(val);},}
}
这个验证函数接受一个实际传入的 prop值，验证并返回 true 或 false
下面将要说的是透传属性和插槽，此技巧在二次封装别人组件的时候非常有用
透传属性
$attrs包含所有透传过来的对象，除显式声明接受的props、emits、slots- 如不希望透传下去某些属性，可使用
useAttrs()
const attrs = useAttrs();
const filteredAttrs = computed(() => {return { ...attrs, style: undefined };
});
$attrs还可与$listeners搭配使用，$listeners包含了父组件传递的事件（不包含.native修饰器）,它可以通过v-on="$listeners"转发传入内部组件，进行对事件的监听处理
注意： $listeners组件实例属性在Vue3.x被取消，其监听都整合到了$attrs属性上
单个slot透传
多个slot透传
多个slot透传作用域插槽
2.require.context()和import.meta.glob()批量引入文件
webpack统一导入相同路径下的多个组件的方法
const path = require("path");
// 参数一：说明需要检索的目录，参数二：是否检索子目录，参数三：：指定匹配文件名的正则表达式
const files = require.context("./components", false, /\.vue$/);
const modules = {};
files.keys().forEach((key) => {
const name = path.basename(key, ".vue");
modules[name] = files(key).default || files(key);
});
Vite支持使用特殊的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('./src/*.js');
// vite 转译上面后生成的代码
const modules = {'./src/foo.js': () => import('./src/foo.js'),'./src/bar.js': () => import('./src/bar.js')
}
3.有条件的渲染slot
- 组件都有一个特殊的
$slots对象，包含所有的插槽对象，结构如下：
const $slots = {
"default": [{...}],
"slotA": [{...}],
"slotB": [{...}]
}
我们可以使用v-if有条件的渲染slot更加合理，并且我们封装通用组件的时候最好预留个slot更好扩展
4.检测点击是否发生在元素内部
window.addEventListener('mousedown', e => {// 获取被点击的元素const clickedEl = e.target;// `targetEl` 为检测的元素if (targetEl.contains(clickedEl)) {// 在"targetEl"内部点击} else {// 在"targetEl"之外点击}
});
5.动态组件和递归组件
动态组件：tab切换的时候可使用动态组件动态加载并缓存提供动效
递归组件：模板里面自己自己，注意需要设置条件退出，不然会无限渲染，适合嵌套菜单，树形控件等
{{ tree.label }}6.nextTick
- 在下次
DOM更新循环结束之后执行延迟回调 - 我们可以在修改数据后立即使用此方法获取最新的
DOM
mounted(){this.$nextTick(() => {this.$refs.inputs.focus(); //通过 $refs 获取dom 并绑定 focus 方法})
}
7.简化 :class 和 v-if 与逻辑
直接最佳写法如下：
8.全局重用方法
- 遇到全局可重用的工具方法，例如
class Utils {
// 复制一段文字到剪切板
copyToClipboard(text) {
let copyText = document.createElement("input");
document.body.appendChild(copyText);
copyText.value = text;
copyText.select();
document.execCommand("copy");
document.body.removeChild(copyText);
}
}
export default new Utils();
我们可以抽离出来放在整个应用程序都能访问的地方
Vue2：
import Utils from "./utils/utils.js";
// 设置全局方法
Vue.prototype.$utils = Utils;
Vue3：
import Utils from "./utils/utils.js";
const app = createApp(App);
// 设置全局方法
app.config.globalProperties.$utils = Utils;
app.mount("#app");
接下来任何地方都能愉快的访问啦
this.$utils.copyToClipboard(text);
// Vue3 setup
const { proxy } = getCurrentInstance();
proxy.$utils.copyToClipboard(text);
这种形式看起来太麻烦了，我们甚至可以将其属性和方法挂载到window对象上，这样全局直接也可以访问
9.局部组件刷新
- 使用
v-if方法来控制router-view的显示隐藏
需要的页面可注入该方法使用
或者直接使用v-if操作该组件
或者借助Vue的diff算法，我们给元素设置一个唯一的key值然后去改变它
10.组件封装原则
Vue组件的API主要包含三部分：props、event、slot
props为组件接收的参数，最好用对象的写法，可更好设置类型默认值和自定义校验event用于子组件向父组件传递消息slot可以给组件动态插入一些内容或组件，是实现高阶组件的重要途径
组件封装最好还应遵循单向数据流，传递的props仅仅做展示，如需修改，则应该重新初始化一份全新的响应式数据并将props深拷贝后作为初始值
11.错误（警告）处理
为 Vue 中的错误和警告提供自定义处理程序
// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {console.error(err);
};
// Vue 2
Vue.config.errorHandler = (err) => {console.error(err);
};
12.使用template标签分组
template 标签可以在模板内的任何地方使用，不参与实际标签渲染，可减少嵌套层级，简化代码逻辑
{{ title }}
{{ description }}
上面代码v-if逻辑分组后：
{{ title }}
{{ description }}
13.在 v-for 中解构
在模板中使用 v-for 遍历输出数据，可以使用解构语法
{{ user }}
14.全局和局部style混合及样式穿透
有时候我们想跳出scoped这个限定作用域，更改子组件的样式但不会影响全局样式，我们就可以使用深度选择器来完成
上面代码会被解析为
[data-v-e44d851a] .ant-card-head-title {background: green;
}
注意：vue版本和预处理器不同，深度选择器的写法也会不同，灵活使用即可
15.借用props类型
当我们当前组件使用到了Card组件
其中的Mytype和Mycolor是我们通过props接收而来的
import Card from './Card.vue';
export default {components: { Card },props: {Mytype: {type: String,required: true,},Mycolor: {type: String,default: "green",}},
};
我们可以简写为
import Card from './Card.vue';
const cardProps = {};
Object.entries(Card.props).forEach(([key, value]) => {
cardProps[`My${key}`] = value;
});
export default {components: { Card },props: { ...cardProps},
};
最后
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
有需要的小伙伴，可以点击下方卡片领取，无偿分享