listener
The watch attribute is provided in Vue to listen to data changes in data or computed. Once it detects that the data has changed, it will execute the corresponding listening method.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侦听器</title>
</head>
<body>
<div id="app">
<button @click="currentPage++">下一页</button>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data() {
return {
currentPage:1,
}
},
// 侦听器（侦听属性）
watch:{
currentPage(newValue,oldValue){
//当currentPage发生改变，该函数会被调用
console.log(newValue,oldValue);
}
}
})
</script>
</html>listen reference data type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侦听器</title>
</head>
<body>
<div id="app">
<button @click="pageData.currentPage++">下一页</button>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data() {
return {
currentPage:1,
pageData:{
currentPage:1,
pageSize:5
}
}
},
// 侦听器（侦听属性）
watch:{
// 1. 侦听器侦听引用数据的某一个类型
'pageData.currentPage':function(newValue,oldValue){
//当currentPage发生变化时，该函数会被调用
console.log(newValue,oldValue);
}
// 2.侦听引用数据类型整体
pageData:{
handler:function(newValue,oldValue){
//当pageData中的任意属性发生变化时，该函数会被调用
console.log(newValue,oldValue);
},
// 深度侦听
deep:true
}
}
})
</script>
</html>Listen when data is first rendered
By default, the watch will only be listened to when the data changes, however, in some cases, we can also trigger the listening function when the data is rendered for the first time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侦听器</title>
</head>
<body>
<div id="app">
<button @click="pageData.currentPage++">下一页</button>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data() {
return {
currentPage:1,
pageData:{
currentPage:1,
pageSize:5
}
}
},
// 侦听器（侦听属性）
watch:{
pageData:{
handler:function(newValue,oldValue){
console.log(newValue,oldValue);
},
//立即执行侦听
immediate:true
}
}
})
</script>
</html>