记录⼀次升级ant-design-vue的遇见的bug
记录⼀次升级ant-design-vue的遇见的bug
使⽤版本:
"version": "2.5.2"
"ant-design-vue": "1.4.2",
vue模板内容
<template>
<div>
<a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" :locale="{emptyText:'sdfsd'}"/>
</div>
</template>
<script>
export default {
data() {
return {
data:[ {
key: 1,
address: 'New York No. 1 Lake Park',
}] ,
columns: [
{
title: 'Address',
dataIndex: 'address',
width: '100%',
key: 'address',
},
],
rowSelection:{
onChange: () => {},
onSelect: () => {},
onSelectAll: () => {},
}
};
},
};
</script>
chrome控制台显⽰如下:
打开Sources看到是_traverse⽅法报错
function _traverse (val, seen) {
var i, keys;
var isA = Array.isArray(val);
if ((!isA && !isObject(val)) || !Object.isExtensible(val)) {
return
}
if (val.__ob__) {
var depId = val.__ob__.dep.id;
if (seen.has(depId)) {
return
}
seen.add(depId);
}
if (isA) {
i = val.length;
while (i--) { _traverse(val[i], seen); }
} else {
keys = Object.keys(val);
i = keys.length;
while (i--) { _traverse(val[keys[i]], seen); }
}
}
该⽅法存在于vue项⽬src/core/observer/traverse.js中，
traverse 的逻辑也很简单，它实际上就是对⼀个对象做深层递归遍历，因为遍历过程中就是对⼀个⼦对象的访问，会触发它们的 getter 过程，这样就可以收集到依赖，也就是订阅它们变化的 watcher
下⾯的代码就会触发traverse：
watch: {
a: {
ant design deep: true,  // deep属性为true是关键
handler(newVal) {
console.log(newVal)
}
}
}
在 watcher 执⾏ get 求值的过程中有⼀段逻辑：
get() {
let value = call(vm, vm)
// ...
if (this.deep) {
traverse(value)
}
}
在traverse中打断点，打印出递归的traverse的参数name，发现异常:
如果深度遍历⼀个vnode节点，每⼀个vnode都保存有⽗节点和⼦节点的引⽤，遍历所有的vnode确实会导致栈溢出，但是怎么会遍历到⼀个vnode节点呢？
再看前⾯遍历到的⼀个对象，在ant-design-vue⽂档中查到是渲染rowSelection⽤到的，于是在ant-desing-vue的源码查到了 renderRowSelection⽅法: renderRowSelection: function renderRowSelection(
prefixCls, locale) {
......
selectionColumn.title = selectionColumn.title
|| h(SelectionCheckboxAll, {
attrs: {
store: this.store,
locale: locale,
data: data,
getCheckboxPropsByItem: CheckboxPropsByItem,
getRecordKey: RecordKey,
disabled: checkboxAllDisabled,
prefixCls: prefixCls,
selections: rowSelection.selections,
hideDefaultSelections: rowSelection.hideDefaultSelections,
getPopupContainer: atePopupContainerFunc()
},
on: {
'select': this.handleSelectRow
}
});
......
SelectionCheckboxAll组件的locale属性就包含了emptyText,filterReset等，到了位置，调试⼀下在renderTable中发现如下代码：
// locale⾄少是⼀个空对象
var locale = _extends({}, contextLocale, this.locale);
if (!locale || !ptyText) {
}
......
var columns = derRowSelection(prefixCls, mergedLocale);
问题在于如果locale，经过排查international的LocaleReceiver.js，发现locale中有数据，⼜不存在emptyText字段，导致emptyText赋值为renderEmpty⽅法返回的组件，渲染SelectionCheckboxAll组件的时候，对属性遍历就会报栈溢出。
解决⽅案⽐较简单：给a-table组件加⼀个locale属性，同时locale的属性emptyText不为空。
之前的项⽬中为什么没有报错？
经过对⽐package.json和node_modules中的版本，发现旧项⽬ant-design-vue的版本是1.2.4，回退回去之后，问题消失了。
官⽹上为什么能够正常使⽤呢?
⾃⼰下载了⼀个浏览器版本的vue和antd-vue，测试正常，怀疑是vue版本的问题，对⽐了traverse⽅法
function _traverse (val: any, seen: SimpleSet) {
let i, keys
const isA = Array.isArray(val)
if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
return
}
if (val.__ob__) {
const depId = val.__ob__.dep.id
if (seen.has(depId)) {
return
}
seen.add(depId)
}
if (isA) {
i = val.length
while (i--) _traverse(val[i], seen)
} else {
keys = Object.keys(val)
i = keys.length
while (i--) _traverse(val[keys[i]], seen)
}
}
多了 val instanceof VNode这句判断，问题就解决了。看看vue升级记录：
最终的解决⽅案：升级vue版本到
本⽂结束