VueJs，计算属性和监视属性之间的区别？ [复制]

Question

刚开始学习vuejs，但不太明白Computed和Watch-Property是什么。什么？有什么好处？在哪里使用？

Answer 1

让我试着用一种简单的方式来解释它。

计算属性：-

如果您来自 C# 或 Java 背景 计算属性 是具有 getter 和 setter 的属性，例如在 C# 或 Java 中我们声明

public int Month
{
    get
    {
        return month;
    }
    set
    {
        if ((value > 0) && (value < 13))
        {
            month = value;
        }
    }
}

现在让它映射到 Vue js 会是这样的

computed: {
    month: {
        // getter
        get: function () {
          return this.month
        },
        // setter
        set: function (value) {
          if ((value > 0) && (value < 13))
            {
                month = value;
            }
        }
      }
}

默认计算属性只有 getter。我们也可以像上面的例子一样定义 setter。当绑定此计算机属性的元素中的值更新时，Setter 将调用，例如<input v-model="month"/>

简单来说，如果您想要一个具有 2 路绑定的属性，您可以使用计算机属性。

观看属性：-

当我们想在其他数据的基础上更新数据时。我们将使用 Watch 属性。 切记不建议过度使用watch属性。现在来看例子

watch : {
    kilometers:function(val) {
        this.kilometers = val;
        this.meters = val * 1000;
    },
    meters : function (val) {
        this.kilometers = val/ 1000;
        this.meters = val;
    }
}

现在让我们有 2 个文本框，我们的这 2 个监视属性与文本框绑定，例如

<input type = "text" v-model = "kilometers">
<input type = "text" v-model = "meters">

现在，如果我们更改或在任何文本框中输入值，则其他文本框中的值会根据监视属性内部的逻辑自动更新。