watch侦听-CSDN博客

本文链接：https://blog.csdn.net/xinguan1267/article/details/130884683

该代码示例展示了如何在Vue.js中使用数据监听器（watcher）来监控message变量的变化，包括设置初始化调用和长度验证。同时，演示了如何深度监听对象属性如user.name，以及如何通过按钮点击事件修改数据并触发视图更新。

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

<script>
export default ({
  data() {
    return {
      message: 'helloworld',
      user: {
        name: 'zhansan',
        age: 18,
      }
    }
  },
  methods: {

  },
  watch: {
    // 当message变化时，调用
    // message:function(newValue, oldValue){
    // 执行异步操作或者复杂逻辑处理
    //   if(newValue.length<5 || newValue.length > 10){
    //     console.log('message的长度不能小于5或者大于10')
    //   }
    //   console.log(newValue);
    //   console.log(oldValue);
    // }
    message: {
      immdiate: true,//初始化的时候调用函数
      handler: function (newValue) {
        if (newValue.length < 5 || newValue.length > 10) {
          console.log('message的长度不能小于5或者大于10')
        }

        console.log(newValue);
        console.log(this.message)
      }
    },
    // 监听不到对象属性的变化，需要使用deep，需要写成对象的格式
    // user: function (newValue) {
    //   console.log(newValue);
    // }
    // user: {
    //   handler: function (newValue) {
    //     console.log(newValue)
    //   },
    //   deep: true,//表示是否深度监听，侦听器会一层一层的遍历，对象的每个属性都会添加侦听
    // }

    'user.name': {// 使用字符串的形式进行优化，只监听user中的name，依然需要设置deep
      handler: function (newValue) {
        console.log(newValue)
      },
      deep: true,//表示是否深度监听，侦听器会一层一层的遍历，对象的每个属性都会添加侦听
    }

  },


})
</script>
<template>
  <div>{{ message }}</div>
  <button @click="message = '你好'">修改message</button>
  <!-- 数据的双向绑定 -->
  <input type="text" v-model="message" />
  <p>{{ user.name }}</p>
  <button @click="user.name = 'lisi'">修改用户名称</button>
</template>