傳統的頁面開發中需要手動刷新才能看到修改后的效果，而使用Vue框架可以在代碼修改后實時刷新頁面，大大提高開發效率。其中點擊按鈕實現實時刷新是常見的實現方式之一。

// 點擊按鈕刷新當前組件

以上代碼中，template中的標簽綁定了@click事件，當按鈕被點擊后會觸發refresh方法，該方法使用window.location.reload()重新刷新頁面。

然而在實際開發中，只刷新當前組件的做法并不可取。因為當前組件中的數據只是部分變化，可能會引起其他組件的變化，而這些變化是通過Vue的響應式系統自行更新的。如果只刷新當前組件，那么其他組件的數據就無法更新，應用也就不再是完整的。

為了實現全局實時刷新，需要在Vue的配置文件中引入vue-loader或者vue-style-loader，并設置hotReload參數為true。這樣當代碼修改后會自動將修改應用到頁面中。

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')
const { VueLoaderPlugin } = require('vue-style-loader')
module.exports = {
// ...省略其他配置
plugins: [
new VueLoaderPlugin(),
new VueStyleLoader()
],
devServer: {
hot: true
}
}

以上代碼中，plugins配置中分別引入了VueLoaderPlugin和VueStyleLoader，這兩個插件分別用于處理.vue文件和樣式文件。devServer配置中設置hot參數為true，啟用熱更新。

在應用中使用熱更新需要注意以下幾點：

• 只有在開發環境下生效，在生產環境中需要手動刷新頁面
• 樣式文件必須使用import導入，而非link引用
• 通過window.location.reload()刷新頁面會斷開websocket連接，因此不能使用該方法刷新頁面
• 修改Vue組件的data屬性并不會觸發更新，需要使用Vue.set或者Vue.$set方法更新數據