vue监听属性watch中的handler

发表于2022年9月10日2022年9月10日作者 jiukeshuju

handle:watch中需要具体执行的方法
deep：需要监听的数据的深度，一般用来监听对象中某个属性的变化,数组字符串一般不需要
immediate：在选项参数中指定 immediate: true将立即以表达式的当前值触发回调

<input type="text" v-model="cityName.name"/>
new Vue({
  el: '#root',
  data: {
    cityName: {id: 1, name: 'shanghai'}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {
      // ...
    },
    deep: true,
    immediate: true
    }
  } 
})

使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName,最初绑定的时候是不会执行的

普通监听

缺点：不能深度监听（对象属性的改变），刷新或首次加载不能执行。数组

watch: {
            carts: function (val, oldVal) {
                console.log('new: %s, old: %s', val, oldVal)
            }
        }

高级监听

handle：watch中须要具体执行的方法。bash
immediate：true当即执行handle方法（首次加载、刷新、数据改变）都会执行，缺点监听不到对象属性中发生的改变。spa

watch: {
            carts: {
                handler(val, oldVal) {
                    console.log('new: %s, old: %s', val, oldVal)
                },
                immediate: true
            }
        },

deep：true深度检测。例如数组对象中的某个属性改变执行handle方法。

watch: {
            carts: {
                handler(val, oldVal) {
                    console.log('new: %s, old: %s', val, oldVal)
                },
                deep: true
            }
        },

<!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="vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" v-model="keword">
        <ul>
            <li v-for="(p,index) of wor1">{{p.name}}</li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el:"#root",
            data:{
                keword:"",
                wor1:[
                    {id:1,name:"wulei1",age:11},
                    {id:2,name:"wulei2",age:22},
                    {id:3,name:"wulei3",age:30},
                    {id:4,name:"wulei4",age:12}
                ]
            },  
            watch:{
                // keword(val){
                //     console.log("改变"+val);
                // }
                keword:{
                    handler(a,b){
                        console.log("改变了",a,b);
                    },
                    immediate: true
                }  
            }
        });
    </script>
</body>
</html>

发表评论取消回复