在 vuejs 中查看计算属性答案

【问题标题】：watch computed properties in vuejs在 vuejs 中查看计算属性
【发布时间】：2021-05-16 10:46:38
【问题描述】：

我正在尝试查看我的计算属性 isEllipsisActive() 以查看该值是真还是假，然后我想将 shouldShowArrow 设置为该值。

当用户根据条件this.wrap.scrollHeight < this.h1.scrollHeight;调整浏览器大小时，该值将发生变化，

目前它可以工作，但只有当我刷新浏览器时，我才需要在值更改时更新它。如何查看isEllipsisActive()的值是否发生变化？

export default {
  data() {
    return { 
      h1: null,
      wrap: null,
      shouldShowArrow: false,
    };
  },
    isEllipsisActive() {
      if (!this.wrap && !this.h1) {
        console.log("Not initialized", 'not initalized');
        return false;
      }
      return this.wrap.scrollHeight < this.h1.scrollHeight;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.h1 = this.$refs.h1;
      this.wrap = this.$refs.wrap;
    });
  },
  watch: {
    isEllipsisActive(newValue) {
      this.h1 !== null && console.log('changed')
    },
  },
};

【问题讨论】：

计算本身是动态的，你不需要使用手表来监控它的执行
你可以将shouldShowArrow作为一个计算属性，依赖于isEllipsisActive的值，你不需要手动观看。
其动态性背后的基本概念是如果计算属性中使用的变量的值发生变化，那么它将动态重新运行
所以如果 this.h1 或 this.wrap 发生变化，那么我就是你的情况，那么计算的属性将自动重新运行..毫无疑问

标签： vue.js vuejs2

【解决方案1】：

你可以试试这个方法，看看是否会为你触发手表

watch: {
  isEllipsisActive: {
     deep: true
     handler(now){
        this.h1 !== null && console.log('changed')
     }
}

由于您的计算值与您尝试观察执行的更改位于同一组件中，因此您不需要这样做。或者您可以观察其中一个值并在观察者中执行您需要的所有逻辑。但正如@Dan 在另一条评论中所说，有时我们需要观察那些计算值。当我想在 Vuex 触发器的计算 getter 更改后执行额外代码时，我会使用此逻辑。

【讨论】：

【解决方案2】：

您不能“观察”计算值，因为计算值已经是动态的。

如果您想对计算值执行一些基本逻辑，那么只需使用它来执行此操作：

<h1 v-if="isEllipsisActive">{{ title }}</h1>

您无需为了设置另一个布尔值而“观察”您的计算值。

【讨论】：

您可以，而且通常有充分的理由这样做。在这里，可能不是
@Dan 诸如...的原因？
最常见的原因可能是触发异步请求。但最终，出于任何原因，您可能会查看数据属性，而您可能会查看计算属性
@Dan 原因是有效的，例如，如果您使用 Vuex getter，有时您需要在 getter 触发时做一些额外的事情。就像这个 getter getUsers 返回所有用户，但同时在您的组件中，您想触发 async FindMoviesByUsers。因此，当您的 getter 更改或触发更改并且您的手表启动 async FindMoviesByUsers 时，您会观察，就像这样。
这不起作用它不是反应性的，除非它被重新渲染