vue watch 侦听器的使用

礼小七

于 2022-06-19 22:01:38 发布

阅读量125

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/lixiaoqidecsdn/article/details/125350907

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>