elementui 样式渲染的慢_各位，来谈谈用element-ui遇到的bug吧？

每一次升级，不仅是对新框架的考验，更是对旧代码和程序员的考验。 —— 鲁迅

泻药。

看热闹不嫌事情大呀～现在Github上还有10多页issue呢。

最近升级了几个CMS的element-ui版本(1.0 -> 2.0)，趁着有人问记录一下～

版本更新

每次版本更新的版本号分为x、y、z。x的更新意味着不兼容更新，需要放弃旧的内容，可能导致API的不兼容。

y的更新一般是添加新功能，不兼容的很少。

z的更新一般只是修复BUG

因此，在接受x级更新时要慎重行事。

样式错误

需要注意的是 Element UI 修改了默认样式表，原来的引用没有了。

// main.js

// 原来

import 'element-ui/lib/theme-default/index.css'

// 现在

import 'element-ui/lib/theme-chalk/index.css'

一般都是旧版本下开发者的LESS变量不适用新版本的样式大小。

比如这个 Button 中文字不居中问题，是由 Button 的高导致的：

&--large {

height: $btn-height-lg;

font-size: $btn-font-size-lg;

}

&--small {

height: $btn-height-sm;

font-size: $btn-font-size-default;

}

&--mini {

height: $btn-height-mi;

font-size: $btn-font-size-default;

}

修改你的 height 全局变量就可以了。

接口运行错误

在版本更新后，有些API调用会发生变化。Element 3.0 的参数比 2.0 更加对象化。

比如这个 table 的样式问题：

tableRowClassName (row, index) {

...

}

发现样式不见了，其实是接口改变了：

tableRowClassName ({row, rowIndex: index}) {

...

// 代码无需改动

}

还有的地方去除了较少使用的参数。

比如这个 select 框选择无效的问题：

handleCheckedCitiesChange(event) {

console.log(event.target.checked)

}

原因也是接口的改变：

handleCheckedCitiesChange(checked) {

console.log(checked)

}

渲染模式优化

有些时候，维护者为了提高渲染效率，也会进行渲染模式的优化。这种优化引发的BUG就只能采用一些 hack 的方式解决了。

比如在一些情况下表格列不会更新或者更新错误，我们可以通过这种方式解决：

...

...

this.rerenderTable = false

this.$nextTick(() => {

this.rerenderTable = true

})

这其实是由于 Element 在 mounted 时改变了 fixed 列注册监听逻辑导致的。

版本不匹配

在开发过程中，为了减少自动升级引发的BUG，我们往往会用各种各样的方式固定版本，结果往往是，在版本升级的过程中踩了自己挖的坑。

如果你使用了 DllPlugin，记得升级版本后更新 vender 文件。

还有一些老代码，可能将下面两种形式混用了。

import vue from 'vue/dist/vue.esm.js'

import vue from 'vue' // 全部改成这种

这会结果导致版本不一致报出 $attrs is readonly 的警告。

结束

有些同学说 Element 没有迁移指南，其实看 Change Log 逐一 Check 就差不多了。

反正运行只有一种, Bug 各有各的 Bug 咯～该踩的坑还是会踩的，吼吼吼～

以上。