Vue中watch监听数组和对象值变化

监听不到

在Vue中我们可以使用watch监听数据的变化，不过对于对象或者数组的监听需要调整参数，看下面的例子。

<template>
  <div>
    <h2>欢迎首页</h2>
    <div>请输入用户名<input type="text" v-model="user.username"/></div>
    <div>旧值和新值：{{ usernameVal }}</div>
  </div>
</template>

<script>

export default {
  name: "HomeIndex.vue",
  data() {
    return {
      user:{
        username: '',
        passwd: ''
      },
      usernameVal:''
    }
  },
  watch: {
    //监听数据的变化，可以获取数据变化前后的值
    user: function (oldUsername, newUsername) {
      this.usernameVal = oldUsername + "__" + newUsername
    },
  },
  mounted() {
    //console.log(this._vnode);
  }
}
</script>

<style scoped>

</style>

deep: true监听对象

接下来增加参数deep: true

<template>
  <div>
    <h2>欢迎首页</h2>
    <div>请输入用户名<input type="text" v-model="user.username"/></div>
    <div>旧值和新值：{{ usernameVal }}</div>
  </div>
</template>

<script>

export default {
  name: "HomeIndex.vue",
  data() {
    return {
      user:{
        username: '',
        passwd: ''
      },
      usernameVal:''
    }
  },
  watch: {
    //监听数据的变化，可以获取数据变化前后的值
    user: {
      handler () {
        console.log(this.user.username)
      },
      deep: true,
      immediate: true //刷新加载  立马触发一次handler
    },
  },
  mounted() {
    //console.log(this._vnode);
  }
}
</script>

<style scoped>

</style>