1 line
2.9 KiB
JavaScript
1 line
2.9 KiB
JavaScript
(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["optimize"],{"1ce5":function(t,e,a){},5553:function(t,e,a){"use strict";var n=a("af41"),r=a.n(n);r.a},"8c32":function(t,e,a){"use strict";a.r(e);var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("p",{staticClass:"red"},[t._v("问题现象：当表格数据量较大时，由于数据量越大表格的渲染就会越慢")]),a("p",[t._v("Vue 响应机制：由于 vue 会对数据源进行 set / get 双向绑定，所以对于数据量海量的情况下耗时会很久")]),a("p",{staticClass:"red"},[t._v("问题所在：数据量过大、页面渲染 Element 节点太多导致页面卡顿")]),a("p",[t._v("优化方案1：如果数据量超大 200+ 条，通过"),a("router-link",{staticClass:"link",attrs:{to:{name:"TableScroll"}}},[t._v("虚拟滚动方式")]),t._v("按需加载，比如将数组拆分成可视区 100 条；由于只渲染了可视区，所以渲染会很快")],1),a("p",[t._v("优化方案2：不要使用数据源的双向绑定，使用函数式的 loadData / reloadData 进行数据加载，可以跳过 vue 的双向绑定，这对于大数据量提升很大")])])},r=[],s=(a("a9bf"),a("2877")),l={},i=Object(s["a"])(l,n,r,!1,null,"591a7494",null);e["default"]=i.exports},a9bf:function(t,e,a){"use strict";var n=a("1ce5"),r=a.n(n);r.a},a9db:function(t,e,a){"use strict";a.r(e);var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("p",{staticClass:"red"},[t._v("问题现象：当表格数据量较大时，单元格输入卡顿（输入框比较严重，输入后明显感觉会卡顿一会）")]),a("p",[t._v("Vue 响应机制：双向绑定对于非数组类型的数据是非常友好的；但对于数组就没那么友好了，特别是数据量大的数组，只要列表中有 input 去修改某个值，就会重新执行 render 函数，这时运算量取决于数据的大小，数组越大，执行越久，卡顿时间也就越久。")]),a("p",{staticClass:"red"},[t._v("问题所在：由 input 输入改变数组中的值导致 Vue 的 render 频繁执行产生短暂卡顿")]),a("p",[t._v("优化方案1：如果数据量超大 200+ 条，通过"),a("router-link",{staticClass:"link",attrs:{to:{name:"TableScroll"}}},[t._v("虚拟滚动方式")]),t._v("按需加载，比如将数组拆分成可视区 100 条；由于数量的减少所以即使 render 函数执行得再频繁也是很快的")],1),a("p",[t._v("优化方案2：如果数据量 200 条以下，单元格输入框不要使用任何组件（特别是 v-model ），应该使用原生的输入框，配合"),a("router-link",{staticClass:"link",attrs:{to:{name:"RendererAPI"}}},[t._v("渲染器")]),t._v("实现，将 input 事件改成 change 事件，避免 render 函数频繁执行。这样就可以使输入框很流畅了")],1)])},r=[],s=(a("5553"),a("2877")),l={},i=Object(s["a"])(l,n,r,!1,null,"56244404",null);e["default"]=i.exports},af41:function(t,e,a){}}]); |