Vue监听器watch的基本用法

最新推荐文章于 2024-07-12 18:36:18 发布
最新推荐文章于 2024-07-12 18:36:18 发布
阅读量1.6k 收藏 24
点赞数 25
分类专栏： 前端 文章标签： vue watch 监听器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsx0728/article/details/137334224
版权

文章目录

1. 作用

监视数据变化，执行一些业务逻辑或异步操作。

2. 格式

监听器 watch 内部以 key ：value 的形式定义，key 是 data 中的属性名，value 是监听到 key 变化后执行的回调函数。value 可以是字符串，可以是函数，可以是对象。

  • value 如果为字符串，字符串为方法名称，需要通过 methods 定义好；
  • value 如果为函数，通过函数可以获取到监听对象更新前和更新后的值；
  • value 如果为对象，对象内可以包含回调函数的其他选项，例如是否初始化时进行监听 immediate : true，或是否执行深度遍历 deep : true。

如 value 为函数，watch 格式为：

watch: {
	// 该方法会在数据变化时，触发执行
	// data 中属性的名称为数据属性名
	// : function 可以省略。数据属性名 : function (newValue, oldValue) 可简写为 数据属性名 (newValue, oldValue)
	数据属性名 : function (newValue, oldValue) {
	一些业务逻辑 或 异步操作。
	},
	// data 中对象数据的属性需要写为 对象.属性名
	'对象.属性名' : function (newValue, oldValue) {
	一些业务逻辑 或 异步操作。
	}
}

如 value 为对象，watch 格式为：

watch: {
	数据属性名 : {
		deep: true, // 深度监视(针对复杂类型)
		immediate: true, // 是否立刻执行一次handler
		handler (newValue) {
			console.log(newValue)
		}
	}
}
3. 示例
3.1 value 值为字符串
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
      }
      #app {
        padding: 10px 20px;
      }
      .box {
        display: flex;
      }
      textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
      }
      textarea:hover {
        border: 1px solid #1589f5;
      }
      .tip-box span {
        flex: 1;
        text-align: center;
      }
      .query span {
        font-size: 18px;
      }

      .input-wrap {
        position: relative;
      }
      .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
      }
      .input-wrap i {
        font-size: 20px;
        font-style: normal;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div class="input-wrap">
          <textarea v-model="words"></textarea>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      
      const app = new Vue({
        el: '#app',
        data: {
          words: ''
        },
        methods:{
          changewords(){
            console.log(this.words)
          }
        },
        watch: {
          words : 'changewords' // 注意单引号不要漏掉
        }
      })
    </script>
  </body>
</html>

执行结果：
在这里插入图片描述

3.2 value 值为函数

将上面代码改写成 value 值为函数的格式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
      }
      #app {
        padding: 10px 20px;
      }
      .box {
        display: flex;
      }
      textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
      }
      textarea:hover {
        border: 1px solid #1589f5;
      }
      .tip-box span {
        flex: 1;
        text-align: center;
      }
      .query span {
        font-size: 18px;
      }

      .input-wrap {
        position: relative;
      }
      .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
      }
      .input-wrap i {
        font-size: 20px;
        font-style: normal;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div class="input-wrap">
          <textarea v-model="words"></textarea>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      
      const app = new Vue({
        el: '#app',
        data: {
          words: ''
        },
        watch: {
          words (newvalue, oldvalue) {
            console.log(newvalue)
          }
        }
      })
    </script>
  </body>
</html>

执行结果：
在这里插入图片描述

3.3 value 值为对象

将上面代码改写成 value 值为对象的格式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
      }
      #app {
        padding: 10px 20px;
      }
      .box {
        display: flex;
      }
      textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
      }
      textarea:hover {
        border: 1px solid #1589f5;
      }
      .tip-box span {
        flex: 1;
        text-align: center;
      }
      .query span {
        font-size: 18px;
      }

      .input-wrap {
        position: relative;
      }
      .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
      }
      .input-wrap i {
        font-size: 20px;
        font-style: normal;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div class="input-wrap">
          <textarea v-model="words.cat"></textarea>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      
      const app = new Vue({
        el: '#app',
        data: {
          words: {
            cat : '奶牛猫',
            dog : '哈士奇',
          }
        },
        watch: {
           // '对象.属性名'的单引号不要漏掉
          'words.cat' : {
            deep : true,
            immediate : true,  // 立刻执行一次handler
            handler (newvalue) {
              console.log(newvalue)
            }
          }
        }
      })
    </script>
  </body>
</html>

执行结果：
在这里插入图片描述
因为设置了 immediate : true，所以首次打开页面会打印出 “奶牛猫” 字样。

4. 与计算属性对比

计算属性的结果会缓存，只有依赖属性发生变化才会重新计算，且必须返回一个数据，主要用来进行数据计算。
监听器主要监听某个数据的变化，从而执行回调业务，不仅仅局限于返回数据，比如数据变化时执行异步发送Ajax请求或开销较大的操作时，采用监听器较好。

zsx0728
关注
  • 25
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE中watch用法
05-18 1338
一、 watch是什么？ 监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值，用一个函数取代。 简洁的说：watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。 二、应用 **当watch检测对象/数组的情况 <template> <div> <p>a: {{a}}</p> <p>a: <input type="t.
Vue配置项之watch
weixin_45134711的博客
06-12 3560
首先说明一下，本人是前端小学生级别的菜鸡，吐槽的话请口下留情，在评论区指出错误或者补充不足，我会很喜欢，互喷不会进步，相互指点才会。。。。
框架技术Vue ---- watch监听、组件生命周期和数据共享、全局注册属性_vue生命周期watch
最新发布
2301_82244509的博客
07-12 714
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。
Vue中watch(监听器)的用法详解（通俗易懂，简单明了）
前端报刊
01-19 3万+
官方解释：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 watch，遍历 watch 对象的每一个 属性。 示例： 滴哟 <template> <el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card> </template.
Vue中watch的用法
热门推荐
MQJ
11-04 9万+
4、deep，当需要监听一个对象的变化时，普通的watch方法无法监听带对象内部属性的变化，只有data中的数据才能够坚挺到变化，此时需要deep属性进行深度监听，设置deep：true，当对象的属性较多是，每个属性的变化都会执行handler。6、watch中不要使用箭头函数，即不要用箭头函数来定义watcher函数，因为箭头函数中的this是指向当前作用域，对于箭头函数来说，箭头函数中的this指向的是定义时的对象而不是函数运行时所在的对象，即全局定义时的window对象。
【Vue】watch使用详解
俊刚的博客
12-28 2052
watch是Vue.js提供的一个功能，用于监听数据的变化并执行相应的操作。它可以帮助我们根据数据变化来更新界面或执行其他操作。无论是监视单个属性还是多个属性，都可以通过watch来实现。
vue中的watch监听数据变化及watch中各属性的详解
10-18
本文详细介绍了Vue中watch属性的作用和使用方法，特别强调了immediate、handler和deep这三个属性的应用细节。 在Vue实例中，watch属性用于定义数据监听器。当我们需要监控的数据发生变化时，可以执行对应的回调函数...
vue计算属性computed、事件、监听器watch的使用讲解
10-17
以上内容详细介绍了Vue计算属性(computed)、方法(methods)、监听器(watch)的使用方法和区别，并通过实例展示了它们在实际开发中的应用。理解这些知识点对于提升Vue.js开发效率和代码质量具有重要意义。
【JavaScript源代码】VUE watch监听器的基本使用方法详解.docx
12-29
本文将详细讲解`watch`监听器的基本使用方法。 1. **watch 的简单用法** 当我们需要监听某个数据属性，例如`firstName`时，可以在`watch`对象中定义一个与之同名的函数。这个函数接收两个参数，`newVal`和`oldVal`...
Vue3 - watch 侦听器（超详细使用教程）
王佳斌
11-16 2970
Vue3官方文档，vue3.js watch 侦听器官方教程文档，vue3---watch侦听器总结太到位了，vue3 watch侦听器，详解Vue3中侦听器watch的使用教程，VUE3中watch监听使用实例详解，vue3---watch侦听器总结太到位了，Vue3侦听器watch，详解Vue3中侦听器watch的使用教程，Vue3 我对watch侦听器的理解，VUE3 中的 Watch 详解，Vue 3 响应式侦听与计算属性，Vue3 watch 和 watchEffect 侦听器，vue3.0中的w
Vue开发之watch监听数组、对象、变量操作分析
10-17
如果需要更精细地监听对象的某个属性，可以像下面的示例中那样，单独为对象的具体属性定义watch监听器。 ```javascript data(){ return { bet: { pokerState: 53, pokerHistory: 'local' } } }, computed: { ...
vue中watch的使用详解
qq_51846847的博客
11-24 3714
vue中watch的使用详解
vue中watch的用法
刘泽海的博客
12-12 2万+
一、首先确认watch是一个对象，一定要当做对象来用 1 2 3 watch:{ } 　　对象：有键，有值。 　1、键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。 　2、值： 　　① 可以是【函数】：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形...
vue中watch的使用
WeiflR10的博客
04-06 2632
watch是监听 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值。 基础用法 <template> <div> </div> </template> <script> export default { data(){ return { alldata:1, shipStatusArr{ name:"张三" } } }, watc
watch computed使用
突维
10-25 122
<template> <div class="hello"> <p>FullName: {{fullName}}</p> <!-- <p>Fullname:{{fullName0}}</p> --> <p>FirstName: <input type="text...
vue watch的基本用法
dsadada23的博客
10-15 344
小编主要介绍了vue的watch基本使用方法，官方的说法不易于理解，是小编自己的话术。可以看看哦！
watch事件监听三种用法
King Saj
08-30 3632
第一种 普通监听 <input type="text" v-model="userName"/> //监听 当userName值发生变化时触发 watch: { userName (newName, oldName) { console.log(newName) } } 第二种 第一种有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，只有当值改变的时候 才会执行，如果想在第一次绑定的时候执行此监听函数 则需要 设置 immediate为true &
vue watch的简单用法
jmymy0的博客
07-25 906
   HTMML  里            &lt;select v-model="val" &gt;                     &lt;option value="1"&gt;单板&lt;/option&gt;                     &lt;option value="2"&gt;双板&lt;/option&gt;         
vue监听器watch描述
08-15
Vue.js中的监听器watch是一个用于监听Vue实例中数据变化的功能。通过使用watch选项，我们可以指定要监听的数据属性，并在它们发生变化时执行特定的操作。 watch选项可以是一个对象，其中每个属性都是要监听的数据属性，而值可以是一个函数或一个对象。 当值是一个函数时，它会接收两个参数：新值和旧值。在函数内部，我们可以根据需要执行任何操作，比如发送异步请求、计算属性、触发其他方法等。 当值是一个对象时，我们可以使用不同的钩子函数来定义要在特定情况下执行的操作。常用的钩子函数包括： - immediate：在监听开始之后立即执行一次回调函数。 - handler：回调函数，当监听的属性发生变化时触发。 - deep：深度监听，当监听的属性内部发生变化时也会触发回调函数。 - immediate和deep可以一起使用。 下面是一个使用watch的示例： ```javascript data() { return { message: '', count: 0 } }, watch: { message(newVal, oldVal) { console.log('message changed:', newVal, oldVal); }, count: { handler(newVal, oldVal) { console.log('count changed:', newVal, oldVal); }, immediate: true, deep: true } } ``` 在上面的示例中，我们监听了message和count两个属性。当message发生变化时，会执行相应的回调函数。而对于count属性，我们使用了一个对象来定义监听，设置了immediate为true，表示在监听开始之后立即执行一次回调函数；设置了deep为true，表示深度监听count属性内部的变化。 总的来说，watch是一个非常有用的功能，可以帮助我们在数据变化时执行相应的操作，实现更精细的控制和逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值