vue中異步請求渲染問題（swiper不輪播）（在開發過程當中遇到過什麼問題、踩過的坑）

問題描述：

　　用vue封裝一個swiper組件的時候，發現輪播圖不能輪播了。

緣由：

　　異步請求的時間遠大於生命週期執行的時間，mounted初始化DOM時數據未返回，渲染數據是空數組，致使輪播圖的容器層寬度爲0，渲染輪播圖不能滾動。

解決思路：

　　數據返回以後再作初始化操做。

解決方法：

　　1、容器沒有寬度，就想着給容器設置一個寬度，可是一旦設置死數據了後期維護起來很麻煩。

　　2、設置一個定時器，延長等待的時間，可是沒法肯定網絡請求的時間，這樣操做嚴麼會等待時間過長，影響用戶體驗，要麼是尚未請求完就去獲取數據，這樣依然是不行。

　　3、vue提供了一個全局API，Vue.$nextTick()，它的做用是獲取數據更新後最新的DOM結構。$nextTick()是同步的，可是裏面的回調是異步的。底層是MutationObserver或setTimeout(fn,200)。

 

 

 

在react中map方法遍歷必需要加key值

setState是異步的：

　　this.setState()會調用render方法，但並不會當即改變state的值。state是在render方法中賦值的，因此在this.setState()執行後當即獲取state值是不變的。直接修改state值並不會觸發更新，由於沒有觸發render函數。

　　組件卸載以前，加在dom元素上的監聽事件和定時器必需要手動清除，它們不屬於react控制範圍內。