热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue使用watch监听数组或对象【vue基础】

这篇文章介绍了Vue使用watch监听数组或对象的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,

Vue使用watch监听数组或对象

1、普通的watch

data() {
    return {
        frontPoints: 0   
    }
},
watch: {
    frontPoints(newValue, oldValue) {
        console.log(newValue)
    }
}

2、数组的watch

data() {
    return {
        winChips: new Array(11).fill(0)  
    }
},
watch: {
  winChips: {
    handler(newValue, oldValue) {
      for (let i = 0; i 

3、对象的watch

data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: "local"
    }  
    }
},
watch: {
  bet: {
    handler(newValue, oldValue) {
      console.log(newValue)
    },
    deep: true
  }
}

tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;
如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
事例如下:

 4、对象具体属性的watch[活用computed]

data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: "local"
    }  
    }
},
computed: {
  pokerHistory() {
    return this.bet.pokerHistory
  }
},
watch: {
  pokerHistory(newValue, oldValue) {
    console.log(newValue)
  }
}

到此这篇关于Vue使用watch监听数组或对象的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程笔记。


推荐阅读
author-avatar
扯淡的青春0707
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有