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项目中遇到的问题。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |