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;
}
}
});输出：
你可以看到这两个例子都得到了相同的结果，但第二个例子，即"计算属性"的例子更好且更简洁。
