侦听器
Vue中提供了watch属性，用来侦听 data 或 computed 中数据的变化。一旦侦听到数据发生了变化，就会执行对应的侦听方法。
示例：
<!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>侦听引用数据类型
<!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>数据首次渲染时的侦听
默认情况下，watch只有在数据发生改变时才会被侦听，但是，某些情况下，我们需要数据首次渲染时，也能够触发侦听函数。
<!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>