当前位置：网站首页>watch监听

watch监听

2022-08-11 11:51:00 【-加油】

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>

只监听对象person的name属性，name变化，，函数运行，sex(其他属性)变化，不会触发.

原网站

版权声明
本文为[-加油]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_51040174/article/details/124841767

边栏推荐

猜你喜欢

随机推荐