这里给大家分享一下 vue 中的一些技巧, 希望对大家有用处.(话不多说上代码)
1,vue 路由拦截浏览器后退实现表单保存类似需求 (为了防止用户突然离开, 没有保存已输入的信息.)
- // 在路由组件中:
- mounted(){
- },
- beforeRouteLeave (to, from, next) {
- if(用户已经输入信息){
- // 出现弹窗提醒保存表单, 或者自动后台为其保存
- }else{
- next(true);// 用户离开
- }
请参考 vue 文档全局钩子和组件钩子
2, 路由懒加载写法:
- // 我所采用的方法, 个人感觉比较简洁一些, 少了一步引入赋值.
- const router = new VueRouter({
- routes: [
- path: '/app',
- component: () => import('./app'), // 引入组件
- ]
- })
- // Vue 路由文档的写法:
- const app = () => import('./app.vue') // 引入组件
- const router = new VueRouter({
- routes: [
- { path: '/app', component: app }
- ]
- })
3, 路由的项目启动页和 404 页面
一般项目都会设置这个, 如果默认进入地址会跳到 login 页面, 如果你输入的是一个没有用的路由或者是空路由会跳转到 notFind 页面 (你自己设置的 404 页面)
- export default new Router({
- routes: [
- {
- path: '/', // 项目启动页
- redirect:'/login' // 重定向到下方声明的路由
- },
- {
- path: '*', // 404 页面
- component: () => import('./notFind') // 或者使用 component 也可以的
- },
- ]
- })
4,setInterval 路由跳转继续运行并没有销毁问题
- beforeDestroy(){
- // 我通常是把 setInterval() 定时器赋值给 this 实例, 然后就可以像下面这么暂停.
- clearInterval(this.intervalid);
- },
beforeDestroy 方法是生命周期里组件销毁前执行的钩子函数, 在离开的时候会触发这个方法, 这个方法在其他的地方也会有妙用, 希望大家可以去了解一下.
5,setTimeout/setInterval this 指向改变, 无法用 this 访问 VUe 实例
这个地方大家的默认方法肯定是:
- // 使用变量访问 this 实例
- let self=this;
- setTimeout(function () {
- console.log(self);// 使用 self 变量访问 this 实例
- },1000);
其实这个地方我们可以用箭头函数, 因为箭头函数会改变 this 的指向, 而指向的刚好是自己的父级 this, 所以我们可以这样用:
- // 箭头函数访问 this 实例 因为箭头函数本身没有绑定 this
- setTimeout(() => {
- console.log(this);
- }, 500);
这样我们的 this 就是指向我们的 vue 实例了.
6,Vue 数组 / 对象更新 视图不更新
方法一: 直接使用最简单也是最有效的方法, 深拷贝对象或者数组, 视图会进行更新, 不过会有一个缺点, 深拷贝后的数组或者对象不是原来的那个数组或者对象, 是你现在改变了之后的值.
上代码:
你的对象或者数组 = JSON.parse(JSON.stringify(你的对象或者数组))
先进行转字符串, 再转回对象, 这个就进行了一个拷贝的过程, 会触发视图的改变, 同时也进行了一个数组的替换, 有利有弊.
方法二: this.$set(你要改变的数组 / 对象, 你要改变的位置 / key, 你要改成什么 value)
- this.$set(this.arr, 0, "OBKoro1"); // 改变数组
- this.$set(this.obj, "c", "OBKoro1"); // 改变对象
这个是 vue 专门为改变不了数组设定的一个方法, 使用也很简单 (如果还是不懂请参考 vue 文档)
7, 深度 watch 与 watch 立即触发回调
watch 很多人都在用, 但是这 watch 中的这两个选项 deep,immediate, 或许不是很多人都知道, 我猜.
选项: deep
在选项参数中指定 deep: true, 可以监听对象中属性的变化.
选项: immediate
在选项参数中指定 immediate: true, 将立即以表达式的当前值触发回调, 也就是默认触发一次.
- watch: {
- obj: {
- handler(val, oldVal) {
- console.log('属性发生变化触发这个回调',val, oldVal);
- },
- deep: true // 监听这个对象中的每一个属性变化
- },
- step: { // 属性
- //watch
- handler(val, oldVal) {
- console.log("默认触发一次", val, oldVal);
- },
- immediate: true // 默认触发一次
- },
- },
暂时先更新这些, 后续还会继续更新, 希望会对你们有帮助,(还有就是关注走一波, 哈哈)
来源: https://www.cnblogs.com/luozhixiang/p/9133386.html