位置: IT常识 - 正文

Vue实战【常用的Vue小魔法】(vue使用技巧)

编辑:rootadmin
Vue实战【常用的Vue小魔法】 目录🌟前言🌟能让你首次加载更快的路由懒加载,怎么能忘?🌟你是否还记得有一个叫Object.freeze的方法?🌟异步组件那么强,你是不是没用过?🌟你是不是还在computed中使用this?🌟如何避免 v-if 和 v-for 一起使用?🌟那么强的.sync修饰符你为什么不用?🌟v-model还有这么好的修饰符!🌟其他的修饰符🌟你是否知道v-model还能自定义属性?🌟你还在用浏览器的scrollTop滚动你的页面吗?🌟你在子组件上定义的原生事件不生效?🌟Vuex 页面刷新数据丢失怎么解决🌟写在最后🌟JSON包里写函数,关注博主不迷路🌟前言

推荐整理分享Vue实战【常用的Vue小魔法】(vue使用技巧),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue实战技巧,vue的使用方法,vue常用功能,vue常用ui,vue常用ui,vue基本使用,vue使用技巧,vue的常用方法,内容如对您有帮助,希望把文章链接给更多的朋友!

大家好,上一期给大家总结了一些常见的Vue报错并如何解决的一些方法,私下也收到了好多小伙伴的补充;小伙伴们实在是太强啦,和大家一起共同学习进步真的很开心。今天博主就为大家总结一些实战中的经常用到的Vue小魔法,可以使你的开发也包括项目性能得到很大的提升,接下来让我们一起来看看吧。

🌟能让你首次加载更快的路由懒加载,怎么能忘?

路由懒加载可以让我们的包不需要一次把所有的页面的加载进来,只加载当前页面的路由组件就行。

举个🌰,如果这样写,加载的时候会全部都加载进来。

const router = new VueRouter({ routes:[ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ]})

所以,应该避免上面的写法,尽量使用懒加载 懒加载写法,结合webpack的import使用

