Vue.js Watch 属性

Vue.js 观察器或观察属性允许开发人员监听组件数据，并在特定属性发生更改时运行。观察器或观察属性是 Vue.js 的一个独特特性，它允许你监视组件状态的一个属性，并在该属性值发生更改时运行一个函数。

让我们用一个例子来查看和学习 VueJS 中的观察属性。查看以下示例以了解观察器或观察属性的概念。

Index.html 文件

Index.js 文件

让我们使用一个简单的 CSS 文件来使输出更具吸引力。

Index.css 文件

程序执行后，您将看到以下输出

输出

你可以看到输出在其文本框中具有 0 条目。如果在千米文本框中输入一些值，你可以看到米文本框中的变化，反之亦然。让我们在千米文本框中输入 50，看看结果。

输出

现在，在米文本框中输入一些值，看看千米文本框中的变化。 让我们在米文本框中输入 5，看看输出结果。

输出

示例说明

在上面的例子中，我们创建了两个文本框，一个用于千米，另一个用于米。 我们在数据属性中将千米和米都初始化为 0。在这里，我们创建了一个包含两个函数千米和米的 watch 对象。在这两个函数中，完成了从千米到米和从米到千米的转换。

当你在任何一个文本框中输入值时，无论哪个被改变，Watch 属性都会负责更新两个文本框。 你不必分配任何事件或等待它改变，然后做额外的验证工作。 观察属性负责更新文本框，并进行各自函数中完成的计算。

Vue.js 计算属性与观察属性

如果你将 Vue.js 计算属性与 Vue.js 观察属性进行比较，那么 Vue.js 观察属性提供了一种更通用的方法来观察和响应数据更改。

如果你有一些需要基于其他数据进行更改的数据，那么使用观察属性是简单而直接的，特别是如果你来自 AngularJS 背景。 但是，最好使用计算属性，而不是命令式的观察回调。

让我们举个例子，看看并比较一下观察属性和计算属性。

Index.html 文件

Index.js 文件

输出

你可以看到上面的代码是命令式的和重复的。 现在，让我们将它与一个计算属性示例进行比较

Index.html 文件

Index.js 文件

输出

你可以看到这两个例子都给出了相同的结果，但是第二个例子“计算属性”例子更好更简洁。