vuejs - npm run dev webserver 自动刷新在我保存文件时有效，但刷新浏览器不起作用

Question

我对 VueJS 很陌生，但喜欢这些可能性。我从一个比较简单的项目(单页php/jquery应用程序(开始，并一直致力于将其转换为VueJS/Webpack。它基本上是一个将 json 数据抓取到数组中并填充表并具有筛选器控件的表。 筛选的下拉控件由 json 字段中的唯一值填充。 这就是我目前正在研究的内容(已经让 json 调用和表工作，以及单击表行时出现的模态(。

我注意到奇怪的是，如果我正在工作并将我的工作保存在我的 IDE (vscode( 中并且本地网络服务器刷新我的页面，我会看到我的代码中预期会发生什么。 但是，如果我再次在浏览器中单击"刷新"，则不会按预期工作。 一个很好的例子是在我的一个组件中，我正在构建一个数组以在下拉控件中使用。 我正在输出我用来使用console.log()填充我的下拉列表的数组，以确保它按我希望的那样工作，当我将文件保存在 vscode 中时，它会在浏览器中正确输出数据。 如果我立即在浏览器中刷新我的页面，它不会像刚才那样输出数组，而是看到一个带有length:0[__ob__: Observer]，我的数组之前由于控制台.log((而输出。 它也没有填充我的下拉菜单。 这是预期行为吗？

将 npm 与 webpack 一起使用，并且(有史以来第一次(内置的 Web 服务器和编译器。 我使用的是单页方法，App.vue，并且该App.vue中有 3 个组件。 我正在使用 json 数据(在我的mounted()钩子上(填充一个名为fans的数组，并将其作为 prop 传递给每个组件。 这是我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中禁用缓存来在沙盒中向自己证明这一点。

最好删除在挂载组件时 prop 数据可用的假设。相反，使用观察器对道具更改做出反应：

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">

修复演示