vue使用技巧及vue项目中遇到的问题

发布时间:2019-10-10 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了vue使用技巧及vue项目中遇到的问题大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

这里给大家分享一下vue中的一些技巧,希望对大家有用处。(话不多说上代码)

1,vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息。)

}else{
next(true);//用户离开
}

请参考vue文档全局钩子和组件钩子

2,路由懒加载写法:

import('./app'),// 引入组件 ] }) // Vue路由文档的写法: const app = () => import('./app.vue') // 引入组件 const router = new VueRouter({ routes: [ { path: '/app',component: app } ] })

3,路由的项目启动页和404页面

一般项目都会设置这个,如果默认进入地址会跳到login页面,如果你输入的是一个没有用的路由或者是空路由会跳转到notFind页面(你自己设置的404页面)

import('./notFind') // 或者使用component也可以的 },] })

4,setInterval路由跳转继续运行并没有销毁问题

beforeDestroy方法是生命周期里组件销毁前执行的钩子函数,在离开的时候会触发这个方法,这个方法在其他的地方也会有妙用,希望大家可以去了解一下。

5,setTimeout/setInterval this指向改变,无法用this访问VUe实例

这个地方大家的默认方法肯定是:

其实这个地方我们可以用箭头函数,因为箭头函数会改变this的指向,而指向的刚好是自己的父级this,所以我们可以这样用:

{ console.log(this); },500);

这样我们的this就是指向我们的vue实例了。

6,Vue 数组/对象更新 视图不更新

方法一:直接使用最简单也是最有效的方法,深拷贝对象或者数组,视图会进行更新,不过会有一个缺点,深拷贝后的数组或者对象不是原来的那个数组或者对象,是你现在改变了之后的值。

上代码:

你的对象或者数组=JSON.parse(JSON.stringify(你的对象或者数组)) 先进行转字符串,再转回对象,这个就进行了一个拷贝的过程,会触发视图的改变,同时也进行了一个数组的替换,有利有弊。

方法二:this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value)

这个是vue专门为改变不了数组设定的一个方法,使用也很简单(如果还是不懂请参考vue文档)

7,深度watch与watch立即触发回调

watch很多人都在用,但是这watch中的这两个选项deep、immediate,或许不是很多人都知道,我猜。

选项:deep

在选项参数中指定 deep: true,可以监听对象中属性的变化。

选项:immediate

在选项参数中指定 immediate: true,将立即以表达式的当前值触发回调,也就是默认触发一次。

总结

以上所述是小编给大家介绍的vue使用技巧及vue项目中遇到的问题。菜鸟教程 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得菜鸟教程不错,可分享给好友!感谢支持。

大佬总结

以上是大佬教程为你收集整理的vue使用技巧及vue项目中遇到的问题全部内容,希望文章能够帮你解决vue使用技巧及vue项目中遇到的问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。