1.路由报错:vue-router.esm.js8c4f2065 Uncaught (in promise) NavigationDuplicated Avoided redundant navigation
重定向到的页面依然是当前所在的页面,也就是所谓的产生了冗余导航,vue-router便报错了
解决办法:重写vue中的push方法(在router index.js的页面中):
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
2.在开启一个项目或者在开始写代码之前,一定要搞明白逻辑业务需求在动手
3.axios请求同步化
使用 async 和 await
async 修饰的函数会返回一个promise对象
await 相当于promise中的then,指的是成功
await 后面接的是promise, await p1相当于p1.then
await 和 then 的区别就是:then还需要传回调进去,但 await 可以直接得到值
await 接数值
1.await后面跟的不是promise对象而是数值时,会自动包装成成功态的promise对象
2.并且传值给 resolve
async function fn(){
return 100
}
fn().then(res=>{
console.log(res) //返回一个成功态的promise对象,res 是 100
})
async function fn2(){
}
fn2().then(res=>{
console.log(res) //返回一个成功态的promise对象,res 是 undefined
})
来自:www.jianshu.com/p/c449537c0…
4.接口请求到的数据如何具有响应式
v-model里的属性会自动双向绑定的,所以不用set,要么把整个对象重新赋值
Vue 不能检测数组和对象的变化。
对于对象
对于对象: Vue无法检测 property 的添加或移除, 由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。 也就是说: 如果你在Vue实例化后, 再为某一个对象进行增加或删除属性, 那么vue就无法让这个属性变为响应式的
所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的
var vm = new Vue({
data:{
a:1
}
})
//vm.a 是响应式的
vm.b = 2
// `vm.b` 是非响应式的
对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如,对于:
Vue.set(vm.someObject, 'b', 2)
还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:
this.$set(this.someObject,'b',2)
有时你可能需要为已有对象赋值多个新 property,比如使用 Object.assign() 或 _.extend()。但是,这样添加到对象上的新 property 不会触发更新。在这种情况下,你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
对于数组
Vue 不能检测以下数组的变动:
当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
举个例子:
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题,你可以使用 splice:
vm.items.splice(newLength)
对于数组,除了使用对象的Vue.set或和vm.$set 方法。尤雨溪其实对数组的如下方法进行了封装,使用这些方法的时候已经进行了set监听。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()