watch 监听器：
watch 用于监听单一属性（可以是多个单一属性）。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span>{{ msg }}</span>
<br>
<button @click="msg = 'NEO'">修改</button>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data(){
return {
msg:"neo"
}
},
// watch 监听器对应的是一个 对象；watch 可以监听多个单个的属性（如： msg）
watch: {
msg: function(vals){ // msg 就是 Vue data 中的 msg， 其对应的是一个 函数，函数有一个参数
console.log(vals) // NEO
// 写自己的监听逻辑
if (vals == "NEO"){
this.msg = "大NEO"
}
}
}
})
</script>
</html>
watch 官方文档：
https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8
计算属性：
计算属性可用于监听多个属性
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 直接调用 计算属性中的 key -->
<p>{{ myMsg }}</p>
<button @click="clickHander">修改</button>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data(){
return {
msg: "neo",
age: 30
}
},
methods: {
clickHander(){
// 此时 this 指向的是 当前对象，即 Vue 对象
this.msg = "大大NEO",
this.age = 18
}
},
// computed 计算属性， 对应的是一个对象； 计算属性默认只有 getter 方法
computed:{
myMsg: function(){ // 计算属性能够监听多个属性，如下，监听了 msg 和 age
console.log(this) // 此时 this 指向的是 当前对象，即 Vue 对象
// 写自己的业务逻辑
return `我的名字是“${this.msg}”，年龄是“${this.age}”`
}
}
// 定时器 和 ajax 等（你用别人的函数 ）中要用 箭头函数， setInterval(function(){}, sec) 这是一个闭包，会改变其中匿名函数中 this 的指向，所以此时要用 箭头函数把 this 的指向变为 Vue 对象； 如上 methods 和 computed 中的函数 function(){}， 其中 this 本来就是指向当前对象，即 Vue 对象
// 计算属性的方法既可以在 指令系统 中用，也可以在模板语法中用
})
</script>
</html>
官网文档： https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7
end ...