当前位置: 首页 > news >正文

8个很棒的Vue开发技巧

1.路由参数解耦

通常在组件中使用路由参数,大多数人会做以下事情。

export default {

methods: {getParamsId() {return this.$route.params.id}
}

}
在组件中使用 $route 会导致与其相应路由的高度耦合,通过将其限制为某些 URL 来限制组件的灵活性。正确的做法是通过 props 来解耦。

const router = new VueRouter({

routes: [{path:  /user/:id ,component: User,props: true
}]

})
将路由的 props 属性设置为 true 后,组件内部可以通过 props 接收 params 参数。

export default {

props: [ id ],
methods: {getParamsId() {return this.id}
}

}
您还可以通过功能模式返回道具。

const router = new VueRouter({

routes: [{path:  /user/:id ,component: User,props: (route) => ({id: route.query.id})
}]

})
2.功能组件功能组件是无状态的,它不能被实例化,也没有任何生命周期或方法。创建功能组件也很简单,只需在模板中添加功能声明即可。它一般适用于只依赖于外部数据变化的组件,并且由于其轻量级而提高了渲染性能。组件需要的一切都通过上下文参数传递。它是一个上下文对象,具体属性见文档。这里的 props 是一个包含所有绑定属性的对象。

<template functional>

<div class="list"><div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)"><p>{{item.title}}</p><p>{{item.content}}</p></div>
</div>

</template>
父组件使用

<template>

<div><List :list="list" :itemClick="item => (currentItem = item)" />
</div>

</template>
import List from @/components/List.vue
export default {

components: {List
},
data() {return {list: [{title:  title ,content:  content}],currentItem:}
}

}
3.样式范围开发中修改第三方组件样式很常见,但是由于scoped属性的样式隔离,可能需要去掉scoped或者另起一个样式。这些做法有副作用(组件样式污染,缺乏优雅),在css预处理器中使用样式渗透来生效。我们可以使用 >>> 或者 /deep/ 来解决这个问题:

<style scoped>
Outer layer >>> .el-checkbox {
display: block;
font-size: 26px;

.el-checkbox__label {

font-size: 16px;

}
}
</style>
<style scoped>
/deep/ .el-checkbox {
display: block;
font-size: 26px;

.el-checkbox__label {

font-size: 16px;

}
}
</style>
4.watch的高级使用watch 在监听器属性发生变化时触发,有时我们希望 watch 在组件创建后立即执行。可能想到的方式是在创建生命周期中调用它一次,但这不是一种优雅的编写方式,所以也许我们可以使用这样的东西。

export default {

data() {return {name:  Joe}
},
watch: {name: {handler:  sayName ,immediate: true}
},
methods: {sayName() {console.log(this.name)}
}

}
Deep Listening监听一个对象时,当对象内部的属性发生变化时,watch是不会被触发的,所以我们可以为它设置深度监听。

export default {

data: {studen: {name:  Joe ,skill: {run: {speed:  fast}}}
},
watch: {studen: {handler:  sayName ,deep: true}
},
methods: {sayName() {console.log(this.studen)}
}

}
触发监听器执行多个方法使用数组,您可以设置多个形式,包括字符串、函数、对象。

export default {

data: {name:  Joe
},
watch: {name: [sayName1 ,function(newVal, oldVal) {this.sayName2()},{handler:  sayName3 ,immaediate: true}]
},
methods: {sayName1() {console.log( sayName1==> , this.name)},sayName2() {console.log( sayName2==> , this.name)},sayName3() {console.log( sayName3==> , this.name)}
}

}
5.watch监听多个变量watch 本身不能监听多个变量。但是,我们可以通过返回具有计算属性的对象然后监听该对象来“监听多个变量”。

export default {

data() {return {msg1:  apple ,msg2:  banana}
},
compouted: {msgObj() {const { msg1, msg2 } = thisreturn {msg1,msg2}}
},
watch: {msgObj: {handler(newVal, oldVal) {if (newVal.msg1 != oldVal.msg1) {console.log( msg1 is change )}if (newVal.msg2 != oldVal.msg2) {console.log( msg2 is change )}},deep: true}
}

}
6.事件参数$event$event 是事件对象的一个特殊变量,它在某些场景下为我们提供了更多的可用参数来实现复杂的功能。本机事件:与本机事件中的默认事件对象行为相同。

