前端框架Vue|前端框架Vue----监视属性前端框架|监视属性|vue.js

定义
深度监视
监视属性简写
监视属性与计算属性

定义 【前端框架Vue|前端框架Vue----监视属性】通过watch去监视一个已存在属性的变化，其值变化会触发handler回调函数的执行。

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) }, }, }, })

文章图片

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

//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属性值改变了")})

监视属性与计算属性

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

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

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