一、对象初始化

早上例行体验一下在做的项目,看看有什么问题。发现编辑界面上周还好好的,这周打开就报错了,还关不掉弹窗那种,不进发问,Vue 你这是怎么啦?上周还运行的好好的。报错如下:

Error in nextTick: "TypeError: Cannot convert object to primitive value"

字面意思很容易懂,就是在界面更新阶段,某一个值给了对象。这种问题一般都会出现在传值的过程中,可能是某个组件要求的是一个原始值,传了对象。检查一下代码,有一个动态切换的组件,传的值有一个默认值是 Object.create(null),应该是这个有问题了,把原始值改成 null,果然没问题了。

这里给了我一个提示,默认值最好用 null 而不是用 Object.create(null)

二、vue-router 重复跳转

项目用 router-view 切组件,点击登出切换到登录界面报这个 error

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

虽然 error,但是不影响代码功能,看到全网竟然很一致的说加上以下代码 catch 一下 error 就可以,但是发现加了还是报错。

const originalPush = VueRouter.prototype.push;

VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
};

于是我就想这个只是 catch 到 push 方法的,我还用了 replace,那就再 catch 一下 replace 的吧,最后封装函数如下

// catch 路由重复跳转 error
function aviodRepeatRouter() {
const originalPush = VueRouter.prototype.push;
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
};
VueRouter.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err);
};
}
aviodRepeatRouter();

三、native 修饰符滥用

native 修饰符用于监听根元素上的原生事件,这里很容易造成滥用,滥用可能会导致触发几次同一个方法,比如一个下拉框,在 option 上使用了 click.native 修饰符可能会触发两次,一次是根元素的 click, 一次是本身的 click。