Vue中的 watch 侦听器

记忆怪 bug

已于 2022-07-22 20:27:36 修改

阅读量256

点赞数 1

分类专栏： vue基础文章标签： vue.js

于 2022-03-19 14:08:19 首次发布

本文链接：https://blog.csdn.net/m0_66051368/article/details/123593788

版权

vue基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

定义：watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可

侦听器的格式：

1 方法格式 的侦听器

缺点1：无法在刚进入页面的时候，自动触发！！！

缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！

2 对象格式的侦听器

好处1：可以通过 immediate 选项，让侦听器自动触发！！！

好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！

1 方法格式的侦听器示例：

<!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>
</head>

<body>
  <div id="app">
    <input type="text" v-model="username">
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script src="./lib/jquery-v3.6.0.js"></script>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // 新值在前，旧值在后
        username(newVal) {
          if (newVal === '') return
          // 1. 调用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用！！！
          $.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
            console.log(result)
          })
        }
      }
    })
  </script>
</body>

</html>

2 对象格式的侦听器示例：

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项，代码示例如下

<!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>
</head>

<body>
  <div id="app">
    <input type="text" v-model="username">
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script src="./lib/jquery-v3.6.0.js"></script>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 定义对象格式的侦听器
        username: {
          // 侦听器的处理函数
          //handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
          handler(newVal, oldVal) {
            console.log(newVal, oldVal)
          },
          // immediate 选项的默认值是 false
          // immediate 的作用是：控制侦听器是否自动触发一次！
          immediate: true
        }
      }
    })
  </script>
</body>

</html>

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：

<!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>
</head>

<body>
  <div id="app">
    <input type="text" v-model="info.username">
    <input type="text" v-model="info.address.city">
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script src="./lib/jquery-v3.6.0.js"></script>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户的信息对象
        info: {
          username: 'admin',
          address: {
            city: '北京'
          }
        }
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        /* info: {
          handler(newVal) {
            console.log(newVal)
          },
          // 开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”
          deep: true
        } */
        // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
        'info.username'(newVal) {
          console.log(newVal)
        }
      }
    })
  </script>
</body>

</html>

记忆怪 bug

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue中的 watch 侦听器

侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可侦听器的格式：1 方法格式的侦听器缺点1：无法在刚进入页面的时候，自动触发！！！缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！2 对象格式的侦听器好处1：可以通过 immediate 选项，让侦听器自动触发！！！好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！......
复制链接

扫一扫