<template>

<div><input type="text" @input="inputHandler( hello , $event)" />
</div>

</template>
export default {

methods: {inputHandler(msg, e) {console.log(e.target.value)}
}

}
自定义事件:在自定义事件中表示为捕获从子组件抛出的值。

export default {

methods: {customEvent() {this.$emit( custom-event ,  some value )}
}

}
<template>

<div><my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)"></my-list>
</div>

</template>
export default {

methods: {customEvent(index, e) {console.log(e) //  some value}
}

}
7.程序化事件监听器例如,在页面挂载时定义一个定时器,需要在页面销毁时清除定时器。这似乎不是问题。但仔细观察,this.timer 的唯一目的是能够在 beforeDestroy 中获取计时器编号,否则是无用的。

export default {

mounted() {this.timer = setInterval(() => {console.log(Date.now())}, 1000)
},
beforeDestroy() {clearInterval(this.timer)
}

}
如果可能,最好只访问生命周期挂钩。这不是一个严重的问题,但可以认为是混乱。我们可以通过使用

once 监听页面生命周期销毁来解决这个问题:

export default {

mounted() {this.creatInterval( hello )this.creatInterval( world )
},
creatInterval(msg) {let timer = setInterval(() => {console.log(msg)}, 1000)this.$once( hook:beforeDestroy , function() {clearInterval(timer)})
}

}
使用这种方法,即使我们同时创建多个定时器,也不影响效果。这是因为它们将在页面被销毁后以编程方式自动清除。8.监听组件生命周期通常我们使用 $emit 监听组件生命周期,父组件接收事件进行通知。子组件

export default {

mounted() {this.$emit( listenMounted )
}

}
父组件

<template>

<div><List @listenMounted="listenMounted" />
</div>

</template>
其实有一种简单的方法就是使用@hook 来监听组件的生命周期,而不需要在组件内部做任何改动。同样,创建、更新等也可以使用这个方法。

<template>

<List @hook:mounted="listenMounted" />

</template>
总结以上就是我今天跟你分享的8个关于Vue的开发技巧,希望这些小技巧对你有用。

相关文章:

8个很棒的Vue开发技巧

1.路由参数解耦 通常在组件中使用路由参数&#xff0c;大多数人会做以下事情。 export default { methods: {getParamsId() {return this.$route.params.id} } } 在组件中使用 $route 会导致与其相应路由的高度耦合&#xff0c;通过将其限制为某些 URL 来限制组件的灵活性。…...

Python - 小玩意 - 文字转语音

import pyttsx3 from tkinter import *def recognize_and_save():try:say pyttsx3.init()rate say.getProperty(rate) # 获取当前语速属性的值say.setProperty(rate, rate - 20) # 设置语速属性为当前语速减20text text_var.get()# 语音识别say.say(text)say.runAndWait()…...

聚焦数据库和新兴硬件的技术合力 中科驭数受邀分享基于DPU的数据库异构加速方案

随着新型硬件成本逐渐降低&#xff0c;充分利用新兴硬件资源提升数据库性能是未来数据库发展的重要方向之一&#xff0c;SIGMOD、VLDB、CICE数据库顶会上出现越来越多新兴硬件的论文和专题。在需求侧&#xff0c;随着数据量暴增和实时性的要求越来越高&#xff0c;数据库围绕处…...

哨兵模式(sentinel)

为什么需要哨兵模式 redis的主从复制模式能够缓解“读压力”&#xff0c;但是存在两个明显问题。 主节点发生故障&#xff0c;进行主节点切换的过程比较复杂&#xff0c;需要人工参与&#xff0c;导致故障恢复时间无法保障主节点通过主从复制模式将读压力分散出去&#xff0c…...

b站老王 自动驾驶决策规划学习记录(十二)

自动驾驶之速度规划详解&#xff1a;SL与ST迭代 上一讲&#xff1a;b站老王 自动驾驶决策规划学习记录&#xff08;十一&#xff09; 接着上一讲学习记录b站老王对自动驾驶规划系列的讲解 参考视频&#xff1a; 自动驾驶决策规划算法第二章第七节(上) 速度规划详解:SL与ST迭代…...

服务器租用机房机房的类型应该如何选择

服务器租用机房机房的类型应该如何选择 1.单电信机房 单电信服务器机房业务模式比较固定&#xff0c;访问量也不是很大&#xff0c;适合新闻类网站或政务类网站。如果网站的PV流量持续增加&#xff0c;建议后期采用租赁CDN的方式解决非电信用户访问网站速度过慢的问题。 2.双线…...

大数据运维一些常见批量操作命令

大数据运维中&#xff0c;批量操作是一项常见的任务。在使用flume进行数据采集的过程中&#xff0c;有时会出现故障导致采集停止&#xff0c;此时积累了大量的文件。如果想要将这些文件迁移到新的目录&#xff0c;直接使用"mv"命令可能会因为文件数目过多而报错。为了…...

测试人职场生存必须避开的5个陷阱

在互联网职场的工作发展道路上&#xff0c;软件测试人员其实在公司中也面临着各种各样的职场陷阱&#xff0c;有些可能是因为项目业务不熟练造成的&#xff0c;有些可能是自身技术能力不足导致的...等等。软件测试入门相对来说比较容易些&#xff0c;但是想要在测试行业长久发展…...

力扣538 补9.18

538.把二叉搜索树转换为累加树 可以做&#xff0c;主要还是分类讨论并找规律。 当前结点如果是左节点的话&#xff0c;root.valroot.valpre.valdfs(root.right); 如果是右结点的话&#xff0c; root.valpre.val-preval-dfs(root.left); 都和前一个结点有关系&#xff0c;如…...

[Linux入门]---Linux编译器gcc/g++使用

文章目录 1.背景知识2.gcc如何完成编译运行工作预处理&#xff08;进行宏替换&#xff09;编译&#xff08;生成汇编&#xff09;汇编&#xff08;生成机器可识别代码&#xff09;链接&#xff08;生成可执行文件&#xff09; 3.函数库动态库静态库动静态库的区别 4.gcc选项 1.…...

[Git入门]---gitee注册及代码提交

文章目录 1.Gitee是什么2.gitee注册3.git工具及图形化界面工具安装4.gitee仓库创建5.进行本地仓库与远端gitee仓库的链接6.git三板斧addcommitpush 7.gitee提交代码常见问题 1.Gitee是什么 gitee是基于git代码托管和研发协作的国内平台&#xff0c;在上面可以托管个人或公司代…...

企业架构LNMP学习笔记46

PHP测试连接代码&#xff1a; php代码测试使用memcached&#xff1a; 示例代码&#xff1a; <?php //实例化类 $mem new memcached(); //调用连接memcached方法 注意连接地址和端口号 $mem->addServer(192.168.17.114,11211); //存数据 var_dump($mem->set(name,l…...

ELFK之zookeeper+kafka

目录 kafkazookeeper的系统架构 Zookeeper 一、zookeeper概述 二、zookeeper特点 三、zookeeper选举机制 四、应用场景 五、zookeeper实验实例 Kafka 一、概述 为什么需要消息队列(MQ) 使用消息队列的好处 消息队列的两种模式 Kafka 定义 二、Kafka 的特性 三、Ka…...

ECharts

ECharts是一款基于JavaScript的数据可视化图表库&#xff0c;提供直观&#xff0c;生动&#xff0c;可交互&#xff0c;可个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图&#xff0c;用于统计的盒形图&#xff0c;用于地理数据可视化的…...

jsoup框架技术文档--java爬虫--架构体系

阿丹&#xff1a; 在学习以及认知使用一个新技术之前一定要搞清楚有关框架的架构体系。了解一下该技术的底层会对后面编写代码以及寻找报错都是很有用处的&#xff0c;前期做的铺垫多一点&#xff0c;后期开发的时候就很方便。 jsoup框架的关键组件 JSoup框架的关键组件主要包…...

OpenStack创建云主机并连接CRT

文章目录 OpenStackT版创建云主机并连接CRT命令行操作&#xff08;1&#xff09;创建镜像&#xff08;2&#xff09;创建实例&#xff08;3&#xff09;创建网络创建内网创建外网 &#xff08;4&#xff09;创建安全组&#xff08;5&#xff09;创建路由&#xff08;6&#xff…...

linux-sed命令

目录 1.linux-shell sed获取某一段字符串 2.linux-shell shell脚本中 sed -n取出某一行赋给一个变量 3.linux-shell sed查询某一行 1.linux-shell sed获取某一段字符串 如果要获取的是某一段字符串&#xff0c;可以在 sed 命令中使用正则表达式来指定需要获取的字符串。例如…...

Elasticsearch:什么是向量和向量存储数据库,我们为什么关心?

Elasticsearch 从 7.3 版本开始支持向量搜索。从 8.0 开始支持带有 HNSW 的 ANN 向量搜索。目前 Elasticsearch 已经是全球下载量最多的向量数据库。它允许使用密集向量和向量比较来搜索文档。 矢量搜索在人工智能和机器学习领域有许多重要的应用。 有效存储和检索向量的数据库…...

JOSEF约瑟 剩余电流继电器PFR-5 PFE-W-20 国产化改造ZLR-G81 ZCT-45

系列型号&#xff1a; PFR-003剩余电流继电器 PFR-03剩余电流继电器 PFR-5剩余电流继电器 PFR-W-105互感器 PFR-W-140互感器 PFR-W-20互感器 PFR-W-210互感器 PFR-W-30互感器 PFR-W-35互感器 PFR-W-70互感器 一、用途 PFR剩余电流继电器&#xff08;以下简称继电器…...

分别用Python和Go实现对文件夹及其子文件夹里的文件进行批量重命名

文章目录 问题阐述上代码结果如何 问题阐述 最近在继续提高自己的go技术时&#xff0c;从网上一些平台获取到了一些学习资料&#xff0c;然后下载到本地后&#xff0c;文件的命名是真的像衣托答辩&#xff1a; 除了上述的文件&#xff0c;还有一mol多神奇的命名&#xff0c;害…...

redis深度历险 千帆竞发 —— 分布式锁

分布式应用进行逻辑处理时经常会遇到并发问题。 比如一个操作要修改用户的状态&#xff0c;修改状态需要先读出用户的状态&#xff0c;在内存里进行修改&#xff0c;改完了再存回去。如果这样的操作同时进行了&#xff0c;就会出现并发问题&#xff0c;因为读取和保存状态这两个…...

C#根据中文首字母排序

第一种方式&#xff1a; 这种方式会受制于服务器的区域和语言设置。 1.首先添加一个排序类ChineseNameComparer public class ChineseNameComparer : IComparer<string> {public int Compare(string x, string y){if (x null || y null)return 0;var xFirstChar x.Su…...

仪表基础知识培训

压力传感器:E+H PMX5x/FMX5x 一、安装:安装注意事项: 1、水平安装时仪表的呼吸孔(1)需要向下安装,并远离污染物。 2、请勿用坚硬的物体擦拭或接触膜片。 3、请勿安装在水泵的入口和搅拌叶附近 二、供电、接线、信号、:二线制,仪表输出4-20mA 三、量程:设置最大最小量程…...

无涯教程-JavaScript - PI函数

描述 PI函数返回数字3.14159265358979,数学常数pi,精确到15位数字。 语法 PI ()争论 PI函数语法没有参数。 适用性 Excel 2007,Excel 2010,Excel 2013,Excel 2016 Example JavaScript 中的 PI函数 - 无涯教程网无涯教程网提供描述PI函数返回数字3.14159265358979,数学常…...

前端防抖和节流

前端防抖和节流 概述 防抖&#xff1a; 防止抖动&#xff0c;个人字面理解此处防的不是页面的抖动&#xff0c;而是用户手抖。为了防止用户快速且频繁的触发事件而导致多次执行事件函数&#xff0c;这样的场景有很多&#xff0c;比如监听滚动、鼠标移动事件onmousemove、频繁…...

[pai-diffusion]pai的easynlp的clip模型训练

EasyNLP带你玩转CLIP图文检索 - 知乎作者&#xff1a;熊兮、章捷、岑鸣、临在导读随着自媒体的不断发展&#xff0c;多种模态数据例如图像、文本、语音、视频等不断增长&#xff0c;创造了互联网上丰富多彩的世界。为了准确建模用户的多模态内容&#xff0c;跨模态检索是跨模态…...

期权如何交易?期权如何做模拟交易?

买卖期权的第一步就是要有期权账户&#xff0c;国内的期权品种有商品期权和ETF期权以及股指期权&#xff0c;每种的开户方式和要求都不同&#xff0c;下文为大家介绍期权如何交易&#xff1f;期权如何做模拟交易&#xff1f; 一、期权交易需要开立一个期权账户&#xff0c;可以…...

【新书推荐】大模型赛道如何实现华丽的弯道超车 —— 《分布式统一大数据虚拟文件系统 Alluxio原理、技术与实践》

文章目录 大模型赛道如何实现华丽的弯道超车 —— AI/ML训练赋能解决方案01 具备对海量小文件的频繁数据访问的 I/O 效率02 提高 GPU 利用率&#xff0c;降低成本并提高投资回报率03 支持各种存储系统的原生接口04 支持单云、混合云和多云部署01 通过数据抽象化统一数据孤岛02 …...

Calendar对象获取当前周的bug

项目场景&#xff1a; 双周项目管理&#xff0c;需要获取当前周为一年之中的第几周&#xff0c;原先的代码是用Calendar对象&#xff0c;先用setTime&#xff08;&#xff09;把当前时间传入&#xff0c;再用get&#xff08;3&#xff09;获取一年中的第几周 问题描述 实际发…...

嵌入式环境buildroot的espeak配置与编译

1、在buildroot目录下输入make menuconfig 2、选择Target packages 3、选择Audio and video applications 4、选择espeak、选择alsa via portaudio &#xff08;新版嵌入式linux一般都是用alsa音频驱动&#xff09; 5、配置portaudio 选择Library 6、选择Audio/Sound 7、选择…...

如何关闭网站/mac日本官网入口

base.superclass.constructor.call(this,config) 2011-11-11 15:49 4200人阅读 评论(2) 收藏 举报base.superclass.constructor.call(this,config); 这个意思就是调用父类的构造函数 作用域是当前子类 传入config参数 将来config中有什么属性 会为子类构造出什么属性...

莱芜受欢迎的网站建设/深圳优化seo排名

元素是文档结构的基础&#xff0c;在CSS中&#xff0c;每个元素生成了一个包含了元素内容的框&#xff08;box&#xff0c;也译为“盒子”&#xff09;。但是不同的元素显示的方式会有所不同&#xff0c;例如<div>和<span>就不同&#xff0c;而<strong>和<…...

静态营销网站代码/重庆网站搜索排名

解法一&#xff1a;http://siukwan.sinaapp.com/?p189 https://www.cnblogs.com/TonyYPZhang/p/5123058.html 1.这道题目主要是求一个无向图中&#xff0c;以哪个节点为根节点的树的高度最小&#xff1b; 2.常规方法可以使用BFS或者DFS&#xff0c;对每个点都遍历一遍&…...

商城网站的模块设计/百度网盘登录

东阳的学习笔记 条款5&#xff1a;了解C默默编写并调用哪些函数 C默认合成一个空构造函数&#xff0c;copy构造和copy运算符&#xff08;有条件的&#xff09;若成员变量为引用类型&#xff0c;C的响应是拒绝编译若class包含引用/const类型&#xff0c;则需要自定义copy操作当…...

做城市分类信息网站好做吗/优化网站搜索排名

对于一个给定的数列d1,d2,d3......dn,求相邻两个数的差&#xff0c;即d2-d1,d3-d2...得出一个新数列c1,c2,c3...cn, c(i)d(i)-d(i-1).这个新的数列c就是一个差分数组。 差分数组也有这么两个 性质&#xff1a; (1)通过计算可以得出&#xff0c;d1c1,d2f1f2d1(d2-d1),d3f1f2f…...

自己做头像的网站非流光/贵阳百度推广电话

IoC控制反转设计原则——实现松耦合1.IoC设计原则1.1.控制程序流1.2.控制依赖对象的创建2.从典型的n层体系架构来理解IoCIOC是一种设计原则&#xff08;虽然&#xff0c;有很多人将它当成是一种设计模式&#xff09;&#xff0c;不是设计模式。它提供了高层级的设计指南&#x…...