130-Vue中的监听事件——Watch

Watch

watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

简单点说，就是实时监听某个数据的变化。

1、普通监听

<template>
<!-- 监听属性 -->
  <div>
    <p>{
  
  {num}}</p>
    <button @click="num++">按钮</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num:30
 
    }
  },
  watch:{
    // 第1种格式:
    // num(newVal,oldVal){
    //   // 什么时候执行, num的值发生变化的时候,就执行这里的代码
    //   console.log("num被修改了",newVal,oldVal);
    // },
    // 第2种格式:
    num:{
      handler(newVal,oldVal){
        // 什么时候执行, num的值发生变化的时候,就执行这里的代码
        console.log("num被修改了",newVal,oldVal);
      }
    }
  }
}
</script>
 
<style lang = "less" scoped>
  
</style>

2、立即监听

如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

<template>
<!-- 立即监听 -->
  <div>
    <p>{
  
  {num}}</p&