Vue.js中未使用navigator.onLine更新计算属性

Computed property not updated with navigator.onLine, in Vue.js

本文关键字：更新 计算 属性 onLine navigator js 未使用 Vue      更新时间：2023-09-26

我想使用Vue.js计算的属性来查看我的应用程序的在线状态。基本上，我有以下Vue设置：

new Vue({
    el: '#app',
    computed: {
        onLine: function (){
            return navigator.onLine;
        }
    }
})

以及以下标记：

<div id="app">
    <div>{{ onLine }}</div>
</div>

我预计当我将计算机与网络连接/断开连接时，"onLine"属性会在true和false之间变化。然而，这并没有发生。。。

我唯一能让它改变的方法是：

var app = new Vue({
    el: '#app',
    data: {
        onLine: navigator.onLine // initial status
    }
})
window.addEventListener('online',  function(){
    app.onLine = true;
});
window.addEventListener('offline',  function(){
    app.onLine = false;
});

关于Vue计算属性，一定有一些我不理解的地方。谁能告诉我为什么它没有像我预期的那样工作？

我也遇到了同样的问题，但我通过使用带来Vue.js的方法来侦听来解决它http://vuejs.org/guide/reactivity.html#Change-检测注意事项

var app = new Vue({
    el: '#app',
    data: {
      onLine: navigator.onLine // initial status
    }
  });
  function updateConnectionStatus() {
    app.$set('onLine', navigator.onLine); // this method
  }
  window.addEventListener('online', updateConnectionStatus);
  window.addEventListener('offline', updateConnectionStatus);

因此，如果内存服务观察到的对象必须是基元或纯对象，则不能直接观察到"本机"对象。并且库将忽略这样做的尝试。

相关文章：