Vue3报错Cannot convert undefined or null to object问题及解决
作者：忆往昔成风
Vue3与Vue-cli5中出现“Cannot convert undefined or null to object”错误,因基类组件data()未返回默认空值对象导致属性合并异常,解决方法是确保data()返回对象,避免继承组件属性冲突
1、报错信息
在vue3，vue-cli5的环境中，出现 "Cannot convert undefined or null to object " 的报错信息
- 报错截图如下:
2、问题排查
备份Template里面的标记，排除是因为模板语法导致的
如果不是模板里的问题，那么很大概率就是js里出现的问题，可能是在组件创建的时候，也可能是在组件创建完成，执行相关生命周期函数的时候导致的问题，比如created，mounted等，把created和mounted函数里执行的相关代码注释，发现还是报错，那比较大的可能性就是在extend:Base这一块，结合报错内容，可能是存在什么undefine或者null的对象转换，比较大的可能是基类组件的属性和继承组件的属性合并过程中，导致这个错误
控制台没有打印'page created'，说明组件并没有创建成功
3、问题定位
如果按照存在undefine或者null转换为对象的问题，因为基类组件的方法不多，问题就很好定位了，只有data()里是空的，基类执行合并的时候，data()作为应该返回一个数据对象，而此处返回的是undefine或者null，于是在合并的时候就报了这个问题
4、解决方法
在data()里返回一个对象，这样在基类组件的data和继承组件的data合并时，就不会导致这样的错误，如果存在键重复的情况是否会报其他错误?
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。