Question

我刚刚开始学习vuejs，但是我不太了解 Computing 和 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 Property。 记住，不建议过度使用watch属性。现在来看示例

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

现在让我们有2个文本框，并将这2个watch属性与文本框绑定，例如

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

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

VueJ，计算属性和监视属性之间的区别？

1 个答案: