在这里给大家分享一些Vue的使用技巧，希望对大家有用。（代码不多说）1.vue路由拦截浏览器返回实现类似表单保存的需求（为了防止用户突然离开，输入的信息不保存）//路由组件中：mounted(){},beforeRouteLeave(to,from,next){if(用户已输入信息){//会出现弹窗提醒保存表单，或者后台自动保存}else{next(true);//用户离开}请参考Vue文档globalhook和componenthook2.路由懒加载写法：//个人认为我用的方法比较简洁，少了一步介绍任务。construuter=newVueRouter({routes:[path:'/app',component:()=>import('./app'),//引入组件]})//Vue路由文件的写法：constapp=()=>import('./app.vue')//引入组件construuter=newVueRouter({routes:[{path:'/app',component:app}]})//前端全栈学习交流圈：866109386//适合1-3年经验的前端开发者//帮助突破技术瓶颈，提升思维能力3、路由一般项目的项目起始页和404页面都会设置这个，如果默认入口地址会跳转到登录页面，如果输入无用路由或者空路由会跳转到notFind页面（你自己设置的404页面）exportdefaultnewRouter({routes:[{path:'/',//项目启动页面redirect:'/login'//repeat直接到下面声明的路由},{path:'*',//404页面组件:()=>import('./notFind')//也可以使用组件},]})4.setIntervalrouting跳转继续运行，不存在destruction的问题nbeforeDestroy(){//我一般是给这个实例分配setInterval()定时器，然后像下面这样就可以暂停了。clearInterval(this.intervalid);}，beforeDestroy方法是生命周期中组件销毁前执行的钩子函数。离开时会触发该方法。这种方法在其他地方也会有用。我希望你能找到答案。5.setTimeout/setInterval这个点改了，不能用这个来访问VUe实例。这个地方的默认方法必须是：//使用变量来访问这个实例letself=this;setTimeout(function(){console.log(self);//使用self变量来访问这个实例},1000);其实我们可以在这个地方使用箭头函数，因为箭头函数会改变this的方向，这个this恰好是我们的父级this，所以我们可以这样使用：//箭头函数访问this实例，因为箭头函数本身没有绑定到thissetTimeout(()=>{console.log(this);},500);所以我们的this指向我们的vue实例。6.vue数组/对象更新视图不??更新方法一：直接使用最简单有效的方法，深拷贝对象或数组，视图会更新，但是会有一个缺点，深拷贝后的数组或对象不是原来那个数组或对象是你现在改变的值。上面的代码：yourobjectorarray=JSON.parse(JSON.stringify(yourobjectorarray))先转换字符串，再转换回对象。这是一个复制过程，会触发视图的改变。同时也进行了一次数组替换，有利也有弊。方法二：this.$set(你要改变的数组/对象，你要改变的位置/键，你要改变什么值)this.$set(this.arr,0,"OBKoro1");//ChangeArraythis.$set(this.obj,"c","OBKoro1");//改变对象这是Vue专门设置的改变数组的方法，使用起来非常简单（如果你还不懂的请参考vue文档）7.deepwatch和watchimmediatelytriggercallbackwatch很多人都用过，但是这个watch里面的deep和immediate这两个选项可能很多人都不知道，我猜。Option:deep在option参数中指定deep:true来监听对象中属性的变化。option:immediate如果在option参数中指定immediate:true，则回调会以表达式的当前值立即触发，即默认触发一次。watch:{obj:{handler(val,oldVal){console.log('当属性变化时触发回调',val,oldVal);},deep:true//监听这个对象的每一个属性变化},step:{//property//watchhandler(val,oldVal){console.log("默认触发一次",val,oldVal);},immediate:true//默认触发一次},},
