前端框架Vue----监视属性

定义

通过watch去监视一个已存在属性的变化，其值变化会触发handler回调函数的执行。

<script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#container',
            data: {
                sex: false,
                lauf: '依赖属性的值',
            },
            methods: {
                changeSex: function(event){
                    // event事件源
                    // this 是Vue实例对象
                    this.sex = !this.sex
                },
            },
            computed: { //计算属性
                info(){
                    return this.lauf
                },
            },
            watch: {//监视属性
                sex: {//监视一个必须存在的属性，
                    // 包括data中的一般属性、computed中的计算属性
                    // 属性值改变，则触发handler
                    immediate: true, //初始化时，即调用一次，认为值改变
                    handler(newValue, oldValue){
                        //this 是Vue实例
                        console.log(this)
                        console.log('监视到属性值的变化', newValue, oldValue)
                    },
                },
            },
        })
    </script>

监视属性还可以如下形式：

//vm 视图模型， 即Vue实例对象
vm.$watch("info", {
            immediate: true,//属性在初始化的时候，随即调用一次
            handler(newValue, oldValue) {
                //this 是Vue实例
                console.log(this)
                console.log('监视到属性值的变化', newValue, oldValue)
            }
        }
        )

深度监视

watch监视属性，默认只监视属性值的变化，若属性值是一个对象，对象内部的属性变化则监视不到。只有设置deep:true时，才能监视到内部属性的变化，且可以多层级的监视。

watch: {//监视属性
       info: {//监视一个必须存在的属性，
            // 包括data中的一般属性、computed中的计算属性
            // 属性值改变，则触发handler
            immediate: true, //初始化时就调用一次
            handler(newValue, oldValue) {
                //this 是Vue实例
                console.log(this)
                console.log('监视到属性值的变化', newValue, oldValue)
            },
        },
        tom: { //监视tom属性，仅仅是监视其值，其值是对象{name:'', age:23}
            // 对象内部的变化，默认不监测
            deep: true,//监视对象的内部变化
            handler(){
                console.log("tom内部属性变化")
            },
        },
        'tom.age': {
        	//监视tom对象内部的age
        	handler(){
        		console.log("深度监视age")
        	}
        }
},

监视属性简写

采用默认监视属性时，即单层次，可以使用简写形式
此时没有如下设置：
immediate: true,
deep: true

watch: {
	tom(newValue, oldValue){//单层次监视
		console.log('tom属性值改变了')
	}
}


//或者
vm.$watch('tom', function(newValue, oldValue){console.log("tom属性值改变了")})

监视属性与计算属性

1. 两者都能实现功能时，优先选择计算属性
2. 实现一些异步的任务时，优先选择监视属性

computed: {
      calcAttr: {
          get(){
             setTimeout(()=>{this.name='jack'}, 1000)
             return this.name //计算属性也可以异步
          },
          set(){},
      },
          },

注意：
所有被Vue管理的函数，一般写成普通函数（不是箭头函数），这样this才是Vue实例；
所有不被Vue管理的函数，如定时器的回调函数、ajax异步请求的回调函数（axios/promise）等，最好写成箭头函数，这样this才是Vue实例或者组件实例。
属性值发生变化，看有没有依赖该属性的计算属性；有没有监视属性