vue watch 侦听器的使用

最新推荐文章于 2025-11-24 03:44:17 发布

原创最新推荐文章于 2025-11-24 03:44:17 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍了Vue中如何使用watch监听data和computed属性的变化，包括简单和复杂写法的示例。通过监听，可以在变量值改变时执行相应处理函数，实现数据响应。案例展示了在input输入框中输入数字时，实时打印新值和旧值的过程，同时深入探讨了immediate和deep选项的作用。

Vue侦听到某个变量的值改变，可以侦听data/computed属性值的改变

简单写法

watch:{
    "被侦听的属性名"(newVal,oldVal) {
      console.log(newVal,);   //新值
      console.log(oldVal,)    //旧值
    }
  }

案例演示

input输入框，依次输入数字，打印newVal,oldVal的值

复杂写法

<template>
  <div>
    <input type="text" v-model="user.name" />
    <br>
    <input type="text" v-model="user.age" />
  </div>
</template>
<script>
export default {
  name: 'home-container',
  data () {
    return {
      user: {
        name: '',
        age: 0
      }
    }
  },
  watch: {
    user: {
      handler (newVal, oldVal) {
        console.log(newVal, oldVal)
      },
      immediate: true,  //立即执行
      deep: true // 深度监听
    }
  }
}
</script>
<style>
</style>