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 侦听对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了vuejs2.0运用原生js实现简单的拖拽元素功能示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-02-02
最近在需求中遇到了elementUI合并行,索性给大家整理下,这篇文章主要给大家介绍了关于element-ui表格的合并行和列的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue项目中如何配置eslint和prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最近因为three.js的项目要用Vue.js,下面这篇文章主要给大家介绍了关于vue中使用three.js报错的解决方法,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue 数据操作的相关资料，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
很多朋友在token过期时刷新页面，页面长时间未操作，再刷新页面时，第一次弹出“token失效,请重新登录!”提示，针对这个问题该怎么处理呢，下面小编给大家带来原因分析及解决方法，一起看看吧2021-07-07
这篇文章主要介绍了Vue.$set 失效的坑 问题发现及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-07-07
本文主要介绍了解决vue.js not detected的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
本文主要介绍了vue中ref实现子向父传值的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要为大家详细介绍了vue简单实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论