const router = new VueRouter({ routes:[ { path: '/', name: 'Home', component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue') }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ]})🌟你是否还记得有一个叫Object.freeze的方法?

应该所有同学都知道,vue初始化的时候会将data里面的数据都搞成响应式数据吧。但是,我们在写业务逻辑的时候会有些数据一初始化就永远不会改变,它根本就不需要被vue做成响应式数据,因此我们应该将这些不用改变的数据通过Object.freeze方法冻结它,避免vue初始化的时候,做一些无用的操作。

举个🌰

export default { data:()=>({ list:Object.freeze([{title:'我永远不需要改变,我不需要响应式'}]) })}🌟异步组件那么强,你是不是没用过?

异步组件可以让我们在需要一些组件时才将它加载进来,而不是一初始化就加载进来,这跟路由懒加载时一个概念。

举个🌰

export default { components:{ AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async') }}

异步组件还有一种比较完善的写法

举个🌰

export default { components:{ AsyncComponent:()=>({ component:import(/* webpackChunkName: "AsyncComponent" */ './Async'), delay:200, // 延迟几毫秒,默认200 timeout:3000, // 加载几毫米之后就超时,触发error组件 loading:LoadingComponent, // 组件未加载回来前显示 error:ErrorComponent // 组件超时时显示 }) }}🌟你是不是还在computed中使用this?

我猜还有很多同学,在computed属性中通过this.xxx去拿data里面的数据,和methods里面的方法吧,或许还会通过this.route去获取路由里面的数据吧。其实,我们可以避免这些丑陋的this,它甚至会给我们带来看不见的性能问题。实现上,我们通过this能访问到的数据,在computed的第一个参数上都能解构出来。

举个🌰

export default { haha({$attrs,$route,$store,$listeners,$ref}){ // 还能结构很多属性,可自行打印康康 return }}🌟如何避免 v-if 和 v-for 一起使用?

为什么要避免v-if和v-for在同一个元素上同时使用呢?因为在vue的源码中有一段代码时对指令的优先级的处理,这段代码是先处理v-for再处理v-if的。所以如果我们在同一层中一起使用两个指令,会出现一些不必要的性能问题,比如这个列表有一百条数据,再某种情况下,它们都不需要显示,当vue还是会循环这个100条数据显示,再去判断v-if,因此,我们应该避免这种情况的出现。

不好的🌰

<h3 v-if="status" v-for="item in 100" :key="item">{{item}}</h3>

好的🌰

<template v-if="status" > <h3 v-for="item in 100" :key="item">{{item}}</h3></template>

v-if 与 v-for 为什么不建议一起使用

Vue实战【常用的Vue小魔法】(vue使用技巧)

v-for 和 v-if 不要在同一个标签中使用,因为解析时先解析 v-for 再解析 v-if。如果遇到需要同时使用时可以考虑上诉写法或者写成计算属性的方式。

🌟那么强的.sync修饰符你为什么不用?

如果你想要在父组件控制一个子组件的显示隐藏,是不是还在传一个prop和一个自定义方法,这样会很麻烦,不妨试一试sync修饰符。

举个🌰

// 父组件 template> <div> <Toggle :show.sync = 'show'></Toggle> </div></template>//Toggle 组件<template> <div> <div v-if="show"> 展示和隐藏组件 </div> <button @click="test">隐藏组件</button> </div></template><script>export default { props:['show'], methods: { test(){ this.$emit('update:show',false) } }}</script>🌟v-model还有这么好的修饰符!

v-model上有3个比较好用的修饰符不知到大家有没有用过,一个是lazy,一个是number,一个是trim。

lazy:可以将@input事件变成@blur事件;number:只能输入数字值 ;trim:清空两边的空格

举个🌰

//lazy <input v-model.lazy="msg" /> //number <input v-model.number="msg" /> //trim <input v-model.trim="msg" />🌟其他的修饰符

事件修饰符

.stop 阻止事件继续传播;.prevent 阻止浏览器或标签默认行为;.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理;.self 只当在 event.target 是当前元素自身时触发处理函数;.once 事件将只会触发一次;.passive 告诉浏览器你不想阻止事件的默认行为。

键盘事件的修饰符

.enter(捕获“回车”键).tab(捕获“缩进”键).delete (捕获“删除”和“退格”键).esc(捕获“退出”键).space(捕获“空格”键).up(捕获“上”键).down(捕获“下”键).left(捕获“左”键).right(捕获“右”键)

鼠标按钮修饰符

.left.right.middle🌟你是否知道v-model还能自定义属性?

如果想在一个自定义的Input组件上使用v-model,那么就要在子组件,介绍一个value,和触发input事件,v-model的默认语法糖就是这两个东西的组合。

举个🌰

// 父组件<template> <div> <CustomInput v-model='msg' /> </div></template>//CustomInput<template> <div> <input type="text" :value="value" @input="test"> </div></template><script>export default { props:['value'], methods: { test(e){ this.$emit('input',e.target.value) } },}</script>

但是,如果组件里面不是input,而是一个checkbox或者一个radio呢?我不想接受一个value和input事件,我想接收一个更加语义化的checked和change事件,那该怎么办?

举个🌰

// 父组件不需改变...//CustomInput<template> <div> <input type="checkbox" :checked="checked" @change="test"> </div></template><script> props:['checked'], model:{ props:'checked', event:'change' }, methods: { test(e){ this.$emit('change',e.target.checked) } }}</script>🌟你还在用浏览器的scrollTop滚动你的页面吗?

有些时候我们在操作一下页面的滚动行为,那么我们第一时间就会想到scrollTop。其实我们还有第二个选择就是VueRouter给我们提供的scrollBehavior钩子。

举个🌰

const router = new VueRouter({ routes:[...] , scrollBehavior(to,from,position){ // position参数可自行打印康康,点击浏览器左右箭头会触发 return{ // 这里可以返回很多参数,下面简单列就几个,详情自己康康官网 x:100, y:100, selector:#app, offset:200, //等等 } }})🌟你在子组件上定义的原生事件不生效?

有时候我们想在子组件上面监听一些事件,比如click,但是不论你怎么点,它都没反应,为什么呢?

举个🌰

<template> <div> <Child @click="test"></Child> </div></template><script> methods:{ test(){} }</script>

因为这样写vue会认为,你自定义了一个click事件,要在子组件通过$emit(‘click’)触发才行。如果我就是要在父组件触发呢?那就要用到native修饰符了。

举个🌰

<template> <div> <Child @click.native="test"></Child> </div></template><script> methods:{ test(){} }</script>🌟Vuex 页面刷新数据丢失怎么解决

需要做 vuex 数据持久化 一般使用本地存储的方案来保存数据 可以自己设计存储方案 也可以使用第三方插件 ; 推荐使用 vuex-persist 插件,它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中

🌟写在最后

这篇文章分析那个了一些vue开发比较常见的报错,你是否也经历过呢?后续会为小伙伴们持续更新Vue的一些实战小魔法!各位小伙伴让我们 let’s be prepared at all times!

🌟JSON包里写函数,关注博主不迷路

✨原创不易,还希望各位大佬支持一下! 👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富!

本文链接地址:https://www.jiuchutong.com/zhishi/300132.html 转载请保留说明!

上一篇:WebSocket的使用方法(JS前端)(websocket怎么用)

下一篇:使用 Wall 搭建个人照片墙和视频墙(wallengine)

  • 钉钉成员信息姓名怎么修改(钉钉成员信息姓名怎么改)

    钉钉成员信息姓名怎么修改(钉钉成员信息姓名怎么改)

  • qq怎样取消屏蔽(qq怎样取消屏蔽好友的消息)

    qq怎样取消屏蔽(qq怎样取消屏蔽好友的消息)

  • 华为matebook13有蓝牙功能吗(华为matebook13有摄像头吗)

    华为matebook13有蓝牙功能吗(华为matebook13有摄像头吗)

  • 微信怎么发群邀请链接(微信怎么发群邀请通知)

    微信怎么发群邀请链接(微信怎么发群邀请通知)

  • 电脑裁剪快捷键(电脑裁剪快捷键怎么弄不了)

    电脑裁剪快捷键(电脑裁剪快捷键怎么弄不了)

  • 微信视频号是什么用途(微信视频号是什么时候出来的)

    微信视频号是什么用途(微信视频号是什么时候出来的)

  • 腾讯会议可以看到每个人吗(腾讯会议可以看见成员在线时长吗)

    腾讯会议可以看到每个人吗(腾讯会议可以看见成员在线时长吗)

  • 如何在手机上看电视频道(如何在手机上看U盘内容)

    如何在手机上看电视频道(如何在手机上看U盘内容)

  • 小米手机没有耳机孔(小米手机没有耳机孔吗)

    小米手机没有耳机孔(小米手机没有耳机孔吗)

  • iphone6能用airpods吗(iphone6能用4g卡吗)

    iphone6能用airpods吗(iphone6能用4g卡吗)

  • 烧屏对手机影响大不大(烧屏对手机影响有多大)

    烧屏对手机影响大不大(烧屏对手机影响有多大)

  • 一个微信只能申请一个健康码吗(一个人只能注册一个公众号)

    一个微信只能申请一个健康码吗(一个人只能注册一个公众号)

  • qq重要数据被删除怎么恢复(不小心把qq重要数据删了怎么办)

    qq重要数据被删除怎么恢复(不小心把qq重要数据删了怎么办)

  • 磁盘和光盘等媒体属于什么媒体(磁盘与光盘的存储原理)

    磁盘和光盘等媒体属于什么媒体(磁盘与光盘的存储原理)

  • 主板与cpu的搭配原则(主板与cpu的搭配是指)

    主板与cpu的搭配原则(主板与cpu的搭配是指)

  • 苹果双摄像头有哪几款(苹果双摄像头手机有哪几款图片)

    苹果双摄像头有哪几款(苹果双摄像头手机有哪几款图片)

  • 微信号能改几次(多个微信登录)

    微信号能改几次(多个微信登录)

  • ps怎么看前后对比图(ps怎么看前后对比快捷键)

    ps怎么看前后对比图(ps怎么看前后对比快捷键)

  • 苹果6怎么下载软件(苹果6怎么下载爱思助手)

    苹果6怎么下载软件(苹果6怎么下载爱思助手)

  • vivos1双引擎闪充在哪(vivos1双引擎闪充怎么开启)

    vivos1双引擎闪充在哪(vivos1双引擎闪充怎么开启)

  • 荣耀9x摄像头怎么升降(荣耀9x摄像机)

    荣耀9x摄像头怎么升降(荣耀9x摄像机)

  • 拼多多拼单啥意思(拼多多 拼单 什么意思)

    拼多多拼单啥意思(拼多多 拼单 什么意思)

  • 港版iphone11支持电信卡吗(港版iphone11支持双卡双待吗)

    港版iphone11支持电信卡吗(港版iphone11支持双卡双待吗)

  • hello语音用不了(hello语音软件怎么了)

    hello语音用不了(hello语音软件怎么了)

  • 荣耀8x怎么添加铃声(荣耀8x怎么添加隐私空间)

    荣耀8x怎么添加铃声(荣耀8x怎么添加隐私空间)

  • 税法的分类都有什么
  • 带薪年休假如果当年离职补交的年休假钱需要扣个税嘛
  • 报销单据粘贴单图片
  • 生产车间的办公用品费计入
  • 已经勾选确认的发票可以取消认证吗
  • 小公司可以不交五险一金吗
  • 其他债权投资公允价值变动影响摊余成本吗
  • 房地产企业借款费用
  • 委托加工白酒怎么入账
  • 借款超期不还利息的法律规定
  • 因保管不善,不慎遗失
  • 电力安装工程合同范本
  • 固定资产并账
  • 股东转让股权印花税怎么交税
  • 外购产品赠送他人合法吗
  • 企业利息收入的税率是多少
  • 没有用完的发票怎么退
  • 企业每个月都要关账吗
  • 销售返利的税务政策
  • 分公司转总公司款分录
  • 简易征收电费能不能抵扣
  • 物业签订的合同
  • 关于商业健康保险产品的规范和条件
  • 收到个税手续费返还现金流量表
  • 苹果7充电设置在哪里
  • windows 11什么时候
  • 企业的借款利息支出全部可以税前扣除吗
  • 教育发展基金计提比例
  • 外籍人员个人所得税政策2023规定
  • 挂账多年的往来账怎么处理
  • 增值税务发票怎么作废
  • sec是什么文件
  • 公司一直没有收入怎么办
  • 油气勘探支出包含哪些
  • 其他收益年末需要结转吗
  • 若依框架是什么框架
  • 房地产开发公式
  • php sha1加密 解密
  • 暂估入库的商品含税吗
  • 基于区块链技术的什么特征可建立卷烟信息数据查询系统
  • 机器学习中的数学原理——过拟合、正则化与惩罚函数
  • ls -lh命令
  • 银行代发工资会扣个人所得税吗
  • 服务型企业交税再返税
  • 销售货物免税
  • 没有发票的费用汇算清缴的时候怎么调出来
  • phpcms v9安装教程
  • 月末库存商品成本计算
  • 年末已经结账了怎么入账
  • 房产互换如何交税费
  • sql server触发器在哪里?
  • 企业所得税弥补亏损怎么弥补
  • 财政拨款的事业单位工资
  • 应收账款计提坏账比例
  • 销售退货的会计账怎么处理
  • 什么叫做进项税不得抵扣
  • 处置固定资产和报废固定资产区别
  • 如何理解其他应收款的概念
  • 水利建设基金缴纳增值税开始缴纳
  • 管理会计在企业中的地位如何?为什么
  • win8恢复出厂设置方法
  • window10的cmd命令
  • linux shell awk 流程控制语句(if,for,while,do)详细介绍
  • win7蓝屏代码0x0000007e
  • PHP 7.0.0 Alpha 2 发布
  • win8注册表损坏进不了系统
  • linux跨服务器调用shell脚本
  • ExtJS 2.0实用简明教程之应用ExtJS
  • 动态添加echarts
  • 一个简单的灵魂
  • html概念及作用
  • 衬线字体和无衬线字体各自的用途
  • vue中使用ajax
  • nodejs搭建个人博客网站
  • bash: /usr/bin/autocrorder: /usr/bin/python^M: bad interpreter: No such file or directory
  • monkey命令大全
  • 源码讲解
  • js基于什么
  • 湖南省电子税务局登录
  • 印花税应税凭证数量是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设