近年来,vue越来越火,使用它的人也越来越多。vue基本用法很容易上手,但是还有很多优化的写法你就不一定知道了。本文列举了一些vue常用的开发技巧。
require.context()

在实际开发中,绝大部分人都是以组件化的方式进行开发。随之而来就有了许多的组件需要引入。比如以下场景:

import outExperInfo from “@/components/userInfo/outExperInfo”;
import baseUserInfo from “@/components/userInfo/baseUserInfo”;
import technicalExperInfo from “@/components/userInfo/technicalExperInfo”;
import skillExperInfo from “@/components/userInfo/skillExperInfo”;

components:{
outExperInfo,
baseUserInfo,
technicalExperInfo,
skillExperInfo
}

这样写并没有错,但是仔细观察发现写了很多重复的代码,这个时候利用require.context()可以写成:

const path = require(‘path’)
const files = require.context(’@/components/userInfo’, false, /.vue$/)
const userComponents = {}
files.keys().forEach(key => {
const name = path.basename(key, ‘.vue’)
userComponents[name] = files(key).default || files(key)
})
components:userComponents

这样不管需要引入多少组件,都可以使用这一个方法。
路由的按需加载

随着项目功能模块的增加,引入的文件数量剧增。如果不做任何处理,那么首屏加载会相当的缓慢,这个时候,路由按需加载就闪亮登场了。

webpack< 2.4 时
{
path:’/’,
name:‘home’,
components:resolve=>require([’@/components/home’],resolve)
}

webpack> 2.4 时
{
path:’/’,
name:‘home’,
components:()=>import(’@/components/home’)
}

import()方法是由es6提出的,动态加载返回一个Promise对象,then方法的参数是加载到的模块。类似于Node.js的require方法,主要import()方法是异步加载的。
动态组件

场景:如果项目中有tab切换的需求,那么就会涉及到组件动态加载,一般写法如下:

这样写也没有错,但是如果这样写的话,每次切换的时候,当前组件都会销毁并且重新加载下一个组件。会消耗大量的性能,所以 就起到了作用。

有的小伙伴会说,这样切换虽然不消耗性能了,但是切换效果没有动画效果了,别着急,这时可以利用内置的

components和vue.component

前者是局部注册组件,用法如下:

export default{
components:{home}
}

后者是全局注册组件,主要针对一些全局使用的组件,用法如下:

Vue.component(‘home’,home)

Vue.nextTick

Vue.nextTick()方法在下次DOM更新循环结束之后执行延迟回调,因此可以页面更新加载完毕之后再执行回调函数。下面介绍几个常用场景:
场景一

 

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118612144

vue开发必须知道的小技巧的更多相关文章

  1. 通过Dapr实现一个简单的基于.net的微服务电商系统(十四)——开发环境容器调试小技巧

    之前有很多同学提到如何做容器调试,特别是k8s环境下的容器调试,今天就讲讲我是如何调试的.大家都知道在vs自带的创建项目模板里勾选docker即可通过F5启动docker容器调试.但是对于启动在k8s ...

  2. RS开发中的一些小技巧[不定期更新]

    从9月份一直忙到了现在,项目整体的改版工作也完成了十有八九了,有些事情只有你自己真正的做了,你才能明白:哦,原来还可以这个样子,这样做真的好了很多呢,接下来我就分享一些最近遇到的RS开发的一些小技巧, ...

  3. xcode开发的6个小技巧

    Xcode是iPhone和iPad开发者用来编码或者开发iOS app的IDE.Xcode有很多小巧但很有用的功能,很多时候我们可能没有注意到它们,也或者我们没有在合适的水平使用这些功能简化我们的iO ...

  4. 开发必备的Windows小技巧

    在Windows中我们经常会遇到各种小问题,而这些小问题又确实在影响着工作效率,如果能解决这些小问题,那么就能在一定程度上提高工作效率,保证心情愉悦.今天我就来分享一下几个自认为比较有用的小技巧. 保 ...

  5. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  6. odoo开发安装插件教程小技巧

    安装Odoo插件时而可能很繁琐且易于出现未知错误.当Odoo出现错误提示时.您需要深层次查询内核模块,安装其它依赖插件,下载全部插件,将它们放到恰当的部位,点安装,随后处理错误,然后再次测试,直至凡事 ...

  7. 日常开发中的shell小技巧

    工具推荐 命令行中很方便的代码统计工具---cloc 强大的分屏工具---tmux 最舒服的markdown书写工具---typora markdown图床推荐--七牛云 模拟生成熵(避免暴力手搓键盘 ...

  8. Java开发中的一些小技巧

    原文:http://www.cnblogs.com/xdp-gacl/p/3490276.html 一. Java获取URL地址中传递的参数 /** * 获取URL中的参数名和参数值的Map集合 * ...

  9. ios 开发 收起键盘的小技巧

    在UIViewController中收起键盘,除了调用相应控件的resignFirstResponder方法外,还有另外三种方法: 1.重载UIViewController中的touchesBegin ...

随机推荐

  1. 不仅仅是一把瑞士军刀 —— Apifox的野望和不足

    声明:本文内容不涉及任何 Apifox 的功能介绍,一来网上这方面的文章已经汗牛充栋,二来 Apifox 本身的用户体验做的非常好,对于开发者而言学习成本基本为零. 阮一峰:不管你是前端开发还是后端开 ...

  2. python基础练习题(题目 计算两个矩阵相加)

    day30 --------------------------------------------------------------- 实例044:矩阵相加 题目 计算两个矩阵相加. 分析:矩阵可 ...

  3. SerialPort-4.0.+ 使用说明(Kotlin版本)

    SerialPort-4.0.+ 项目官网 Java版本使用说明 介绍 SerialPort 是一个开源的对 Android 蓝牙串口通信的轻量封装库,轻松解决了构建自己的串口调试APP的复杂程度,让 ...

  4. .NET 程序读取当前目录避坑指南

    前些天有 AgileConfig 的用户反映,如果把 AgileConfig 部署成 Windows 服务程序会启动失败.我看了一下日志,发现根目录被定位到了 C:\Windows\System32 ...

  5. python学习-Day8

    目录 作业讲解 数据类型内置方法3 字典 ( dict ,可变类型) 类型转换 -- dict() 需要掌握的方法 按key取值(可存可取) 统计字典中键值对的个数(len) 成员运算 删除键值对 获 ...

  6. netty系列之:netty中的核心解码器json

    目录 简介 java中对json的支持 netty对json的解码 总结 简介 程序和程序之间的数据传输方式有很多,可以通过二进制协议来传输,比较流行的像是thrift协议或者google的proto ...

  7. OAuth 2.1 框架

    OAuth 2.1 Draft 当前版本:v2-1-05 失效时间:2022/09/08 本文对部分原文翻译,同时加了一些笔记,以便理解. 单词 译意 identifiler 识别码 Resource ...

  8. Kubernetes 的这些原理,你一定要了解

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 作者:fredalxin地址:https://freda ...

  9. svelte组件:svelte3.x自定义美化虚拟滚动条组件svelte-scrollbar

    基于svelte3.0自定义pc端虚拟滚动条组件svelteScrollbar. svelte-scrollbar:运用svelte3.x创建的桌面pc版自定义美化滚动条组件.支持是否原生滚动条.自动 ...

  10. 透过实例demo带你认识gRPC

    摘要:gRPC是基于定义一个服务,指定一个可以远程调用的带有参数和返回类型的的方法.在服务端,服务实现这个接口并且运行gRPC服务处理客户端调用. 本文分享自华为云社区<gRPC介绍以及spri ...