个人中心
gpt4 book ai didi

vue watch监控对象的简单方法示例

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue watch监控对象的简单方法示例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

示例:

?
1
2
3
4
5
6
queryData: {
name: '' ,
creator: '' ,
selectedStatus: '' ,
time: [],
},

1、普通的watch 。

?
1
2
3
4
5
6
7
8
9
10
data() {
  return {
   frontPoints: 0
  }
},
watch: {
  frontPoints(newValue, oldValue) {
   console.log(newValue)
  }
}

2、数组的watch 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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］ 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
data() {
　　 return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}
  }
},
computed: {
　　pokerHistory() {
　　　　 return this .bet.pokerHistory
　　}
},
watch: {
　　pokerHistory(newValue, oldValue) {
　　　　console.log(newValue)
　　}
}

总结 。

到此这篇关于vue watch监控对象的文章就介绍到这了,更多相关vue watch监控对象内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://www.cnblogs.com/web-chuanfa/p/9372459.html 。

最后此篇关于vue watch监控对象的简单方法示例的文章就讲到这里了,如果你想了解更多关于vue watch监控对象的简单方法示例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： 数据库的三级模式和两级映射介绍
文章推荐： 使用react从零封装一个可实时预览的Json编辑器
文章推荐： vue.js watch经常失效的场景与解决方案
文章推荐： OLEDB和ODBC的区别(优缺点)
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com