[TOC] ## 問題歸納 本篇主要介紹模塊中的常見的報錯，希望列舉不正確的以及不完善的大家幫忙提出。 ### 根據內容改變調整布局： 場景：如果是流動布局，這里沒有任何問題，其內容變多之后會將其他內容的空間擠下去，但是如果你是想根據內容改變去調整已經固定好的布局方式，那么就需要變化內容容器的寬度高度傳遞給布局容器。 基本方案是：數據變化之后，用eventBus 或者vuex將高度傳遞，重新布局 問題點是：內容改變后的元素的盒模型的寬高不能馬上得到，如果你馬上調用事件就會導致其每次傳遞的是上一次變動的結果。 解決方案是 ：this.$nextTck() ,完整代碼方案如下： ~~~ //內容組件 this.areaList = res.body.data let height = this.$refs.container.offsetHeight this.$nextTick(() => { this.$root.bus.$emit('heightChange',height) }) //布局組件中監聽 topHeight為布局容器中留給內容容器的高度 let that = this this.$root.bus.$on('heightChange', function(height) { that.topHeight = top }) ~~~ ### 計算屬性&&普通方法 場景：在基本的功能支持上，方法以及計算屬性都可以支持根據某些data值來得到其他的值，那么其對比和區別是什么呢？ 說明：計算屬性很大的特性就是依賴緩存，不會每次都渲染，針對有遍歷大量數組和大量計算的時候，應當使用計算屬性 ### 綁定class的幾種方式 場景：經常會根據需要決定是否需要綁定某個class,有以下幾種方式可供選擇使用 | 類型 | 說明 | | --- | --- | | 對象語法| 針對需要設置的class設置對象返回值，需要使用，則定位為true，否則為false ,比如`:class="{'isActive':true}"` ，對于復雜的class判斷，可以定義計算屬性或者方法，返回class對象的配置項| | 數組語法 | 可以給class綁定一個數組，然后在數組內的每個變量設置具體的樣式變量的值，比如：`：class="[activeClassA]",activeClassA:'a'`| | 字符串語法 | 原理是vue語法內支持基本的js運算， 使用返回字符串的格式，比如：`：class="active?'active':'disactive'"` | | 內聯樣式 | 將可以使用的內斂樣式直接定義為樣式對象，進行修飾，比如：` ：style="styles" styles:{color:red}`| ### v-if 與 v-show 相信大多數人都用過這兩者，卻沒有深度對比過兩者的區別。v-if的效果是是否重新渲染，而v-show只是控制其css的樣式。 所以個人有以下的幾個建議： - 頻繁修改的建議用v-show，而載入頁面就決定了并且低頻或者不修改的用v-if - 代碼中針對敏感數據內容或者權限做嚴格控制的，用v-if，如果只是產品交互或者設計排版的需要用v-show ### 你不知道的v-for 對于v-for，我們一般是遍歷數組的，但是也可以支持遍歷字符串，對象以及數字。比如： ~~~ // 遍歷顯示每個字符 <li v-for="c in 'aaa'"></li> // 遍歷顯示對象,如果有三個，則分別顯示值，key以及index let o = {name:1} <li v-for="c in o "></li> <li v-for="(value,key,index) in o "></li> // 簡單的重復輸出n次，為1-n的遞增顯示 <li v-for="c in 3 "></li> ~~~ ### mutation-types 方法枚舉類型，官網說明，其實定義申明如此多的變量常量是為了多人協作，那么究竟如何理解這句話。 1 有這個文件可以讓合作者清晰直接的看到app中有多少定義常量文件，便于統一查看和管理。 2 共享一些常量名稱，便于去重和重新定義。 ### 前端測試 待完善... 參考文檔：[基本測試](https://vuex.vuejs.org/zh/guide/testing.html) ### 快速初始化一個vue文件模板 當你用的是vue并且軟件是vscoode需要快速初始化的時候 ，打 < 選擇提示的第一個 就可以了，可以得到下面的結果  ``` <template> </template> <script> export default { } </script> <style > </style> ``` ### v-for 遍歷對象屬性 經常使用是遍歷對象的語法，v-for='(item,index) in arr',而遍歷對象時，其是不同的，第二個為鍵值。v-for='(item,key,index) in obj'.作為常識必須清楚。 ### computed 監聽內容 一般我們認為computed會監聽計算屬性所用到的所有的變量，其實不然，其增加監聽的僅僅是綁定在data中的變量，對于其他變量并不做監聽以及動態改變其計算值。 另外需要注意的是，利用計算屬性的優點之一就是可以利用緩存， 當值不發生變化的時候，不會重新觸發計算和渲染。