簡(jiǎn)介

“熱重載”不只是當(dāng)你修改文件的時(shí)候簡(jiǎn)單重新加載頁(yè)面。啟用熱重載后，當(dāng)你修改?.vue?文件時(shí)，該組件的所有實(shí)例將在不刷新頁(yè)面的情況下被替換。它甚至保持了應(yīng)用程序和被替換組件的當(dāng)前狀態(tài)！當(dāng)你調(diào)整模版或者修改樣式時(shí)，這極大地提高了開(kāi)發(fā)體驗(yàn)。

用法

當(dāng)使用腳手架工具?vue-cli?時(shí)，熱重載是開(kāi)箱即用的。

當(dāng)手動(dòng)設(shè)置你的工程時(shí)，熱重載會(huì)在你啟動(dòng)?webpack-dev-server --hot?服務(wù)時(shí)自動(dòng)開(kāi)啟。

狀態(tài)保留規(guī)則

當(dāng)編輯一個(gè)組件的?<template>?時(shí)，這個(gè)組件實(shí)例將就地重新渲染，并保留當(dāng)前所有的私有狀態(tài)。能夠做到這一點(diǎn)是因?yàn)槟０灞痪幾g成了新的無(wú)副作用的渲染函數(shù)。

當(dāng)編輯一個(gè)組件的?<script>?時(shí)，這個(gè)組件實(shí)例將就地銷(xiāo)毀并重新創(chuàng)建。(應(yīng)用中其它組件的狀態(tài)將會(huì)被保留) 是因?yàn)?<script>?可能包含帶有副作用的生命周期鉤子，所以將重新渲染替換為重新加載是必須的，這樣做可以確保組件行為的一致性。這也意味著，如果你的組件帶有全局副作用，則整個(gè)頁(yè)面將會(huì)被重新加載。

<style>?會(huì)通過(guò)?vue-style-loader?自行熱重載，所以它不會(huì)影響應(yīng)用的狀態(tài)。

關(guān)閉熱重載

熱重載默認(rèn)是開(kāi)啟的，除非遇到以下情況：

webpack 的?target?的值是?node?(服務(wù)端渲染)

webpack 會(huì)壓縮代碼

process.env.NODE_ENV === 'production'

你可以設(shè)置?hotReload: false?選項(xiàng)來(lái)顯式地關(guān)閉熱重載：

module:{rules:[{test:/\.vue$/,loader:'vue-loader',options:{hotReload:false// 關(guān)閉熱重載}}]}