Vue熱更新失效的問題探究

一、Vue熱更新

Vue的熱更新非常方便，在開發過程中，只需要修改代碼，頁面就會自動重新載入。這種機制大大提高了開發效率。但是在某些情況下，熱更新可能會失效。

二、Vue項目熱更新失效

在一些情況下，Vue項目的熱更新會失效。

一個常見的原因是在組件的mounted生命周期中使用了ajax請求，導致mounted在刷新時被執行，那麼頁面就不會再次刷新。為了解決這個問題，我們可以將ajax請求放到created或者beforeCreate鉤子函數裡面。

created() {
    axios.get(url).then(res => {
        this.data = res.data;
    });
}

三、Vue跨域代理失效

在開發中，我們經常會遇到需要訪問跨域數據的情況。Vue提供了proxyTable配置項來解決這個問題。但是在某些情況下，跨域代理也會失效。

需要注意的是，Vue的proxyTable只在使用npm run dev命令運行應用時生效。如果使用webpack打包應用，則需要使用跨域插件來解決跨域問題。

const path = require('path');
const express = require('express');
const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.listen(3000, () => console.log('Server running on port 3000')); 

四、Vue打包後路由失效

在Vue項目中，如果使用了vue-router，打包之後可能會出現路由失效的問題。這時候需要在router.js中進行配置。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ],
  mode: 'history' // 配置mode為history
})

五、Vue打包後代理失效

在使用webpack打包Vue應用後，配置的代理可能會失效。解決方法是在webpack.prod.conf.js中添加devServer選項。

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8888', // 目標地址
        secure: false
      }
    }
  }
})

六、Vue樣式穿透失效

在Vue中，可以使用來限定樣式的作用域。但是當使用了穿透符號（>>>）時，可能會導致樣式失效。

此時需要使用/deep/或者::v-deep來代替穿透符號。

/* 使用/deep/ */

  .my-style /deep/ p {
    color: red;
  }


/* 使用::v-deep */

  .my-style::v-deep p {
    color: red;
  }

七、Vue雙向數據綁定失效

在Vue中，雙向數據綁定使得數據的修改和視圖的更新能夠相互綁定。但是在使用v-model時，數據綁定可能會失效。

原因是在一些情況下，v-model的value值被修改後，視圖並沒有立即更新。這時候我們可以手動觸發視圖更新。

<input type="text" v-model="message" />

watch: {
  message: function (newVal, oldVal) {
    if (newVal !== oldVal) {
      this.$nextTick(function () {
        this.$forceUpdate();
      });
    }
  }
},

八、Vue的click方法失效

在Vue中，如果使用@click或者v-on:click綁定事件，可能會出現方法失效的問題。

這時候需要檢查頁面中是否存在多個vue實例，如果存在，則需要在綁定事件時指明對應的vue實例。

<div id="app-1">
  <!-- ... -->
</div>
<div id="app-2">
  <!-- ... -->
</div>

/* 沒有指明vue實例 */
<button @click="myClick">點擊</button>

/* 指明vue實例 */
<button @click="myClick(app1)">點擊</button>

var app1 = new Vue({
  el: '#app-1',
  methods: {
    myClick () {
      console.log('clicked app1');
    }
  }
});

var app2 = new Vue({
  el: '#app-2',
  methods: {
    myClick () {
      console.log('clicked app2');
    }
  }
});