Vue学习笔记——监视属性(watch)

一.监视属性

watch

类型：{ [key: string]: string | Function | Object | Array }

详细：
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

1.案例——点击按钮切换天气

<div class="root">
        <h2>今天天气是{
  {info}} </h2>
        <button v-on:click="changeWeather">切换天气</button>
</div>

<script>
        const vm = new Vue({
   
            el: '.root',
            data: {
   
                isHot: true
            },
            computed: {
   
                info () {
   
                    return this.isHot ? '凉爽' : '炎热'
                }
            },
            methods: {
   
                changeWeather () {
   
                    this.isHot = !this.isHot
                }
            },
            watch: {
   
                isHot: {
   
                    //immediate:true,   //初始化时让handler调用一下
                    //handler什么时候调用？当isHot发生改变时
                    handler (newValue, oldValue