当前位置：首页 > news >正文

Vue中的侦听器watch

news 来源：原创 2023/1/30 15:42:50

侦听器：侦听属性或计算属性值的变化，可以做异步操作，比如setTimeout()。

实现侦听器的两种格式

① 利用watch配置项

new Vue({el: '#root',data: function () {return {count: 1}},watch: {count: {  // 侦听count属性handler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}}}
});

② $watch()

const vm = new Vue({el: '#root',data: function () {return {count: 1}}
});
vm.$watch('count', {  // 第一个参数为侦听的属性，第二个参数为配置项handler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}
});

watch中的配置项
① immediate：立即，默认是false，如果为true，则在页面初始化时就触发一次handler方法
② deep：深度侦听，能够侦听引用数据类型内部所有属性的变化，不只局限于侦听该属性地址的变化

new Vue({el: '#root',data: function () {return {count: 1,person: {name: 'wuwu',age: 18}}},watch: {count: {immediate: true,  // 页面初始化时，就调用一次侦听count属性的handler方法，newValue为1，oldValue为undefinedhandler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}}.'person.name': { // 这样写表示侦听person中的name属性变化，效果与侦听count一致，因为它们都是基本数据类型handler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}},person:{   // 这样写表示侦听person这个引用数据类型地址的变化，只有地址变化才会触发handler方法handler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}},person: {  // 添加配置项deep:true表示深度侦听person中所有属性的变化，某一个属性发生变化都会触发handler方法deep: true, handler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}}}
});

器简写格式
上述代码都是按照完整格式编写的，如果要简写，需要满足的条件就是没有配置项，如果有需求加immediate、deep等配置项，不能简写！！！

new Vue({el: '#root',data: function () {return {count: 1,}},watch: {count(newValue. oldValue) {   // 直接写成函数形式，与计算属性类似console.log(`新值：${newValue}，旧值：${oldValue}`);}}
});

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.exyb.cn/news/show-3836619.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈，一经查实，立即删除！