Vue.js Watch 属性

Vue.js 的 Watcher 或 Watch property 允许开发者监听组件数据，并在某个特定属性发生变化时运行代码。Watcher 或 Watch property 是 Vue.js 的一项特殊功能，它允许您监视组件状态的一个属性并在该属性值更改时运行函数。

接下来我们来看一个例子，学习 Vue.js 中 Watch property 的使用。请看以下示例以了解 Watcher 或 Watch property 的概念。

Index.html 文件：

<html>
   <head>
      <title>Vue.js Watch Property</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id = "wat_pro">
         Kilometers : <input type = "text" v-model = "kilometers"><br/>
         Meters : <input type = "text" v-model = "meters">
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件：

var vm = new Vue({
            el: '#wat_pro',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = val * 1000;
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         })

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

Index.css 文件：

html, body {
    margin: 5px;
    padding: 0;
}

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

Output:

Vue.js Watch 属性

您可以看到输出文本框中有一个记录为 0 的值。如果您在公里数文本框中输入一些值，您可以在米文本框中看到更改，反之亦然。让我们在公里数文本框中输入 50 并查看结果。

输出：

Vue.js Watch 属性

现在，输入一些值到米文本框中，并观察公里数文本框中的更改。让我们在米文本框中输入 5 并在输出中查看结果。

输出：

Vue.js Watch 属性

例子解释

在上面的例子中，我们创建了两个文本框，一个是公里数，另一个是米数。我们在数据属性中把这两个文本框的初始值都设为 0。在这里，我们创建了一个 Watch 对象，其中包含两个函数：公里数和米数。在这两个函数中，进行了公里数和米数之间的转换。

当您在任何一个文本框中输入值时，Watch property 负责更新两个文本框的值。您无需指定任何事件或等待值改变并验证。Watch property 负责根据相应函数中的计算更新文本框的值。## Vue.js 计算属性 vs. 监听属性

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

如果你有一些需要根据其他数据进行更改的数据，尤其是如果你来自 AngularJS 的背景，那么使用监听属性很容易和直观。但是，最好使用计算属性而不是命令式的监听回调函数。

让我们举个例子，看看用监听属性和计算属性两种方式的不同。

Index.html 文件:

<html>
   <head>
      <title>Vue.js 监听属性</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="eg_1">{{ fullName }}</div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件:

var vm = new Vue({
  el: '#eg_1',
  data: {
    firstName: 'Alex',
    lastName: 'Panda',
    fullName: 'Alex Panda'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

输出:

Vue.js Watch 属性

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

Index.html 文件:

<html>
   <head>
      <title>Vue.js 计算属性</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="eg_2">{{ fullName }}</div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件:

var vm = new Vue({
  el: '#eg_2',
  data: {
    firstName: 'Alex',
    lastName: 'Panda'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

输出:

Vue.js Watch 属性