好家伙,
补了一下watch的多种用法
1.属性: 方法(最常用)
使用最广泛的方式是将watch
选项设置为一个对象,对象的属性是要观测的数据属性,值是一个回调函数,该回调函数会在属性变化时触发。例如:
watch: {
firstName: function(newVal, oldVal) {
console.log('firstName changed:', newVal, oldVal);
}
}
2.属性: 数组
你可以在一个watch
选项中观测多个数据属性,这可以通过将要观测的属性放入一个数组中来实现。例如:
watch: {
'person.firstName': function(newVal, oldVal) {
console.log('firstName changed:', newVal, oldVal);
},
'person.lastName': function(newVal, oldVal) {
console.log('lastName changed:', newVal, oldVal);
}
}
3.属性: 对象
另一种观测多个属性的方式是使用对象。在这种情况下,对象的键是要观测的属性,值是一个包含处理函数、handler的对象。
该处理函数与属性值的回调函数相同,用于在属性更改时执行组件中的逻辑。它还可以包含其他选项,例如deep
和immedia服务器托管网te
。例如:
watch: {
person: {
handler: function(newVal, oldVal) {
console.log('person changed:', newVal, oldVal);
},
deep: true
}
}
4.属性:字符串
还可以使用字符串指定要观察的属性,然后使用对应的方法名称作为回调函数。这个选项在只有一个属性需要观察的情况下非常有用。例如:
watch: {
'person.firstName': 'firstNameChanged'
},
methods: {
firstNameChanged: function(newVal, oldVal) {
console.log('firstName changed:', newVal, oldVal);
}
}
5.带命名空间的watch
watch
选项中可以使用字符串表示要观测的属性,可以使用.
来访问对象中的属性,如'person.firstName'
,但是这样会导致处理函数与属性名称紧密耦合,不便于维护。
为了解决这个问题,Vue提供了一种带命名空间的watch用法,这可以通过在watch
选项中使用对象来实现。
对象的每个键都代表一个观测的命名空间,值是观测该命名空间下属性的处理函数。例如:
watch: {
person: {
firstName: function(newVal, oldVal) {
console.log('firstName changed:', newVal, oldVal);
},
lastName: function(newVal, oldVal) {
console.log('la服务器托管网stName changed:', newVal, oldVal);
}
}
}
这里,我们可以为person
对象指定两个命名空间—firstName
和lastName
,这些命名空间被视为person
层次结构的子命名空间。
6.$watch
除了在组件选项中设置watch
属性之外,Vue还允许你使用实例方法$watch
来实现相同的效果。
与组件选项中设置的watch
选项不同,调用$watch
时可以在任何地方使用,例如在计算属性、方法或任何其他实例方法中。例如:
created() {
this.$watch('person.firstName', function(newVal, oldVal) {
console.log('firstName changed:', newVal, oldVal);
})
}
7.深度观测
在默认情况下,watch
只会观测对象的第一层属性的变化。这意味着在对象的嵌套层次结构中更改属性时,不会触发处理函数。要观测对象的深层属性,可以在watch
选项中使用deep
属性,如下所示:
watch: {
'person.name': {
handler: function(newVal, oldVal) {
console.log('name changed:', newVal, oldVal);
},
deep: true
}
}
在这个例子中,我们观察person
对象的name
属性,使用deep: true
选项在对象深层次结构中更改属性时仍然能够触发处理函数。
综上所述,Vue的watch
选项提供了多种方法来观测数据属性的变化,让我们能够编写更加优雅和维护性更高的代码。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
相关推荐: Python潮流周刊#6:Python 3.12 有我贡献的代码!
你好,我是猫哥。这里记录每周值得分享的 Python 及通用技术内容,部分为英文,已在小标题注明。(标题取自其中一则分享,不代表全部内容都是该主题,特此声明。) 首发于我的博客,https://pythoncat.top/posts/2023-06-10-we…