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

Question

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

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

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);
          },

      },

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

Answer 1

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

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