6、事件銷毀
7、懶載入
8、第三方外掛程式按需引入
9、無狀態的元件標記為函式式元件
10、子元件分割
11、變數本地化
12、ssr
const router =
newvuerouter(]
})
>
>
<
/keep- alive>
<
/div>
<
/template>
="cell"
>
<
!--這種情況用 v-show 復用 dom，比 v-
if 效果好--
>
"value"
class
="on"
>
"10000"
/>
<
/div>
"!value"
class
="off"
>
"10000"
/>
<
/section>
<
/div>
<
/template>
for=
"user in activeusers"
:key=
"user.id"
>
}<
/li>
<
/ul>
<
/template>
export
default)}
}}<
/script>如果列表是純粹的資料展示，不會有任何改變，就不需要做響應化
export default ),async created()
};如果是大資料長列表，可採用虛擬滾動，只渲染少部分區域的內容。
參考vue-virtual-scroller、vue-virtual-scroll-list
created() ,
beforedestroy()
參考專案：vue-lazyload
import vue from 'vue';
import from 'element-ui';
vue.use(button);
vue.use(select);
}
Vue中常見的效能優化
1.不要將所有的資料都放到data中，data中的資料都會增加getter和setter，又會收集watcher，這樣還佔記憶體。不需要響應式的資料我們可以定義在例項上。2.在v for繫結事件的時候可以使用事件 將事件繫結到外層元素上。3.使用keep alive快取元件，防止元件來回的建立和銷毀...
常見的效能優化
從資源請求數量 執行效率兩個角度來考慮 dom結構 樣式表放在頭部，防止白屏和閃屏 js指令碼放在底部或非同步獲取，防止阻塞資源載入 使用語義化標籤，優化精簡dom結構 減少dom操作頻率 減少重繪與回流 js指令碼 優化指令碼結構，移除重複的指令碼 模組就近載入 cmd 按需載入載入元件和路由 懶...
Vue效能優化
而正是這種做法引發了效能問題，要初始化乙個父元件，必然需要先初始化它的子元件，而子元件又有它自己的子元件。那麼要初始化根標籤，就需要從底層開始冒泡，將頁面所有元件都初始化完。所以我們的頁面會在所有元件都初始化完才開始顯示。這個結果顯然不是我們要的，更好的結果是頁面可以從上到下按順序流式渲染，這樣可能...