Vue监视属性

1. 监视属性watch ：

1.当被监视的属性发生变化时,回调函数自动调用，继续相关操作
2.监视的属性必须存在，才能进行监视，没有的话不会报错但是两个value都是undfine
3.监视的两种写法:
(1).通过vm.#watch监视
(2)new. vue时传入watch配置

 //watch里面的配置
        watch:{
            immediate: true,//初始化时让handler调用,false是默认就是不调用
        //handler是当isHot发生变化时调用，有两个值，一个新value和一个修改前的value
        handler(newValue, oldValue) {
                }
        }
 //------------------------------------
 // 监视属性watch写法一:
 //写在vue实例化里面
             watch: {
             //date里面需要监视的值
                 isHot: {
                     immediate: true,//初始化时让handler调用
                     //handler是当isHot发生变化时调用
                     handler(newValue, oldValue) {
                         console.log("isHot被修改了", newValue, oldValue);
                     }
                 }
             }
  //----------------------------------------
  // 监视写法二:
  //写在vue实例化外面
    vm.$watch('isHot', {
        immediate: true,//初始化时让handler调用
        //handler是当isHot发生变化时调用
        handler(newValue, oldValue) {
            console.log("isHot被修改了", newValue, oldValue);
        }
    })

2.深度监视:

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

 Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data: {
            isHot: true,
        },
        computed: {
            info() {
                // 三目运算符flase还是true判断
                return this.isHot ? '炎热' : '凉爽';
            }
        },
        methods: {
            changeWatchd() {
                // 等于非this.isHot就是等于isHot的相反值也就是truefalse相互转换
                this.isHot = !this.isHot;
            },
            watch: {
                //简写当检测属性只有handler时就能简写
                // isHot(newValue, oldValue) {
                //     console.log("isHot被修改了,newValue,oldValue")
                // },
                isHot: {
                        // immediate: true,//初始化时让handler调用
                        //handler是当isHot发生变化时调用
                        handler(newValue, oldValue) {
                            console.log("isHot被修改了", newValue, oldValue);
                        },
                    },
                        //监视多级结构中某个属性的变化
                        /*"inumbers.a":{
                        handler(){
                        console.log("a被改变了') 
                        }
                    }*/
                        //监视多级结构中所有属性的变化
                        numbers: {
                        deep: true,
                        handler() {
                            console.log("numbers改变了");
                        }
                    }
            }
            }
        })

Vue监视数据的原理:

    1。vue会监视data中所有层次的数据
    2。如何监测对象中的数据?
       通过setter实现监视，且要在new Vue时就传入要监测的数据。
       (1).对象中后追加的属性，Vue默认不做响应式处理
       (2).如需给后添加的属性做响应式，请使用如下API:
           Vue.set(target，propertyName/index，value) 或
           vm.$set(target，propertyName/index， value)
    3。如何监测数组中的数据?
       通过包裹数组更新元素的方法实现，本质就是做了两件事:
       (1).调用原生对应的方法对数组进行更新。
       (2).重新解析模板，进而更新页面。
    4.在Vue修改数组中的某个元素一定要用如下方法:
       1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
       2.Vue.set() 或 vm.$set()
    特别注意: Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!