参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-14监听器
侦听器可以监听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>