侦听器可以监听data对象属性或者计算属性的变化。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>监听器</title> </head> <body> <div id="app"> <p>{{person.age}}岁的{{person.name}}正在看{{book}}，虽然他已经看了{{countValue}}遍。</p> </div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: "#app", data: { countValue: 0, person: { name: "曹操", age: 18 }, book: "《茶馆》" }, created() { this.countValue = 3; this.person.name = "刘备"; this.person.age = 20; this.book = "《骆驼祥子》" }, watch: { countValue() { console.log("count发生改变了"); }, // 监听data对象中某个对象的属性 'person.name'() { console.log("name发生了改变") }, // 获取修改前的值 当监听的属性发生变化时，侦听器会被传入两个参数 book(newVal, oldVal) { console.log("修改前的值：" + oldVal + "=====修改后的值：" + newVal); }, } }) </script> </body> </html>
注意：如果从其他框架切换到Vue，那么你可能一直好奇如何监听数据的变化，而且一直期待着这个功能。但是，要小心。在Vue中，通常有比侦听器更好的方式来处理问题——通常会使用计算属性。例如，和设置数据然后监听它的变化相比，使用一个带有setter的计算属性会是更好的方式。
参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础--计算属性
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>监听器</title>
</head>
<body>
<divid="app">
<p>{{person.age}}岁的{{person.name}}正在看{{book}}，虽然他已经看了{{countValue}}遍。</p>
</div>
<scriptsrc="https://unpkg.com/vue"></script>
<script>
newVue({
el:"#app",
data: {
countValue:0,
person: {
name:"曹操",
age:18
},
book:"《茶馆》"
},
created() {
this.countValue = 3;
this.person.name = "刘备";
this.person.age = 20;
this.book = "《骆驼祥子》"
},
watch: {
countValue() {
console.log("count发生改变了");
},
// 监听data对象中某个对象的属性
'person.name'() {
console.log("name发生了改变")
},
// 获取修改前的值 当监听的属性发生变化时，侦听器会被传入两个参数
book(newVal, oldVal) {
console.log("修改前的值：" + oldVal + "=====修改后的值：" + newVal);
},
}
})
</script>
</body>
</html>