vue-resumer 項目中 element-ui 遇到的 textarea autosize 問題

<el-input type="textarea" :autosize="{minRows:2}" v-model="amodel"></el-input>

如上邊代碼，element-ui 提供自動改變大小的 textarea 功能（這個功能詳見）。

遇到問題表現

可是個人一個項目裏，當 amodel 初始就有值的時候，他並不能調整大小，而是會出現滾動條，只有當修改內容的時候纔會從新調整到合適大小。

解決過程

1. 我首先想到的是這是否是個坑，而後就直接搜索其餘人有沒有遇到過，但我把項目的 issue 都找過了也沒有找到，看來並非一個常見的坑
2. 接下來我就想能不能用笨辦法先把問題解決，項目繼續往下進行，我首先想到的是既然改變內容能把問題解決，那把對應的元素觸發一遍 change 或者 input 事件之類的試一下，可是我並無找到 elementUI 是什麼事件纔會觸發 autosize，並且項目中的數據項較多，這個辦法甚至有點蠢了
3. 我繼續思考，會不會是時機問題，由於我寫的項目處的階段是從 localstorage 拿數據，暫時還沒寫從服務端拿數據。我是在 created 階段從 localstorage 讀取的數據，而我查資料獲得 elementUI 是在 mounted 階段調整大小的，說明並非這一問題。後來我纔想到哪怕是先渲染而後再改變數據也應該是正常表現，這一思路徹底不正確。

4. 接下來我只能用更笨的辦法逐步排查是什麼問題

   1. 首先我新建一個空項目，寫好 elementUI 的 hello world
   2. 而後寫一個 autosize 的 textarea，分別測試了幾個我認爲引起問題的小因素，但都未重現
   3. 接下來把我原項目中的的部分數據和 template 代碼拷貝到新項目，發現也沒問題
   4. 而後我猜想是否是由於外層的循環致使或者是外邊的容器致使的，因此我把更多的數據和 template 的結構拷貝的測試項目中，發現均沒問題，有點方了……
   5. 我幹了半個小時別的，回來繼續想這個問題，我忽然想到 4 中我複製代碼的時候控制顯示隱藏的數據沒有拷貝過來（原項目中是有 tab 的，測試項目中沒有，就沒辦法切換顯示隱藏，因此我就沒拷貝），報了錯，而後我直接寫死了（寫成 true）。隱藏用 v-show 控制的，其實是 display:hidden，我就想到是否是隱藏的元素 elementUI 就不 autosize 了。而後我立刻在原項目中測試，將其中一個出現問題的 tab 設置爲默認的 tab，果真沒問題的，問題的緣由終於肯定了。原項目中有好幾個 tab 須要 autosize，剛纔設置默認 tab 這種方法確定是不行的，那麼換一種控制顯示隱藏的方法就行了，由於我換了v-show，雖然 tab 這種須要頻繁切換的用v-show更合適，可是爲了解決這個問題也只能這麼作了。

   通常來講， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不太可能改變，則使用 v-if 較好。

ps：只是記錄本身的思考過程，因此行文比較凌亂，語法也可能有問題，見諒。

PPS：在 GitHub 提了個 issue，獲得的解決方案是：

1. 爲 input type=textarea 增長ref。好比ref='userInfo'
2. 在v-show的值發生變化時，調用this.$refs.userInfo.resizeTextarea()，調用方法以下:

this.$nextTick(function () {
vmSelf.$refs.userInfo.resizeTextarea();
});