目录

方法一：直接写一个监听处理函数

方法二：监听数据后面加字符串形式方法名

方法三：使用 immediate（立即）和 deep 属性及 handler （处理者）方法

• 方法一：直接写一个监听处理函数，每次监听到属性值（如cityName）变化，执行此函数
• 方法二：监听数据后面加字符串形式方法名，方法名在 methods 中定义
• 方法三：使用 immediate（立即）属性和 handler （处理者）方法，deep 深度监测。如果只需要监听对象中的一个属性值，使用字符串形式监听对象属性名
• watch 特点

方法一：直接写一个监听处理函数

• 每次监听到属性值（如cityName）改变时，执行此函数

<input type="text" v-model="cityName"/>

export default{
  data () {
    return {
      cityName: '上海'
    }  
  },
  watch: {
    cityName(newVal, oldVal){
      this.cityName = newVal
    }
  }
}

方法二：监听数据后面加字符串形式方法名

• 方法名在 methods 中定义

export default{
  data () {
    return {
      cityName: '上海'
    }  
  },
  watch: {
    cityName: 'nameChange'
  },
  methods: {
    nameChange(newVal, oldVal){
      this.cityName = newVal
    }
  }
}

方法三：使用 immediate（立即）和 deep 属性及 handler （处理者）方法

• watch 特点
  • 当值第一次绑定时不会执行监听函数
  • 只有值发生改变时才会执行监听函数
  • 如果需要第一次绑定时执行监听函数，使用 immediate 属性 boolean 类型
• 使用方法
  • 监听属性后面写成对象形式，包含 handler 方法和 immediate 属性
  • immediate 属性表示 watch 首次绑定时，是否执行 handler 方法
  • immediate 为 true 表示 watch 声明的时候，立即执行 handler 方法
  • immediate 值为 false 则和一般 watch 用法一样，在数据发生变化时才执行 handler 方法

export default{
  data () {
    return {
      cityName: '上海'
    }  
  },
  watch: {
    cityName: {
      handler(newVal, oldVal){
        this.cityName = newVal
      },
      immediate: true
    }
  }
}

deep 深度监听

• 当需要监听一个对象改变时，普通 watch 无法监听到对象内部属性变化
• 只有 data 中的数据才能够监听到对象内部属性变化
• watch 中使用 deep 属性，可以对对象中的属性进行深度监听

<input type="text" v-model="cityName.name"/>

export default{
  data () {
    return {
      cityName: {id: 1, name: '上海'}
    }  
  },
  watch: {
    cityName: {
      handler(newVal, oldVal){
        console.log('newVal', newVal)
        console.log('oldVal', oldVal)
      },
      immediate: true,
      deep: true,
    }
  }
}

• 设置 deep: true 可以监听到 cityName.name 变化
• 此时会给 cityName 所有属性都加上这个监听器
• 当对象属性较多时，每个属性值变化都会执行 handler 方法
• 如果只需要监听对象中的一个属性值，使用字符串形式监听对象属性名

export default{
  data () {
    return {
      cityName: {id: 1, name: '上海'}
    }  
  },
  watch: {
    'cityName.name': {
      handler(newVal, oldVal){
        console.log('newVal', newVal)
        console.log('oldVal', oldVal)
      },
      immediate: true,
      deep: true,
    }
  }
}

• 数组（一维、多维）变化不需要通过深度监听
• 对象数组中对象属性变化需要进行深度监听
• watch 中不要使用箭头函数，因为箭头函数中的 this 是指向当前作用域

watch监听数据变化并执行代码

1.简单应用

<template>
    <div>
        <p>FullName: {{fullName}}</p>
        <p>FirstName: <input type="text" v-model="firstName"></p>
    </div>
</template>

 
new Vue({
  data: {
    firstName: 'Dawei',
    lastName: 'Lou',
    fullName: ''
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  } 
})

简单应用2

<template>
    <div>
        <el-input v-model="demo"></el-input>
        {{value}}
    </div>
</template>
<script>
    export default {
        name: 'index',
        data() {
            return {
                demo: '',
                value: ''
            };
        },
        watch: {
            demo(val) {
                this.value = this.demo;
            }
        }
    };
</script>

简单应用3 配合computed 如果watch监测的是一个对象的话，直接使用watch是不行的，此时我们可以借助于computed计算属性来完成。

<template>
  <div>
    <el-input v-model="demo.name"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: {
          name: ''
        },
        value: ''
      };
    },
    computed: {
      newName() {
        return this.demo.name;
      }
    },
    watch: {
      newName(val) {
        this.value = val;
      }
    }
  };
</script>

2.immediate和handler

当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    immediate: true
  }
}

3.deep属性（深度监听，常用语对象下面属性的改变）

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.a changed');
      },
      immediate: true
    }
  } 
})

当vue项目中需要对某个值进行监听做一些操作的时候我们会用到watch进行监听：

1：监听普通属性：

单一字符串，布尔值，等等

data() {
			return {
				dvid: '',
				goodsInfo: [],
				userInfo:{},
				closeTime:0,//关仓倒计时
			}
		},

watch:{
		closeTime(newVal, oldVal){
			console.log(`${newVal} : ${oldVal}`);
			}
		},

注意：watch第一次绑定值的时候不会执行监听，如果需要第一次就执行监听 则需要设置：immediate: true

watch:{
		closeTime: {
				handler (newName, oldName) {
					console.log(`${newVal} : ${oldVal}`);
				},
				immediate: true
			}
		}

2：监听对象：

监听对象需要用到深度监听 设置deep:true

watch: {
			closeTime: {
				handler(newName, oldName) {
					console.log(`${newVal} : ${oldVal}`);
				},
				immediate: true,
				deep: true
			}
		}

可以可以单独监听对象的某个属性 对象.xxx

监听数组：

注意：与对象监听一样 区别在于数组不需要深度监听

tips：watch中不能使用箭头函数 箭头函数this指向为当前作用域