Vue中watch监听器的使用

使用watch监听器

<template>
  <div id="app">
    <input type="text" v-model="msg" />
    <input type="text" v-model="name" />
    <input type="text" v-model="info.password" />
    <input type="text" v-model="info.username" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "",
      name: "admin",
      info: {
        username: "",
        password: "",
      },
    };
  },
  // 新值在前 旧的在后  应用场景  判断用户名是否占用
  watch: {
    // 方法监听器只能手动触发
    msg(newval, oldval) {
      console.log("新的值", newval);
      console.log("旧的值", oldval);
    },
    // 对象监听器  可以让监听器一进页面就触发
    name: {
      // handler是监听器自带的的处理函数
      handler(newval, oldval) {
        console.log("新的值", newval);
        console.log("旧的值", oldval);
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
    },

    // deep深度监听
    info: {
      handler(newval, oldval) {
        console.log("新的值", newval);
        console.log("旧的值", oldval);
      },
      // deep是否开启深度监听   只要对象中任何一个属性有变化都会触发监听器
      deep: true,
    },

    // 直接监听对象的子属性
    "info.username"(newval, oldval) {
      console.log("新的值", newval);
      console.log("旧的值", oldval);
    },
  },
};
</script>