VueJs，计算 属性 和观看 属性 之间的区别？

Question

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

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"/>

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

观看属性:-

当我们想在其他数据的基础上更新数据时。我们将使用 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">

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