Vue中watch的多种使用方法小结
watch的多种用法
1.属性: 方法(最常用)
使用最广泛的方式是将watch选项设置为一个对象，对象的属性是要观测的数据属性，值是一个回调函数，该回调函数会在属性变化时触发。例如：
<strong>watch: {
firstName: function(newVal, oldVal) {
console.log('firstName changed:', newVal, oldVal);
}
}</strong>2.属性: 数组
你可以在一个watch选项中观测多个数据属性，这可以通过将要观测的属性放入一个数组中来实现。例如：
<strong>watch: {
'person.firstName': function(newVal, oldVal) {
console.log('firstName changed:', newVal, oldVal);
},
'person.lastName': function(newVal, oldVal) {
console.log('lastName changed:', newVal, oldVal);
}
}</strong>3.属性: 对象
另一种观测多个属性的方式是使用对象。在这种情况下，对象的键是要观测的属性，值是一个包含处理函数、handler的对象。
该处理函数与属性值的回调函数相同，用于在属性更改时执行组件中的逻辑。它还可以包含其他选项，例如deep和immediate。例如：
<strong>watch: {
person: {
handler: function(newVal, oldVal) {
console.log('person changed:', newVal, oldVal);
},
deep: true
}
}</strong>4.属性:字符串
还可以使用字符串指定要观察的属性，然后使用对应的方法名称作为回调函数。这个选项在只有一个属性需要观察的情况下非常有用。例如:
<strong>watch: {
'person.firstName': 'firstNameChanged'
},
methods: {
firstNameChanged: function(newVal, oldVal) {
console.log('firstName changed:', newVal, oldVal);
}
}</strong>5.带命名空间的watch
watch选项中可以使用字符串表示要观测的属性，可以使用.来访问对象中的属性，如'person.firstName'，但是这样会导致处理函数与属性名称紧密耦合，不便于维护。
为了解决这个问题，Vue提供了一种带命名空间的watch用法，这可以通过在watch选项中使用对象来实现。
对象的每个键都代表一个观测的命名空间，值是观测该命名空间下属性的处理函数。例如：
<strong>watch: {
person: {
firstName: function(newVal, oldVal) {
console.log('firstName changed:', newVal, oldVal);
},
lastName: function(newVal, oldVal) {
console.log('lastName changed:', newVal, oldVal);
}
}
}</strong>这里，我们可以为person对象指定两个命名空间—firstName和lastName，这些命名空间被视为person层次结构的子命名空间。
6.$watch
除了在组件选项中设置watch属性之外，Vue还允许你使用实例方法$watch来实现相同的效果。
与组件选项中设置的watch选项不同，调用$watch时可以在任何地方使用，例如在计算属性、方法或任何其他实例方法中。例如：
<strong>created() {
this.$watch('person.firstName', function(newVal, oldVal) {
console.log('firstName changed:', newVal, oldVal);
})
}</strong>7.深度观测
在默认情况下，watch只会观测对象的第一层属性的变化。这意味着在对象的嵌套层次结构中更改属性时，不会触发处理函数。要观测对象的深层属性，可以在watch选项中使用deep属性，如下所示：
<strong>watch: {
'person.name': {
handler: function(newVal, oldVal) {
console.log('name changed:', newVal, oldVal);
},
deep: true
}
}</strong>在这个例子中，我们观察person对象的name属性，使用deep: true选项在对象深层次结构中更改属性时仍然能够触发处理函数。
综上所述，Vue的watch选项提供了多种方法来观测数据属性的变化，让我们能够编写更加优雅和维护性更高的代码。
到此这篇关于Vue中watch的多种使用方法的文章就介绍到这了,更多相关vue watch使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue2+SpringBoot实现数据导出到csv文件并下载的使用示例
本文主要介绍了Vue2+SpringBoot实现数据导出到csv文件并下载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-10-10
这篇文章主要介绍了在antd Form表单中select设置初始值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue中rem与postcss-pxtorem的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
本文主要介绍了如何在vue中使用jsx语法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了vue事件处理原理及过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
在vue3+elementPlus网站开发中,详细完成el-table表格的鼠标拖拽/拖曳/拖动排序,下面这篇文章主要给大家介绍了关于Vue3+El-Plus实现表格行拖拽功能的相关资料,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了如何在vue里面优雅的解决跨域(路由冲突问题),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue里的axios如何获取本地json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决
这篇文章主要介绍了Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了Vue组件为什么data必须是一个函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
最新评论