vuejs - 當我保存文件時，npm run dev webserver 自動刷新工作，但刷新瀏覽器沒有

Question

我對 VueJS 很陌生，但很喜歡這種可能性。 我從我的一個更簡單的項目（單頁 php/jquery 應用程序）開始，並一直致力於將其轉換為 VueJS/Webpack。 它基本上是一個表格，將 json 數據抓取到一個數組中並填充一個表格並具有過濾器控件。 過濾的下拉控件由 json 字段中的唯一值填充。 這就是我目前正在處理的工作（已經讓 json 調用和表格工作，以及單擊表格行時出現的模式）。

我注意到奇怪的是，如果我正在工作並將我的工作保存在我的 IDE（vscode）中並且本地網絡服務器刷新我的頁面，我會看到我的代碼中預期會發生什么。 但是，如果我再次在瀏覽器中單擊 REFRESH，則不會按預期工作。 一個很好的例子是在我的一個組件中，我正在構建一個數組以在我的下拉控件中使用。 我正在輸出用於使用console.log()填充下拉列表的數組，以確保它按我希望的那樣工作，當我將文件保存在 vscode 中時，它會在瀏覽器中正確輸出數據。 如果我立即在瀏覽器中刷新我的頁面，它不會像剛才那樣輸出數組，而是我看到[__ob__: Observer]的length:0 ，由於 console.log()，我的數組以前是輸出的。 它也沒有填充我的下拉列表。這是預期的行為嗎？

將 npm 與 webpack 和（有史以來第一次）內置的 web 服務器和編譯器一起使用。 我正在使用單頁方法App.vue ，並且該App.vue中有 3 個組件。 我正在使用 json 數據（在我的mounted()掛鈎上）填充一個名為fans的數組，並將其作為道具傳遞給每個組件。 這是我的App.vue ：

<template>
  <div>
      <fan-modals v-bind:fans="fans"></fan-modals>

      <div class="container">
          <filter-controls v-bind:fans="fans"></filter-controls>
          <fans v-bind:fans="fans"></fans>
      </div>  <!-- end #container -->
  </div>
</template>

<script>
  import FilterControls from './components/FilterControls.vue';
  import Fans from './components/Fans.vue';
  import FanModals from './components/FanModals.vue';

  export default {
    name: 'app',
    data: function() {
      return {
        fansUrl: 'example.com',
        fans: []
      }
    },
    components: {
      filterControls: FilterControls,
      fans: Fans,
      fanModals: FanModals
    },
    methods: {
    },
    mounted() {
        var self = this;
        $.getJSON(self.fansUrl, function(data){
            self.fans = data;
        });
    }
}
</script>

給我輸出問題的組件是我的FilterControls組件，見此處（為簡潔起見，我省略了所有其他控件）：

<template>

        <div class="row">
            <div class="col-xs-6 col-sm-6 control-wrap">
                <select id='selectVoltage' class='form-control' v-model="voltageArray">
                <option>Voltage</option>
                <option v-for="(voltage, index) in voltageArray" :key="index" v-bind:value="voltage">
                    {{ voltage }}
                </option>
                </select>
            </div>
            <div class="col-xs-6 col-sm-6 control-wrap">
                <select id='selectMaxRPM' class="form-control">
                <option>Max RPM</option>
                </select>
            </div>
        </div>
        </template>

<script>
    export default {
        data: function() {
            return {
                voltageArray: [],
            }
        },
        props: {
            fans: {
                type: Array,
                required: false
            }
        },
        methods: {
            populateControls() {
                var vi = this;
                console.log("populateControls() called ");
                if (vi.fans) {
                    console.log("there are fans ");

                    var voltage = [];

                    $.each(vi.fans, function(index, value) {
                        voltage.push(vi.fans[index].voltage);

                    });

                    vi.voltageArray = $.unique(voltage);

                    console.log(vi.voltageArray);
                }

            }
        },
        mounted() {
            this.populateControls();
        }
    }
</script>

我將用於填充表格的相同數組作為組件傳遞給組件。

當我保存我的工作並在瀏覽器中自動刷新時，它可以工作。 當我在瀏覽器中刷新頁面時，它不會。 我很困惑。

Answer 1

這是一個競爭條件。 <filter-controls>的安裝時間和來自$.getJSON的異步網絡響應會有所不同。 如果您看到預期的輸出，則可能是在<filter-controls>掛載之前收到網絡響應。 網絡響應可能因各種原因而延遲，包括網絡連接不良。

我相信您的情況是在<filter-controls>掛載和記錄fans （基於網絡響應）之后收到網絡響應。 稍后您進行編輯， webpack-dev-server熱重新加載，瀏覽器在<filter-controls>掛載之前獲取緩存的網絡響應（無網絡請求）。

錯誤演示

您還可以通過在 Chrome 的 DevTools 中禁用緩存來在沙箱中向自己證明這一點。

最好刪除在安裝組件時可以使用道具數據的假設。 相反，使用觀察者對道具變化做出反應：

export default {
  mounted() {
    // this.populateControls(); // DON'T DO THIS
  }
  watch: {
    fans(value) { // <-- called whenever fans prop changes
      this.populateControls(value);
    }
  },
  methods: {
    populateControls(fans) {
      console.log('new fans', fans);
    }
  }
}

另請注意， <select>的v-model應保存所選電壓的值，而不是用於填充<option>的voltageArray 。 您應該專門為所選電壓添加一個data變量：

<!-- <select v-model="voltageArray">  // DON'T DO THIS -->
<select v-model="selectedVoltage">

修復演示