Vuejs教程-Vue.js 手表属性

Vuejs教程-Vue.js的Watcher或watch属性允许开发者监听组件的数据，并在特定属性发生变化时运行相应的函数。Watcher或watch属性是Vue.js的一个独特功能，它允许你观察组件状态的某个属性，并在该属性的值发生变化时运行函数。

让我们通过一个例子来了解和学习Vue.js中的Watch属性。请参考以下示例以理解Watcher或watch属性的概念。

Index.html文件：

<!DOCTYPE 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;
}

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

输出：

你可以看到输出中的文本框都有0的输入。如果你在"Kilometers"文本框中输入一些值，你会看到"Meters"文本框中的值发生变化，反之亦然。让我们在"Kilometers"文本框中输入50，并查看输出。

输出：

现在，输入一些值在"Meters"文本框中，并查看"Kilometers"文本框中的变化。让我们在"Meters"文本框中输入5，并查看输出。

输出：

示例解释

在上面的示例中，我们创建了两个文本框，一个用于表示"Kilometers"，另一个用于表示"Meters"。我们在data属性中初始化了这两个文本框的值为0。这里，我们创建了一个watch对象，并为它定义了两个函数：kilometers和meters。在这两个函数中，分别进行了从"Kilometers"到"Meters"的转换和从"Meters"到"Kilometers"的转换。

当你在任何一个文本框中输入值时，无论哪个文本框的值发生变化，Watch属性都会负责更新两个文本框的值。你无需分配任何事件或等待它改变，并做额外的验证工作。Watch属性会负责根据各自函数中的计算来更新文本框的值。

Vue.js计算属性与Watched属性的比较

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

如果你有一些数据需要基于其他数据进行更改，使用Watch属性是很容易且直观的，特别是如果你来自AngularJS的背景。但是，最好使用计算属性而不是命令式的watch回调。

让我们用一个例子来比较它们，分别使用Watch属性和计算属性来实现相同的功能。

Index.html文件：

<!DOCTYPE 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="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;
    }
  }
});

输出：

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

Index.html文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Computed Property</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;
    }
  }
});

输出：

你可以看到这两个例子都得到了相同的结果，但第二个例子，即"计算属性"的例子更好且更简洁。

Vuejs教程-Vue.js 手表属性

示例解释

Vue.js计算属性与Watched属性的比较

推荐文章

其它