关于 watch
1，当数据改变时，直接触发对应操作；
2，可以监听的数据有三部分，即props，data，computed；
3，所触发的对应操作函数中包含两个参数，第一个参数是新值newValue，第二个参数是旧值oldValue；
4，不支持缓存，但支持异步，在数据变化时执行异步或开销较大的操作时使用；
5，一对多，即一个数据改变时，可以通过触发对应操作改变多个其他的数据。
关于 computed
1，computed 依赖于 data 中的数据，只有在它的相关依赖数据发生改变时才会重新求值；
2，用于处理复杂的逻辑运算；
3，支持缓存，但不支持异步；
4，多对一或一对一，即一个属性是由其他属性计算而来的，这个属性可能是依赖其他一个或多个属性。
示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div>watchMsg = {{ watchMsg }}</div>
<div>computedMsg = {{ computedMsg }}</div>
<div>msg = {{ msg }}</div>
<div>watchAsync = {{ watchAsync }}</div>
<button @click="msg = 1">msg = 1</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
msg: '0',
watchMsg: '',
watchAsync: ''
}
},
computed: {
computedMsg() {
return this.msg;
}
},
watch: {
msg(value) {
this.watchMsg = value;
// 模拟一个异步
setTimeout(() => {
this.watchAsync = value;
}, 1000)
}
}
})
</script>
</body>
</html>
|
在浏览器中运行上面的代码，当页面加载时，computed会先执行一次，显示结果如下：
1
2
3
4
| watchMsg =
computedMsg = 0
msg = 0
watchAsync =
|
为什么watch没有触发监听呢？因为在Vue实例时，msg的值一直都为0，不存在数据变化，自然无法触发watch，watchMsg也不会发生变化。当点击按钮时，显示如下：
1
2
3
4
| watchMsg = 1
computedMsg = 1
msg = 1
watchAsync = 1
|
可以看到，watchAsync = 1是过了一秒后才显示出来的，说明watch支持异步。