vconsole 问题

[cklwblove]

问题描述：

[Vue warn]: Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

原因：

• 业务页面用console.log打印了一些复杂对象（比如vue的$refs）导致出错，可以尝试注释掉业务里的console.log再看看。
• 打印的对象太复杂（例如：Vue 实例对象 this、Circular Objects）；
• Vue 或插件的对象属性声明、引用或赋值时类型不一致；

解决办法：

• 不要直接整个打印 Vue 实例对象 this 等复杂对象，例如按需打印成员属性和方法；
• Vue Router 路由对象的 from 和to 属性需要做拷贝处理，例如: to 属性可以这样 JSON.parse(JSON.stringify(to)) 直接拷贝；另外 from 属性比较特殊（疑似因为 from.name 的声明和赋值类型不一致）则需要遍历拷贝，其中 from.matched 属性更复杂，建议不要输出，或者做深拷贝处理；

function vueRouteObjectCopy (route: Route): Route {
    let _route: any = {}

    for (let i in route) {
        if (typeof route[i] === 'object') {
            if (i === 'matched') {
                _route[i] = [] // 'from.matched' is circular objects, need deep copying, recommended not to print this property
            } else {
                _route[i] = Object.assign({}, route[i])
            }
        } else {
            _route[i] = route[i] || ''
        }
    }

    return _route
}

参考：https://github.com/Tencent/vConsole/issues/152

[cklwblove]

当页面数据量比较大时，vConsole 有的时候也会导致移动端页面卡死现象