Vue使用技巧和项目中遇到的问题

这里给各人分享一下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 } 
 ] 
}) 
//前端全栈进修交换圈：866109386 
//面向1-3履积年前端开拓职员 
//辅佐打破技能瓶颈，晋升思想手段 

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

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!