watch监听数据

watch监听简单数据类型可以监听到数据变化

<template>
  <div>
    <button @click="btn">点击改变</button>
  </div>
</template>

<script>
export default {
  name: "Btn",
  data() {
    return {
      bbb:"aaa",
    };
  },
  methods: {
    btn() {
      this.bbb="ccc"
    }
  },
 
  watch: {
    bbb: {
      handler(newValue, oldValue) {
        console.log("新的",newValue);
        console.log("旧的",oldValue);
        console.log(newValue === oldValue);
      },
      deep: true
    }
  }
};
</script>

<style></style>

 watch监听是对象和数组数的数据变化但是新旧是更新后的

<template>
  <div>
    <button @click="btn">点击改变</button>
  </div>
</template>

<script>
export default {
  name: "Btn",
  data() {
    return {
      bbb:"aaa",
      ccc:123,
      aaa: {
        pokerState: 53
      }
    };
  },
  methods: {
    btn() {
      this.bbb="ccc"
      this.aaa.pokerState = 555555;
    }
  },
  // created() {
  //   this.aaa.pokerState = 54;
  // },
  watch: {
    aaa: {
      handler(newValue, oldValue) {
        console.log("新的", JSON.stringify(newValue));
        console.log("旧的", JSON.stringify(oldValue));
        console.log(newValue === oldValue);
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style></style>

watch监听是对象和数组数的数据变化方法

<template>
  <div>
    <button @click="btn">点击改变</button>
  </div>
</template>

<script>
export default {
  name: "Btn",
  data() {
    return {
      bbb: "aaa",
      ccc: 123,
      aaa: {
        pokerState: 53,
        aa:[11,222,3333]
      }
    };
  },
  methods: {
    btn() {
      // debugger
      // this.bbb = "ccc";
      this.aaa.pokerState = 555555;
      // this.aaa = 555555;
      // this.aaa.aa[2]=6666
    }
  },
  computed: {
    str() {
      return JSON.stringify(this.aaa)
    }
  },
  // created() {
  //   this.aaa.pokerState = 54;
  // },
  watch: {
    'str': {
      handler(newValue, oldValue) {
        // debugger
        console.log("新的str", JSON.parse(newValue));
        console.log("旧的str", JSON.parse(oldValue));
        console.log(newValue === oldValue, this.aaa);
      }
    },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style></style>