vue常见问题积累

发表于   |   分类于   |   阅读次数

问题总结积累，便于快速查找

vue-router-1.0 钩子函数问题

问题描述

针对某一子路由，若在进行路由跳转判断时，调用transition.abort()放弃跳转，当前路由会重新进行刷新，相当于进入了当前页。

例如:

1
2
3
4
5
6
7
8
9
10
route:{
  data(){
    //进行路由切换时，虽然transition放弃了，仍会进行Log
    console.log(1);
  },
  
  canDeactivate(transition) {
    transition.abort();
  }
}

针对此类问题，往往会导致以下的效果，

例如我们在进入页面时，请求数据进行初始化，当我们进行表单等数据填写后，由于验证为通过，路由放弃跳转，但会进行二次初始化，导致之前修改的内容都失效。

解决方案

针对以上问题，目前只能对于具体问题具体解决，有两种解决方案

1.修改钩子函数

例如，针对二次初始化问题，我们不想在放弃跳转之后重新进行请求，我们可以将请求方在activate钩子里，
再路由切换前，进行初始化。

2.判断路由来源

在data钩子函数中，对transtion进行判断，若transion.from.name 等于当前路由的name,相当于从当前路由进行刷新，我们不进行二次请求

1
2
3
4
5
6
7
8
route: {
  data(tran) {
    if(tran.from.name != tran.to.name) {
      //进行请求
      ...
    }
  }
}

vue1.0 v-for 元素重复问题，2.0尚未验证

问题描述

使用v-for进行数组列表渲染时，当数组内部含有重复元素时，如[‘a’,’b’,’a’],
会报出如下警告：

1
Duplicate value found in v-for="(index,item) of numPoint.text": "s". Use track-by="$index" if you are expecting duplicate values.

也就是说，渲染出的列表是经过去重的。

解决方案

track-by=”$index”

强制让 v-for 进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。

同时，可以了解下track-by,尽可能的复用已有实例，减少全局刷新