vue框架為我們提供了一些便捷。我們在修改數據的時候，視圖就會自動的發生變化，會去做必要的重新渲染。正式因為這個便捷的功能，給我們帶來了一些問題，我們無法簡單的去控渲染視圖的時機，有一些自動為我們完成的，但有時候我們不需要他做太多的工作，當數據量非常大的時候，這個問題就尤為的明顯，因為我們的數據放到vue中，它會給我們做一個遍歷，給沒一個屬性都添加getter和setter，這樣就非常的冗余，而且沒一次一個數據的一點變動，可能會牽扯到很多數據和視圖的變化，這就造成了一定的性能問題，所以本節課，我們將圍繞這一點，展開一些敘述，看看哪些地方我們可以做一些優化，
列表優化
首先來看下iview的下拉菜單
數據多的時候會有滾動條。
如果數據量達到56百的時候，並且頁面上也有很多的下拉菜單的時候，選中一個項會非常的遲鈍。
這是提前創建好的頁面。
先把這個組件復制一下
數據我們要自己定義一下。定義數組list。在mounted里面給list賦值
之前寫好的，在這里加一個i
循環600次，拼接出來一個list
循環的時候，讓他循環這個list
定義選定的值
多賦值這個列表的代碼。復制出來3個
改成1千條數據
選中一個 會有 一個遲鈍
點紅色按鈕，然后下面會彈出來一個窗，然后去選擇下拉的值。
隨便選中結果，視頻中選了2、3次。
黃色這一段是點擊某一項 正在選中
vue的flushCallbacks話費了400多毫秒
這是因為我們選中一個，會在內部做渲染。數據改變了 會做重新的渲染。
1千條數據 ，每一項都渲染出來了。下面有一千個li標簽。
使用插件
引入這個組件，注冊下這個組件
用這個組件，把你要循環的組件包住
virtual組件上要設置兩個值。
li每一行是30像素的高速。
size就是每一項的高度，remain就是渲染的數據條數
都加一下
改成6 就不出兩個滾動條了
點擊后立馬選中，並且有個延遲加載的效果。
默認只渲染了11條數據
當滾動的時候
再來看下checkbox
給最頂層的div容器加個高度。
頁面滾動起來相當的卡。
刷新一下都很慢
vurtual組件來優化
渲染很快。
這里一共就渲染了12條數據。實際渲染的是你可見的區域
改成10 同樣渲染很快
大型表單優化
這是我們之前封裝的表單
把列表的數據抽出來
先變成一個空數組
放在mock文件夾下
放在這里默認導出
復制幾份表單的列表
粘貼了很多
依然怒這個formData
再復制一些表單數據，輸入的時候，數字好幾個字 好幾個字的往外蹦出來。
選中拖動會有延遲。
優化表單
卡的原因就是我們把數組都綁定在一個組件上，里面的數據一旦改變，就會在組件的根元素里面，去從根節點開始，重新遍歷、渲染。里面的數據越多，需要遍歷的也就越多 ，
性能分析這里先刷新
點擊紅點
輸入東西后，點擊stop
黃色是js代碼在計算，每次輸入了新的值都在渲染。
選中這一段
在做隊列的循環。數據越多監控的對象也就越多。遍歷的循環也就越長。
不要把所有的數據都綁定在一個組件上。
新建組件
之前的組件就放棄了。
創建form-single組件
對form-single做循環。
接下來要給form-singl傳一些值。config就是item元素對象。
我們之前在form-group里面傳入了model，它是一個對象，就是所有的表單元素的數據，在做驗證的時候會用到。
rules是沒一個表單元素的驗證規則 ，也是一個對象
error用來做錯誤提示。手動的展示表單的錯誤信息。
form-single還需要傳入這幾個參數，我們放在外面。
咋
給這三個對象的值賦值。遍歷formList，就是遍歷formData
定義三個空對象，然后forEach遍歷賦值，然后賦值給this對象上的三個對象。
form-single修改
復制form-group里面的代碼
復制過來后，定義傳入的屬性
表單元素的配置
是否顯示組件，根據config對象，如果有了 就顯示這個組件
循環刪掉，因為我們當前就渲染一個組件。
為什么把 form放在forn-single里面呢？
這是因為對當前這一條formItem做表單驗證。要不然就沒法做了。
所有的item換成config。按鈕刪除。
把按鈕放在了調用這個組件的頁面的form-single的 上面。
復制原來校驗的方法
放在了調用組件的頁面。
調用深拷貝和接口方法。
這里把index去掉了
這里的索引也刪掉
改成valueData
渲染出來了。
formItem都刪掉。它是必須包在form組件里面的。
handleFocus放子啊組件內部。
剛才的卡頓已經沒有了。
這個還比較卡，因為涉及到了dom操作。
性能分析
編輯的時候，黃色區域變窄了。
比較耗時的是 區間的選擇
組件驗證的修改
給form加個ref屬性
執行傳進來的回調函數。把valid傳給回調函數
form-single是通過v-for循環渲染出來的東西
給按鈕加個ref
如果在v-for循環上這個ref的話。它被獲取到的是一個數組。
this.refs.formSingle它是一個數組，里面的沒一個元素就是你沒個循環的組件實例。
所以這里我們要用一個循環forEach
實例上的validate方法
調用的validate方法就是組件內定義的
傳的數據就是valueData
直接點提交報錯
這個地方忘了加$符號
直接點提交
服務端返回的是401
改成lison提交就沒問題了
在上面定義
重置操作
重置后，所有的數據被重置。
以上就是表單的優化了。
表格優化
iview的表格，如果的表格渲染到了500行。又自定義render渲染了一些按鈕之類的。滾動起來會非常卡。這個表格組件本身就 很復雜。
專注於大數據渲染的表格組件。
渲染了大概1萬行數據。滾動起來也非常的流暢。
還可以進行編輯。
保存后
滾動某一列 橫向滾動
原理也是虛擬渲染，所以非常的流暢
滾動的時候會切換表格的位置
支持拖動列寬。
表格內有個colgroup，通過colgroup可以調整一整列的寬度。
github開源地址；
最后知識點
vue會把我們掛載到vue實例上的數據做遍歷，給每一個屬性添加getter和setter。當你做數據修改的時候，會觸發視圖的更新。如果你數據量非常大的話，它會給你做很多的getter和setter。所以當你一個復雜對象， 你不希望它給你做處理的話。數據量很大，而且視圖的更新又是可控的。那你可以對數據進行包裝。
這個方法是es5的方法，可以將一個對象密封，密封之后呢。這個對象上的屬性，你可以改它的屬性值，但是不能再往這個對象上增加新的屬性。vue會監測你這個對象，如果是密封起來的它就不會給你遍歷增加getter和setter操作。如果你的數據大的話，就不會有這上面的性能開銷。因為如果你的對象一旦很大，稍微一個屬性的修改可能就涉及到很多很多的更新，所以把它密封起來就可以了。
密封起來出現的問題是，計算屬性可能會失效、一些視圖的更新失效。所以計算屬性可以自己手動的把一些值做修改。原來是計算屬性的，你就寫在data里。手動去修改它的值。
視圖更新我們可以用vue的一個方法：forceUpdate()
可以在一個實例上去調用，一般是不會用到這個方法。
本節代碼叫做性能優化
結束