Vue watch 侦听对象属性详解
更新时间：2023年04月25日 15:48:02 作者：羽毛儿1207
Vue的watch侦听器格式有两种：方法格式和对象格式的侦听器，这篇文章主要介绍了Vue watch 侦听对象属性相关知识,需要的朋友可以参考下
1. Vue watch 概述
Vue 的 watch 侦听器格式有两种：方法格式和对象格式的侦听器。
- 方法格式的侦听器只能
监听简单数据类型，如：Number、String、… 无法监听对象属性的变化，也不能在进入页面时，自动触发； - 对象格式的侦听器可以监听
对象属性的变化。在一定条件下，载入页面时，也可监听数据变化；
2. Vue 对象的监听方法
1.键名分割，监听对象的某一个属性变化；
属性名通过 . 与对象分割，并通过引号包裹，可以监听对象的某一个属性
data() {
return {
obj:{
name:'andy',
age:18
}}},
watch:{
'obj.name'(newval.oldval) {
// 代码实现
}
}2.computed + watch，监听对象的某一个属性变化；
computed:{
ageVal() {
return this.obj.age;
}
}
watch:{
ageVal(newval,oldval) {
// 代码实现
}
}3.deep 深度监听，监听对象的所有属性变化；
deep：true开启深度监听，任意属性的属性值变化，都会触发 deep 深度监听；- deep 深度监听只能获取到最新值；
- 不推荐 deep 深度监听，容易造成页面卡顿，因为deep 深度侦听需要遍历被侦听对象中的所有嵌套的属性；
obj:{
handler(val) {
// 代码实现 val 值是 obj 整个对象
},
deep:true // deep 为 true 时，开启深度监听
// immediate:false 当immediate 值为 true 时，刚载入页面时，也可监听数据的变化
}到此这篇关于Vue watch 侦听对象属性的文章就介绍到这了,更多相关Vue watch 侦听对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue el-table实现右键菜单功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
让多个组件使用同一个挂载点，并动态切换，这就是动态组件。这篇文章主要介绍了Vue动态组件 ,需要的朋友可以参考下2017-08-08
这篇文章主要为大家详细介绍了Vue实现选项卡tab切换制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue使用@include或@mixin报错的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
vue.config.js文件devServer字段的常用选项详解
在 Vue CLI 生成的 vue.config.js 文件中,devServer 字段用于配置开发服务器的选项,本文给大家介绍vue.config.js文件devServer字段的常用选项,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了vue-cli 卸载不掉的问题解决方法，文中给大家介绍了安装后问题分析及解决方案，需要的朋友可以参考下2023-01-01
这篇文章主要为大家介绍了Vue3.0组件通信mitt源码ts实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了Vue实现监听某个元素滚动,亲测有效！具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
vue.js是目前比较流行的前端框架之一,它提供了非常多的基础组件和工具库,以方便开发者快速搭建具有可重用性的web应用,下面这篇文章主要给大家介绍了关于VUE使用day.js显示时分秒并实时更新时间效果的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue打包后,用后端接口报错304、404问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最新评论