vue实战技巧,vue到底怎么用
用Vue开发的这几年，掌握一些有用的技巧，使用一些比较高级的技术点，总会有用的。本文介绍了15个Vue技巧，有一定的参考价值。有兴趣的可以了解一下。
目录
前言1、将一个prop限制为一个类型的列表2、使用引号监听嵌套属性3、知道何时使用v-if4、单个作用域slot的缩写5、将局部和全局样式混合在一起6、重写子组件的样式7、如何在Vue外部创建响应变量8、v-for中的解构9、在指定范围内循环10窃取prop类型11、检测元素外部(或内部)的点击12、 从组件外部调用方法13，监听数组和对象14，模板标签的另一种使用15，以及处理错误(和警告)的更好方法。
前言
学习成为一名更好的Vue开发者并不总是需要花费时间和精力去掌握的大概念。
掌握一些技巧和窍门可以让我们的编程生活变得更加轻松——不需要大量的重复性工作。
在Vue发展的这几年里，掌握一些有用的技巧，使用一些更高级的技术点，总会有用的。
1、将一个 prop 限制在一个类型的列表中
我们在使用prop的时候，有时可能需要判断prop是否在我们指定的范围内(或者指定的值)。此时，我们可以使用prop定义中的validator选项将prop类型限制为一组特定的值。
导出默认值{
名称：“测试”，
道具：{
名称：{
类型：字符串，
},
大小：{
类型：字符串，
验证器：s=[small ， middle]。包括(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秀。
相反，如果你不需要立即执行昂贵的组件，你可以使用v-if，它将跳过渲染它，使页面加载速度更快。
4、单个作用域插槽的简写
有限的槽非常有趣，但是为了使用它们，你还必须使用许多模板标签。幸运的是，有一种简单的方法可以让我们摆脱它，但前提是我们使用单个作用域插槽。
你可能这样用过。
表格列表
template #header=attrList
TableHeader v-bind=attrList /
/模板
/表格列表
不使用模板
TableList #header=attrList
TableHeader v-bind=attrList /
/表格列表
简单，直白，惊艳。
5、将局部和全局的 style 混合在一起
通常，在处理样式时，我们希望它们只在当前组件中工作。
样式范围。内容{
背景：绿色；
}
/风格
但是，如果需要，也可以添加非范围样式块来添加全局样式。
风格
/*全局*/。内容p {
字体大小：12px
}
/风格
样式范围
/*在此组件内有效*/。内容{
背景：绿色；
}
/风格
请注意，全局样式很危险，很难跟踪。但有时，它们是一个完美的逃生出口，正是你所需要的。
6、重写子组件的样式
作用域CSS非常善于保持内容的整洁，并且不会将样式引入到应用程序的其他组件中。但是有时候我们需要覆盖一个子组件的样式，跳出这个范围。
Vue有一个深度选择器来完成上述功能。
样式范围。我的内容。子组件{
字体大小：16px
}
/风格
注意：如果使用LESS这样的CSS预处理程序，可能需要使用/deep/来代替。
style lang=less 范围。我的-内容/深度/。子组件{
字体大小：16px
}
/风格
7、如何在 Vue 之外创建一个具有响应性的变量
如果你从Vue外部得到一个变量，最好让它反应性。这样，我们可以在计算道具、手表和其他任何地方使用它，它就像Vue中的任何其他状态一样工作。
如果我们使用的选项API，我们需要做的就是把它放在组件的数据部分。
const external variable=getValue()；
导出默认值{
data() {
返回{
反应变量：外部变量，
};
}
};
如果使用Vue3的组合API，可以直接使用ref或者reactive。
从“vue”导入{ ref }；
//它可以完全在Vue组件之外完成
const external variable=getValue()；
const reactive variable=ref(external variable)；//使用ref使其具有响应性
请改用反应式。
从“vue”导入{ reactive }；
//它可以完全在Vue组件之外完成
const external variable=getValue()；
//reactive只对对象和数组有效
const anotherReactiveVariable=reactive(external variable)；
如果还在用Vue2，可以用observable代替reactive，达到完全一样的效果。
从“vue”导入Vue
//它可以完全在Vue组件之外完成
const external variable=getValue()；
const another reactive variable=vue . observable(external variable)；
8、v-for 中的解构
v-for里用解构吗？
//用户：[{name:leo ，id:1}，{name:lion ，id:2}]
里
用户中的v-for=“{ name，id }”
:key=id
{{ name }}
/李
众所周知，可以通过使用这样的元组从v-for中检索索引。
李v-for=(电影，索引)在[
《狮子王》，
冻结，
《公主新娘》
]
{{ index 1 }}={{ movie }}
/李
当使用一个对象时，你可以像这样使用key。
li v-for=(value，key) in {
名字：“狮子王”，
发布时间：2019年，
导演：“乔恩费儒”，
}
{{ key }}: {{ value }}
/李
您还可以结合使用这两种方法来获取属性的键和索引。
li v-for=(值，键，索引)in {
名字：“狮子王”，
发布时间：2019年，
导演：“乔恩费儒”，
}
{{ index 1 }}={{ key }}: {{ value }}
/李
9、在指定范围内循环
V-for允许我们遍历一个数组和一个范围。
模板
保险商实验所
li v-for=num in 6Item {{ num }}/li
/ul
/模板
渲染结果
项目1
项目2
项目3
项目4
项目5
项目6
这里有一张便条。当我们使用v-for遍历一个范围时，它将从1开始，以我们指定的数字结束。
10、窃取 prop 类型
我们从子组件中复制适当类型，只是为了在父组件中使用它们。但是，窃取这些道具类型通常比仅仅复制它们要好得多。你什么意思？
例如，我们在组件中使用列表组件。
模板
差异
h2{{ title }}/h2
目录
:type=listType
:size=listSize
:name=listName
/
/div
/模板
为了让它正常工作，我们需要添加正确的属性类型，并从列表组件中复制它。
从导入列表。/List ；
导出默认值{
组件：{ List }，
道具：{
列表类型：{
类型：字符串，
必填：真，
},
列表大小：{
类型：字符串，
默认值：“中等”，
验证器：size=[
小，
中等，
大，
超大号
].包括(尺寸)，
},
列表名：{
类型：字符串，
默认：“列表”，
},
标题：{
类型：字符串，
必填：真，
},
},
};
你看，是不是觉得很麻烦？
当List组件的prop类型更新时，我们肯定会忘记返回这个组件并更新它们。随着时间的推移，当这个组件的道具类型开始偏离列表组件中的道具类型时，就会引入一个错误。
因此，这就是为什么我们要偷道具类型的组件，如下
从导入列表。/List ；
导出默认值{
组件：{ List }，
道具：{
.List.prop，//偷取列表的道具，不需要一一列举。
标题：{
类型：字符串，
必填：真，
},
},
};
这不是简单多了吗？
除了上面的例子，我们在每个属性名的开头添加了List。因此，我们必须做一些额外的工作来实现这一点。
从导入列表。/List ；
const list props={ }；
Object.entries(List.props)。forEach((key，val)={
list props[` list $ { key . toupper case()} `]=val；
});
导出默认值{
组件：{ List }，
道具：{
.listProps，
标题：{
类型：字符串，
必填：真，
},
},
};
现在，如果List组件中的prop类型被修改，我们的组件将保持最新。但是，如果在列表组件中添加或删除了一个prop类型会怎么样呢？为了处理这些情况，我们可以使用v-bind和一个计算好的道具来保持它的动态性。
11、检测元素外部(或内部)的单击
当我们需要检测点击是发生在特定元素el的内部还是外部时，常用的方法
window.addEventListener(click ，e={
//获取单击的元素
const currtentEl=e.target
//检测它是在el元素内部还是外部
if(El . contains(current tel)){
//在el中单击
}否则{
//在el外部单击
}
});
12、从组件外部调用一个方法
我们可以通过给一个引用从组件外部调用一个方法。
！- Parent.vue -
模板
Child ref=child /
/模板
//调用该组件中子组件的方法
这个。$ refs . child . method()；
通常，我们使用道具和事件在组件之间进行通信。Props分发到子组件，而events分发到父组件。
模板
儿童
当前位置告诉我该做什么=someInstructions
@ something-happen= hereiwillhelpfyou with that
/
/模板
//Child.vue
导出默认值{
道具：[触发器]，
观察：{
shouldCallMethod(newVal) {
if (newVal) {
//当触发器设置为“true”时调用该方法
this . method()；
}
}
}
}
这很好，但是只能在第一次调用时使用。如果您需要多次触发此操作，您必须清除它并重置状态。逻辑如下
父组件将true传递给要触发的触发器propWatch，然后子组件调用该方法。子组件发出一个事件，告诉父组件该方法已被成功触发。父组件将触发器重置为false，因此我们可以从头开始进行相反的操作。如果我们在子组件上设置一个ref，就可以直接调用这个方法(比如第一种方式)，我们打破了“道具向下，事件向上”的规则，我们打破了封装，但是更加清晰易懂。
13、监听数组和对象
有时使用watcher无法正确触发。在很多情况下，这是因为我们试图监听一个数组或一个对象，但不要将deep设置为true。
导出默认值{
姓名：姓名变更，
道具：{
姓名：{
类型：数组，
必填：真，
},
},
观察：{
姓名：{
//这将让Vue知道查看数组内部。不加就做不了深度倾听。
深：真的，
处理程序(新值、旧值)
console.log(名称列表已更改！);
}
}
}
}
用于vue3
手表(
名字，
(newVal，oldVal)={
console.log(名称列表已更改！);
},
{
深：真的，
}
);
14、template 标签的另一个用途
模板标签可以用在模板的任何地方，以便更好地组织代码。有时用来简化v-if逻辑，有时也用v-for。如下，我们有几个元素都使用相同的v-if条件
模板
div class=卡
img src=imgPath /
h3
{{ title }}
/h3
h4 v-if=扩展
{{副标题}}
/h4
差异
v-if=expanded
卡片内容
插槽/
/div
SocialShare v-if=expanded /
/div
/模板
仔细看上面的代码，会发现有些元素的显示和隐藏条件是一样的，但是这样写就不友好了。当它在一个更大更复杂的组件上时，情况可能很糟糕。
我们可以使用template标签将这些元素(具有相同v-if条件的元素)分组，并将v-if提升到模板本身，从而达到优化的目的。
模板
div class=卡
img src=imgPath /
h3
{{ title }}
/h3
！-将v-if提升到数据包-
模板v-if=expanded
h4
{{副标题}}
/h4
div class=卡-内容
插槽/
/div
社交分享/
/模板
/div
/模板
现在看起来清晰了很多，也更好理解了，它在做什么一目了然。
15、处理错误（和警告）的更好方法
我们可以为Vue中的错误和警告提供一个全局定制处理程序。
//Vue 2
vue . config . error handler=(err)={
警报(错误)；
};
//Vue 3
const App=create App(App)；
app . config . error handler=(err)={
警报(错误)；
};
当然，您也可以使用它们来更优雅地处理错误，以获得更好的用户体验。例如，如果错误没有得到处理，应用程序不会直接崩溃，但会显示一个完整的错误屏幕，提示用户刷新或尝试其他操作。
关于15个Vue技能的这篇文章就到这里了。你知道这一切吗？更多相关Vue技巧，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。