1. What is a watch?
watch: used to monitor whether the data in the data has been modified. Once modified, you can perform some other operations [also a method]
2. Analyze watch
When the watch is monitoring, it can have two parameters. The first parameter is the updated data, and the second parameter is the old data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{
{text}}</h1>
<button @click="text = '我是新的一'">监听</button>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
text: '我是旧一',
},
watch: {
//监听器的作用就是用来监听数据是否发生了变化，变化后可以进行一些其他操作
//只要没有发生变化，就没有办法进行其他的操作
text: function (newData, oldData) {
//newData是更新后的数据
//oldData是旧数据
console.log(newData, oldData)
this.text = '我是最新的一'
}
}
})
</script>3. The difference between watch and calculated properties
The difference between calculated properties and listening properties
1. The get of calculated properties must have a return, while the return of monitoring properties is optional
2. Computed properties have the effect of caching, while monitoring properties do not have cache
3. Calculated properties can have customized names, while monitoring properties Attributes can only be monitored and have the same name in data
4. Computed attributes are suitable for complex operations, while monitoring attributes are suitable for some consumptive functions, such as Ajax
4. Advanced watch
When using watch to monitor , we may find that it can monitor a certain data [single data, array], but when monitoring the object, the data has been modified, but there is no monitoring prompt.
At this time, we need to enable in-depth monitoring, because when we do not enable in-depth monitoring, the watch will only monitor the first layer, and the object's data has been modified, but the first address of the object has not been modified, so the watch determines that no data has occurred. changes, thus not being able to monitor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{
{text}}</h1>
<button @click="setHandel">监听</button>
<h1>{
{array}}</h1>
<button @click="setArray">更改数组的值</button>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
text:{
name:'我的一',
age:21
},
array: [1,2,3,4,5]
},
methods:{
setHandel(){
this.text.name = '我是新的一'
},
setArray(){
/**
* 当我们想要更改数组中的值的时候，
* this.array[0] = '我是新一',是没有办法修改的
* 因为vue的数据双向绑定中，调用的是set和get函数，
* 但是在数组里面没有这二个函数
* 所以我们只能使用vue封装的$set和变异方法（也就是push啊。。。）
*/
this.$set(this.array,0,'我是新一')
}
},
watch: {
//watch监听器，只能监听第一次，
//也就是在监听对象的时候，虽然对象中的属性值发生了改变
//但对象的首地址没有改变，所以监听器认为没有改变数据
//当想要监听对象的时候，想要开启深度监听
//deep:true
text: {
handler:function () {
alert('监听到了')
},
deep:true
}
}
})
</script>