<!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">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<title>监听属性基本实现方式总结</title>
</head>
<body>
<div id="app">
<h2>今天天气很{{info}}</h2>
<button @click='changeMeater()'>切换</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data() {
return {
isHost: true
}
},
// 这是计算属性computed
computed: {
info() {
return this.isHost ? '炎热' : '寒冷'
}
},
methods: {
changeMeater() {
this.isHost = !this.isHost
console.log('------', vm)
}
},
//1. 监听方式1：new Vue 里面使用watch
// 监听属性值的变化
watch: {
isHost: {
// handler函数时候在isHost发生改变的时候调用 参数 ：newValue , oldValue 是改变前后的值
// 案例：假设是做一个温度，就可以用前后的值相加减，做一些业务逻辑
handler(newValue, oldValue) {
console.log('isHost改变了', newValue, oldValue)
},
// immediate 是初始化时，让handler调用一下
immediate: true,
deep: true //开启深度监听功能，例如属性是一个对象的时候，可以监听到里面的属性
},
// 同理，改变后的info也可以监听
info: {
// handler函数时候在isHost发生改变的时候调用 参数 ：newValue , oldValue 是改变前后的值
// 案例：假设是做一个温度，就可以用前后的值相加减，做一些业务逻辑
handler(newValue, oldValue) {
console.log('info改变了', newValue, oldValue)
},
// immediate 是初始化时，让handler调用一下
immediate: true,
},
},
})
/*
//2. 监听方式2，用vue的实例vm： 需要传两个参数，1 要监听谁，2.怎么监听
vm.$watch('isHost', {
// handler函数时候在isHost发生改变的时候调用 参数 ：newValue , oldValue 是改变前后的值
// 案例：假设是做一个温度，就可以用前后的值相加减，做一些业务逻辑
handler(newValue, oldValue) {
console.log('isHost改变了', newValue, oldValue)
},
// immediate 是初始化时，让handler调用一下
immediate: true,
})
*/
</script>
</body>
</html>
