Vue框架watch详解

简单变量的监听

{
  data() {
    return {
      username: "dennis",
      userid: 125
    }
  },
  watch: {
    username(value) {
      console.log("username 被修改了", value);
    },
    userid: {
      handler: function(newValue, oldValue) {
        console.log("username 被修改了", newValue, oldValue);
      }
    }
  }
}

对象的监听

• 通过deep可以监听对象的属性；
• 通过immediate可以控制是否需要第一次渲染；

{
  data() {
    return {
      user: {
        username: "dennis",
        userid: 125
      }
    }
  },
  watch: {
    user: {
      handler: function(newVal, oldVal) { ... },
      deep: true
    },
    "user.username": {
      handler: function(newVal, oldVal) { ... },
      immediate: true
    }
  }
}