vue中watch

孙景荣

已于 2023-02-01 14:39:54 修改

阅读量107

点赞数

分类专栏： vue2 文章标签： vue.js javascript 前端 html css

于 2022-10-07 11:06:55 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127192129

版权

vue2 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、监听器

主要用来监听data中的数据的变化，然后执行对应的逻辑处理，只要监听的数据发生变化,就会触发我对应的监听函数

二、使用

1.监听非对象：watch: { 属性( 新值，旧值) {处理逻辑}}
2.监听对象：{ handler(新值){ 处理逻辑 }, deep: true, immediate: true }
3.下面代码，监听了name和userInfo

<!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>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>
        <input type="text" v-model="name" />
      </p>
      <p>
        <input type="text" v-model="userInfo.name" />
      </p>
    </div>

    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          name: "小明",
          userInfo: {
            name: "",
            age: "",
          },
        },
        watch: {
          name(newvalue, oldvalue) {
            console.log(oldvalue, newvalue);
          },
          userInfo: {
            handler(newvalue) {
              console.log(newvalue);
            },
            deep: true,
            immediate: true,
          },
        },
      });
    </script>
  </body>
</html>