vue开发中一些小技巧(长期更新)

1,382 阅读2分钟

整理一些平时在工作、学习中的一些开发小技巧~哪里如果写的不对还请纠正


路径的引入

平时在写vue项目时候,会创建很多组件、文件夹碰到项目比较大时候引入的路径就会

变成很长很长~ 例如


(我不知道大家有没这么写过,反正我以前是这么干过哈哈哈)

其实呢,像这种很多层的路径可以自己自定义一个路径名来代替长路径来使用,譬如我们知道有个字符@,可以替代src的路径来使用,那么这个@是在哪里定义的呢?

我们打开


build下的webpack.base.conf.js,搜索@可以看到

看到这里我们知道该怎么做了吧,我们可以自定义一个


自定义名: resolve(‘你的路径’),然后引入


注意:这个一定要重启一下项目,不然会报错的


this指向

(常见的window的属性和方法有: alert,location,document,parseInt,setTimeout,setInterval等)

解决办法一:

使用箭头函数


箭头函数没有自己的this,它的this是继承而来;默认指向在定义它时所处的对象
(宿主对象),而不是执行时的对象,定义它的时候,可能环境是window;箭头函数可以方便地让我们在setTimeout , setInterval中方便的使用this;

解决办法二:定义变量访问this



Vue中数组、对象更新视图不会重新渲染

曾经有遇到过这个问题,发现在data里声明或者赋值过的对象与数组(数组里是对象)的时候,向对象添加新的属性,如果去更新这个属性的值,是不会重新渲染的。

我用vuedevtools看了一下,值是被修改的 后来我看了一下文档,vue 中无法检测到根据索引值修改的数据变动的,这种写法数组的值不会更新视图。

vue只监听了数组的splice,push,unshift等方法,可以使用 $set方法会更新视图。 

 Vue.set(vm.obj, ‘e’, 0) 您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:this.$set(this.obj,‘e’,02)


Vue绑定数据防止页面闪烁

有时候我们这么用

加载数据的时候可能会看到未被渲染时的情况

可以使用

还有种办法,使用v-cloak


添加相应css

这样就可以防止页面闪烁啦


组件引用使用require.context()

如页面需要导入多个组件,这样就写了大量重复的代码,且好丑


可以使用require.contextrequire.context

函数接受三个参数:

  • directory {String} -读取文件的路径
  • useSubdirectories {Boolean} -是否遍历文件的子目录
  • regExp {RegExp} -匹配文件的正则


这样不管多少个组件都能用这个方法啦,require.context在很多场景都可以使用哦


路由传参的几种方式

方法1:


方法2:



方法3:


三种方法的对比: 

方法1和方法3参数是拼接在路由后面的,会暴露信息 方法2不是拼接在路由后面,但是页面刷新后数据会丢失

方法2不是拼接在路由后面,但是页面刷新后数据会丢失


组件缓存不重新加载

这个有什么用呢?它可以包裹在组件的外层、


例如这么一个场景,现在有个tab栏,需要几个组件都引入的,

但是每个组件切换时就会让这个导航栏组件重新加载,这样比较耗费性能所以就可以用

keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

注:切换时组件的activated、deactivated生命周期函数会被执行


components和Vue.component的区别:

局部注册组件


全局注册组件



Vue.nextTick(): 

在下次DOM更新循环结束之后执行延迟回调。

在修改数据之后立即使用这个方法,获取更新后的DOM


自定义键码别名


键码值参考:

www.jianshu.com/p/a277f9ecd…


事件修饰符

.stop: 阻止冒泡

.prevent: 阻止默认行为

.self: 仅绑定元素自身触发

.once :只触发一次

.passive: 滚动事件的默认行为(即滚动行为)将会立即触发,不能和.prevent一起使用

使用方式:


三种Vue.$router

this.$router.push(): 跳转到不同的url,但这个方法回向history栈添加一个记录,点击后退会返回到上一个页面

this.$router.replace(): 不会有记录

this.$router.go(n): n可为正数可为负数。正数返回上一个页面,类似window.history.go(n)


Img加载失败

有时后台返回的图片路径因为某些原因加载失败了,这时候可以给个默认的图片路径



好吧  我发现用vscode截图画质先不说,就怎么感觉这么丑呢


先到这了 有时间咱就慢慢更~~~~