Vue.watch监视器事件

爱捣鼓的XiaoPu

已于 2023-04-08 16:35:12 修改

阅读量154

点赞数

文章标签： vue.js javascript 前端 html

于 2023-04-08 16:26:07 首次发布

本文链接：https://blog.csdn.net/weixin_46287861/article/details/130030599

版权

watch监视器事件

案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.prod.js"></script>
     <style>
       #app div,h1{
         margin: 40px auto;
         text-align: center;
       }
     </style>
  </head>
  <body>
    <div id="app">
       <h1>watch监听简单数据类型</h1>
       <div class="example1">
         千米:<input type="text" v-model.number.lazy="kilo"/>
         <=>
         米:<input type="text" v-model.number.lazy="meter"/>
         <p>左输入框修改前为:{{oldKilo}} ,修改后为:{{newKilo}}</p>
         <p>右输入框修改前为:{{oldMeter}},修改后为:{{newMeter}}</p>
       </div>
       <h1>watch深度监听</h1>
       <div class="example2">
           用户名:<input type="text" v-model.lazy="user.name"/>
           年龄:<input type="text" v-model.lazy="user.age"/>
       </div>
    </div>
    <script>
      const app=Vue.createApp({
        data(){
          return {
              kilo:0,
              meter:0,
              oldKilo:0,
              newKilo:0,
              oldMeter:0,
              newMeter:0,
              user:{
                  name:"张三",
                  age:22
              }
          }
        },
        watch:{
            kilo(newVal,oldVal){
                this.oldKilo = oldVal;
                this.newKilo = newVal;
                this.meter = newVal*1000;
            },
            meter(newVal,oldVal){
                this.oldMeter = oldVal;
                this.newMeter = newVal;
                this.kilo = newVal/1000;
            },
            // 无法对对象进行深度监听 无法监听到对象的属性变化 无法监听到数组的变化
            // user(newVal,oldVal){
            //     console.log("newVal:",newVal);
            //     console.log("oldVal:",oldVal);
            // }

            // "user.age"(newVal,oldVal){
            //     console.log("新user.age变化了"+newVal);
            //     console.log("旧user.age变化了"+oldVal);
            // },
            // "user.name"(newVal,oldVal){
            //     console.log("新user.name变化了"+newVal);
            //     console.log("旧user.name变化了"+oldVal);
            // }

            user:{
                // handler 监听的回调函数
                handler(newVal,oldVal){
                    console.log("new newVal:",newVal);
                    console.log("old oldVal:",oldVal);
                },
                // deep:true 深度监听 默认false 只能监听到一层
                deep:true,
                // immediate:true 立即执行一次 默认false 只有在值发生变化时才会执行
                immediate:true
            }
        },
          computed:{
                newUser(){
                    return JSON.Parse(JSON.Stringify(this.user));
                }
          },
      }).mount("#app");
    </script>
  </body>
</html>

监听属性