vxe-table/docs/static/js/optimize.ec8a8fbd.js

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