vue基础知识：watch 侦听器（监视器）详解，watch监听器的作用，1.watch的简单写法：简单类型数据，直接监视，2.完整写法→添加格外的配置项

头顶一只喵喵

已于 2024-03-25 11:10:30 修改

阅读量6.6k

点赞数 25

文章标签： vue.js 前端 javascript

于 2024-03-25 11:09:46 首次发布

本文链接：https://blog.csdn.net/zxn275266/article/details/137005189

版权

watch监听器的作用

watch监听器的作用：监视数据变化，执行一些业务逻辑和异步操作（数据一旦发生变化实时发送请求更新数据）

1.watch的简单写法：简单类型数据，直接监视

语法：

<script>
    const app = new Vue({
      el: "#app",
      data: {
        project: "语文",
        obj: {
          name: "张三",
        },
      },
      watch: {
        //该方法会在数据变化，触发执行
        数据属性名(newValue, oldValue) {
          一些业务逻辑或异步操作;
        },
        "对象.属性名"(newValue, oldValue) {
          一些业务逻辑或异步操作;
        },
      },
    });
  </script>

简单写法案例演示1：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <textarea name="" v-model="project"></textarea>
    </div>
  </body>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        project: "语文",
      },
      watch: {
        //该方法会在数据变化，触发执行
        //newValue新值，oldValue老值(一般不用)
        project(newValue, oldValue) {
          console.log("变化前的值：", newValue, "变化后的值：", oldValue);
        },
      },
    });
  </script>
</html>

简单写法案例演示2(存在嵌套情况)：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <textarea name="" v-model="obj.project"></textarea>
    </div>
  </body>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        obj: {
          project: "语文",
        },
      },
      watch: {
        //该方法会在数据变化，触发执行
        //newValue新值，oldValue老值(一般不用)
        "obj.project"(newValue, oldValue) {
          console.log("变化前的值：", newValue, "变化后的值：", oldValue);
        },
      },
    });
  </script>
</html>

2.完整写法→添加格外的配置项

1.deep：true对复杂类型深度监视（监视对象中的所有属性）

2.immediate：true 初始化立刻执行一次handler方法

完整写法案例演示1(deep的使用)：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <select v-model="obj.country">
        <option value="italy">意大利</option>
        <option value="english">英语</option>
        <option value="german">德语</option>
      </select>
      <textarea name="" v-model="obj.project"></textarea>
    </div>
  </body>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        obj: {
          project: "语文",
          country: "english",
        },
      },
      watch: {
        //完整写法不是一个方法，是一个对象
        obj: {
          deep: true,
          handler(newValue) {
            console.log("对象被改变了", newValue);
          },
        },
      },
    });
  </script>
</html>

完整写法案例2（immediate的使用）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <select v-model="obj.country">
        <option value="italy">意大利</option>
        <option value="english">英语</option>
        <option value="german">德语</option>
      </select>
      <textarea name="" v-model="obj.project"></textarea>
    </div>
  </body>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        obj: {
          project: "语文",
          country: "english",
        },
      },
      watch: {
        //完整写法不是一个方法，是一个对象
        obj: {
          deep: true,
          immediate: true,
          handler(newValue) {
            console.log("对象被改变了", newValue);
          },
        },
      },
    });
  </script>
</html>