监听器watch

监听器

侦听器:用于监听数据变化,然后做事

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

 watch_name(newVal,oldVal){}
  1. 方法格式的侦听器

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

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

  1. 对象格式的侦听器

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

​ 好处2：可以通过 *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>watch！</title>
</head>

<body>
    <!-- --------------------------------------这里是方法格式的侦听器 ----------------------------------->
    <div id="app">
        <input type="text" v-model="username">
        <input type="text" v-model="username1">
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script src="./lib/jquery-v3.6.0.js"></script>
    <script>
        var i = 0;
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'admin',
                shownow: 'shownow',
                username1:'shownow'
            },

            watch: {
                username(newVal, oldVal) {
                    console.log("监听到了变化", oldVal, newVal);
                    console.log("原本是" + oldVal);
                    console.log("现在是" + newVal);
                },
                // 监听器的作用:监视username1,用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用！！！
                username1(newVal) {
                    if (newVal === '') return
                    $.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
                        console.log(result)
                    })
                }
            }
        })
    </script>

</body>

</html>

对象格式的侦听器

<!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>侦听器</title>
</head>

<body>
  <!-- --------------------------------------这里是对象格式的侦听器 ----------------------------------->
  <div id="app2">
    <!-- 对象格式:单个属性 -->
    <input type="text" v-model="shownow">
    <!-- 对象格式:多个属性 -->
    <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>
    var i = 0;
    const vm1 = new Vue({
      el: '#app2',
      data: {
        username3: '三号用户',
        info: {
          username: 'admin是属性之一',
          address: {
            city: '北京是属性之二'
          }
        },
        watch: {
          shownow: {
            // 侦听器的处理函数
            handler(oldVal, newVal) {
              if (i == 0) {
                console.log("自动触发:第一次对象格式的侦听处理");
                console.log(i);
              } else {
                console.log("这是第" + i + "次对象格式的侦听处理", newVal, oldVal)
                console.log(i);
              }
              i++;
            },
            // immediate 的作用是：控制侦听器是否自动触发一次,打开网页时就能看到. 默认值是 false
            immediate: true
          },


          info: {
            handler(newVal) {
              console.log("开启深度监听任何一个属性变化了都会触发", newVal)
            },
            // 开启深度监听
            deep: true
          }
          // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
          // 'info.username'(newVal) {
          //   console.log(newVal)
          // }

        }
      }
    })

  </script>
</body>

</html>
posted @ 2023-03-20 09:28  Dinesaw  阅读(31)  评论(0)  编辑  收藏  举报