虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
监听某个属性的变化：（监听data之下的直属属性以及data下面对象的属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
</head>
<body>
<div id="app">
<div>全名： {{name}}</div>
<div>年龄： {{person.age}}</div>
<button @click="changeName">改变</button>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: "名称",
person: {
age: 20
}
},
watch: {
// data下面的一级属性监听
name(newValue, oldValue){
// 第一个参数为改变后的值，第一个参数为改变前的值
console.log(newValue)
console.log(oldValue)
},
// 此种方式监听person整个对象的改变，任意一个属性改变都会执行此方法，比较消耗性能
// 建议监听单个属性的变化
person: {
handler(newValue, oldValue){
console.log("整个对象监听：" ,newValue)
console.log("整个对象监听：" ,oldValue)
},
deep: true
},
// 监听单个属性的变化
'person.age': {
handler(newValue, oldValue){
console.log("单个属性监听：" ,newValue)
console.log("单个属性监听：" ,oldValue)
}
}
},
methods: {
changeName(){
this.name = "改变后的名称"
this.person.age = 35
}
}
});
</script>
</html>