vuejs-npm run dev webserver auto refresh在保存文件时起作用,但刷新浏览器时不起作用

我注意到很奇怪的是,如果我正在工作,并且我将我的工作保存在IDE(vscode)中,并且localwebserver刷新我的页面,我就会看到我的代码中预期会发生什么。但是,如果再次单击浏览器中的“刷新”,则没有任何效果。一个很好的例子是在我的一个组件中,我正在构建一个数组用于我的下拉控件。我正在输出用于填充下拉列表的数组 console.log() 为了确保它能像我希望的那样工作,当我把文件保存在vscode中时,它会在浏览器中正确地输出数据。如果我立即在浏览器中刷新我的页面,它不会像刚才那样输出数组,而是看到 [__ob__: Observer] 用一个 length:0 由于控制台.log(). 它也不会填充我的下拉列表。。这是预期的行为吗?

App.vue ,其中有3个分量 应用程序.vue . 我正在填充一个名为 fans 使用json数据(在我的 mounted() 应用程序.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>

我将用于填充表的数组作为道具传递给组件。

当我保存我的工作,并在浏览器中自动刷新它的工作。当我在浏览器中刷新页面时,它不会。我很困惑。