观察 Vue.js 计算属性在控制台中返回循环数据答案

【问题标题】：Watching a Vue.js computed property returns looping data in the console观察 Vue.js 计算属性在控制台中返回循环数据
【发布时间】：2018-09-09 01:23:09
【问题描述】：

当我查看下面的距离计算属性时，返回的数据是恒定的，而不仅仅是在数据更改时。

这是因为我正在设置然后观看，还是有错误？当用户更改计算属性时，我想观察并重新格式化一些输出数据。

computed: {
      distance: {
        get: function() {
          let location = parseFloat(this.radius_search.lat) + ', ' + parseFloat(this.radius_search.lng);
          return this.search_store.queryParameters = { aroundLatLng: location, aroundRadius: this.radiusToMetres };
        },
        set(value) {
          return this.search_store.queryParameters = this.distance;
        },

      },

      radiusToMetres(){
        return this.radius * 1600;
      },

   },
        watch: {
          distance: function(value) {
                console.log(value);
          },

      },

下面是控制台输出的屏幕截图。

【问题讨论】：

这是因为您正在设置和重置循环中的数据，我认为这是 getter/setter 的工作方式，并且观察者检测到它并向您显示列表

标签： javascript vue.js vuejs2 algolia computed-properties

【解决方案1】：

您在 getter 中分配一个值，这是一种不好的做法。吸气剂应该没有副作用。

特别是，您正在创建一个新对象并将其分配给返回值，这会导致循环：distance 每次查看时都会获得一个新值，并且每次获得一个新值时，它依赖项（如您的观察者）正在查看它。

【讨论】：