watch监听

-加油

已于 2022-05-26 21:56:40 修改

阅读量65

点赞数

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

于 2022-05-18 15:00:56 首次发布

本文链接：https://blog.csdn.net/weixin_51040174/article/details/124841767

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

vue

13 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中数据监听的使用，包括普通监听、对象监听及深度监听。通过示例代码展示了如何监听数据变化，特别是对象属性的变化，并强调了箭头函数在回调中的作用，以及如何针对对象的特定属性进行监听。同时，文章探讨了Vue.js的响应式数据原理。

摘要由CSDN通过智能技术生成

1、普通监听

<body>
   <div id="app">
    <p>年龄：{{age}}</p>
    <button @click="age++"> 修改age,增加年龄</button>
   </div>
</body>
<script src="vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data(){
            return{
                age:18
            }
        },
        watch:{
            //如果age发生改变，这个函数就会运行
            age:function(newValue,oldValue){
                console.log(newValue);
            }  
            //另一种简洁写法
            // age(newValue,oldValue){
            //     console.log(newValue);
            // }
        }
    })
</script>

注意这里当有setTimeout定时器时：
回调函数必须要用箭头函数。
回调函数是由js引擎调用的。
而箭头函数没有this指向，它会往外找，也就是age的this，age是vue所管理的函数，this指向该vue实例。

<body>
    <div id="app">
     <p>年龄：{{age}}</p>
     <button @click="age++"> 修改age,增加年龄</button>
     <p>temp:{{temp}}</p>
    </div>
 </body>
 <script src="vue-2.6.12.js"></script>
 <script>
     const vm = new Vue({
         el:'#app',
         data(){
             return{
                 age:18,
                 temp:18
             }
         },
         watch:{
            age(newValue,oldValue){
                setTimeout(()=>{
                    console.log(newValue);
                    this.temp = newValue
                },1000)
            }
         }
     })
 </script>

当不是箭头函数时：
在这里插入图片描述

2、监听对象

<body>
   <div id="app">
    <p>名字:{{person.name}}</p>
    <button @click="person.name='ls'">修改名字</button>
   </div>

</body>
<script src="vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data(){
            return{
                person:{
                    name:'zs',
                    sex:'男'
                }
            }
        },
        watch:{
            //数据改变 但是没有执行这个函数 没有打印，没有进行watch监听
            person:function(newValue,oldValue){
                console.log(newValue);
            }
             //另一种简洁写法
            // person(newValue,oldValue){
            //     console.log(newValue);
            // }
            
            
        }
    })
</script>

需要使用到深度监听。
对象的所有属性都需要监听时用：

<body>
   <div id="app">
    <p>名字:{{person.name}}</p>
    <button @click="person.name='ls'">修改名字</button>
   </div>
</body>
<script src="vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data(){
            return{
                person:{
                    name:'zs',
                    sex:'男'
                }
            }
        },
        watch:{
          //深度监听
            person:{
                handler:function(newValue,oldValue){
                    //拿到的是新的对象
                    console.log(newValue);
                    console.log(newValue.name);
                    console.log(newValue.sex);
                },
                //监听器会一层一层的向下遍历，给对象每个属性添加一个监听器
                deep:true
            }  
        }
    })
</script>

上述例子监听对象的所有属性，如person的name，sex等等属性。不论是哪个属性变化都触发handler，监听了所有属性。
当我们只想监听对象的某个属性。

<body>
   <div id="app">
    <p>名字:{{person.name}}</p>
    <button @click="person.name='ls'">修改名字</button>
   </div>
</body>
<script src="vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data(){
            return{
                person:{
                    name:'zs',
                    sex:'男'
                }
            }
        },
        watch:{
          //深度监听
           'person.name':{
                handler:function(newValue,oldValue){
                    //输出name的值
                    console.log(newValue);
                },
                deep:true
            }   
        }
    })
</script>