vue四watch

监视属性 watch

1. 通过通过vm对象的$watch()方法或watch属性来监视指定的属性

2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算

3. 监视的属性必须存在，才能进行监视！！也可以监视计算属性

4. 监视的两种写法：
   (1). new Vue时传入watch配置
   (2). 通过vm.$watch监视

5. 监视属性和计算属性的书写格式一样 都是先写名称 在写要计算哪个属性 在写函数

6. immediate: true,//初始化时 让handler调用一下

computed: {//计算
                fullName: {//计算属性 计算的哪个值
                    get() {//函数
                    }
                }
            },
            watch: {//监视
                ishot: {//监视属性 监视的哪个值 也可以监视计算属性
                    immediate: true,//初始化时 让handler调用一下
                    handler(newValue, oldValue) {//函数 监视属性修改时调用
                        console.log('ishot改变了', newValue, oldValue);
                    },
                }
            }
        })
        // 注意vm.watch 也是在vm里监视数据 也可以直接用data的 要加'""
        vm.$watch('ishot', {//也可以在vm外面写 回调函数的形式
            immediate: true,
            handler(newValue, oldValue) {
                console.log('ishot改变了', newValue, oldValue);
            }
        })

深度监视

(1). Vue中的watch默认不监测对象内部值的改变（一层）。
(2). 配置deep:true可以监测对象内部值改变（多层）。
备注：
(1). Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2). 使用watch时根据数据的具体结构，决定是否采用深度监视。

一般用于data是对象时
若监视这个对象 那么只有这个对象所指的指针发生变化时(对象重新={}才会监视到改变,而当内部属性发生变化时 对象本身是不改变的 所以监视不到)
需要加deep:true,

---

注意 data里 的值有对象时 监视这个的名要加’‘’
用vm.$watch(“ishot”)时也需要加 ‘’

data:{
    number:{
        a:1,
        b:1
    }
}

watch:{
   " number.a":{
       handler(){
           
       }
   }
}

这表示是变量的形式 就要加" "或者 可以
number[a]

---

监视的简写

如果不需要写 立即变化和深度监视开启时

watch: {//监视
                ishot(){//监视属性 监视的哪个值 也可以监视计算属性                
                 
                }
            }

vm.$watch的简写

       vm.$watch('ishot', {//也可以在vm外面写 回调函数的形式
            immediate: true,
            handler(newValue, oldValue) {
                console.log('ishot改变了', newValue, oldValue);
            }
        })
        cm.$watch('ishot',function(newValue,oldValue){

        })

3. 计算属性与监视属性的区别

computed和watch之间的区别：

computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。