快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

怎么在vue中利用watch对对象进行监控-创新互联

这篇文章将为大家详细讲解有关怎么在vue中利用watch对对象进行监控,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

成都创新互联专注于游仙企业网站建设,响应式网站设计,电子商务商城网站建设。游仙网站建设公司,为游仙等地区提供建站服务。全流程按需求定制制作,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务

watch的作用:监听vue实例上数据的变动

示例:


queryData: {
name: '',
creator: '',
selectedStatus: '',
time: [],
},

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对对象进行监控就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享名称:怎么在vue中利用watch对对象进行监控-创新互联
文章出自:http://6mz.cn/article/jsgei.html

其他资讯