vue watch监听

在 Vue.js 中,watch 是一个对象,用于观察和响应 Vue 实例上的数据变化。当被监视的属性发生变化时,watch 里的回调函数将被调用。

(vue2)官方文档:计算属性和侦听器 --- Vue.js (vuejs.org)

下面是一个简单的 watch 示例:

javascript 复制代码
<template>  
  <div>  
    <input v-model="message" placeholder="输入一些文字...">  
    <p>{{ message }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: ''  
    };  
  },  
  watch: {  
    // 监听 message 属性的变化  
    message(newVal, oldVal) {  
      console.log(`新的 message 值是: ${newVal}`);  
      console.log(`旧的 message 值是: ${oldVal}`);  
    }  
  }  
};  
</script>

在这个例子中,当 message 的值发生变化时,watch 里的回调函数将被调用,并打印出新旧的值。

你还可以使用深度监听对象或数组的变化,只需在 watch 选项中将属性设置为一个对象,并设置 deep 属性为 true

javascript 复制代码
<template>  
  <div>  
    <input v-model="userInfo.name" placeholder="输入名字...">  
    <p>{{ userInfo.name }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      userInfo: {  
        name: ''  
      }  
    };  
  },  
  watch: {  
    userInfo: {  
      handler(newVal, oldVal) {  
        console.log(`新的 userInfo 值是:`, newVal);  
        console.log(`旧的 userInfo 值是:`, oldVal);  
      },  
      deep: true // 深度监听  
    }  
  }  
};  
</script>

在这个例子中,当 userInfo 对象的 name 属性发生变化时,watch 里的回调函数将被调用,并打印出新旧的值。

此外,还可以使用 immediate 属性,使得 watch 在初始化时立即执行一次回调函数:

javascript 复制代码
watch: {  
  message: {  
    handler(newVal, oldVal) {  
      console.log(`新的 message 值是: ${newVal}`);  
      console.log(`旧的 message 值是: ${oldVal}`);  
    },  
    immediate: true // 初始化时立即执行  
  }  
}

在这个例子中,watch 在初始化时将立即执行一次回调函数,打印出 message 的初始值。

更多请看其他大佬文章:

Vue.js 监听属性 | 菜鸟教程 (runoob.com)

Vue进阶(三十五):watch 监听函数详解 - 掘金 (juejin.cn)

Vue之watch监听的原理_vue watch原理-CSDN博客

vue的watch监听_vue watch监听-CSDN博客

vue-watch监听功能(侦听器)详解&使用_vue watch监听-CSDN博客

相关推荐
脑袋大大的10 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0119 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui