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 < newValue.length; i++) {         if (oldValue[i] != newValue[i]) {           console.log(newValue)         }       }     },     deep: true   } } 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监听数组或对象的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持易知道(ezd.cc)。

推荐阅读

    Python之可迭代对象、迭代器、生成器

    Python之可迭代对象、迭代器、生成器,迭代,生成器,一、概念描述可迭代对象就是可以迭代的对象,我们可以通过内置的iter函数获取其迭代器,可

    应用程序对象

    应用程序对象,,应用程序对象是一个应用程序级对象,用于在所有用户之间共享信息,并且在Web应用程序运行期间可以保存数据。 应用的性质: 方法

    appdata是什么文件夹可以删除

    appdata是什么文件夹可以删除,文件夹,文件,本文目录appdata是什么文件夹可以删除windows7里面的appdata可以删除吗appdata文件夹有什么用

    数列求和快捷键|数组求和快捷键

    数列求和快捷键|数组求和快捷键,,数组求和快捷键1,这是文本型数组直接运算 不可能 除非单个的取出来分割后转数值型,再找相同的X[1],进行X[2

    Java创建对象的几种方式

    Java创建对象的几种方式,对象,方法,本文目录Java创建对象的几种方式java中几种创建对象的方式1Java中创建对象的集中方式有那些JAVA创建对

    wps快速的编辑图层|WPS巧用对象图层

    wps快速的编辑图层|WPS巧用对象图层,图层,编辑,快速,wps,1.WPS 如何巧用对象图层一、认识对象图层工具及按纽1、您可以在插件工具栏中可以