簡介
“熱重載”不只是當你修改文件的時候簡單重新加載頁面。啟用熱重載后族操,當你修改?.vue?文件時,該組件的所有實例將在不刷新頁面的情況下被替換。它甚至保持了應用程序和被替換組件的當前狀態(tài)顶岸!當你調(diào)整模版或者修改樣式時,這極大地提高了開發(fā)體驗叫编。
用法
當使用腳手架工具?vue-cli?時辖佣,熱重載是開箱即用的。
當手動設置你的工程時搓逾,熱重載會在你啟動?webpack-dev-server --hot?服務時自動開啟卷谈。
狀態(tài)保留規(guī)則
當編輯一個組件的?<template>?時,這個組件實例將就地重新渲染霞篡,并保留當前所有的私有狀態(tài)世蔗。能夠做到這一點是因為模板被編譯成了新的無副作用的渲染函數(shù)。
當編輯一個組件的?<script>?時朗兵,這個組件實例將就地銷毀并重新創(chuàng)建污淋。(應用中其它組件的狀態(tài)將會被保留) 是因為?<script>?可能包含帶有副作用的生命周期鉤子,所以將重新渲染替換為重新加載是必須的余掖,這樣做可以確保組件行為的一致性寸爆。這也意味著,如果你的組件帶有全局副作用盐欺,則整個頁面將會被重新加載而昨。
<style>?會通過?vue-style-loader?自行熱重載,所以它不會影響應用的狀態(tài)找田。
關閉熱重載
熱重載默認是開啟的歌憨,除非遇到以下情況:
webpack 的?target?的值是?node?(服務端渲染)
webpack 會壓縮代碼
process.env.NODE_ENV === 'production'
你可以設置?hotReload: false?選項來顯式地關閉熱重載:
module:{rules:[{test:/\.vue$/,loader:'vue-loader',options:{hotReload:false// 關閉熱重載}}]}