watch监听复杂数据类型

最新推荐文章于 2023-07-10 11:11:29 发布

〆﹏为你伏笔

最新推荐文章于 2023-07-10 11:11:29 发布

阅读量354

点赞数

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

本文链接：https://blog.csdn.net/Q2159621453/article/details/124940074

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1、person内的数据改变，不会执行watch监听事件。即watch不能监听复杂数据类型。

需要深度解析才可以。

<body>
    <div id="app">
        <div>FullName: {{person.fullName}}</div>
        <div>firstName: <input type="text" v-model="person.firstName"></div>
    </div>

    <script>
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    person: {
                        firstName: "meihui",
                        lastName: "xin",
                        fullName: ''
                    }
                }
            },
            watch: {
                person: {
                    handler(newval, oldval) {
                        console.log(newval);
                        console.log(oldval);
                        this.person.fullName = this.person.firstName + this.person.lastName;
                    }
                }
            }
        })
    </script>
</body>

2、深度解析加上deep:true后，内部代码已经可以执行了，但是会发现新值与老值是一样的。

      watch: {
           person: {
               handler(newval, oldval) {
                   console.log(newval);
                   console.log(oldval);
                   this.person.fullName = this.person.firstName + this.person.lastName;
               },
               deep:true
           }
       }

    computed:{
           person2(){
              return JSON.parse(JSON.stringify(this.person))
           }
       },
     watch: {
           person2: {
              handler(newval, oldval) {
                   console.log(newval.firstName);
                   console.log(oldval.firstName);
                   this.person.fullName = this.person.firstName + this.person.lastName;
             },
              deep:true
          }
     }

〆﹏为你伏笔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
watch监听复杂数据类型

1、person内的数据改变，不会执行watch监听事件。即watch不能监听复杂数据类型。需要深度解析才可以。<body> <div id="app"> <div>FullName: {{person.fullName}}</div> <div>firstName: <input type="text" v-model="person.firstName"></div>.
复制链接

扫一扫