$watch中的oldvalue和newValue

大家都知道，在vue.js中给我们提供了$watch的方法来做对象变化的监听，而且在callback中会返回两个对象，分别是oldValue和newValue.

顾名思义，这两个对象就是对象发生变化前后的值。

但是在使用过程中我发现这两个值并不总是预期的。下面来一起看看详细的介绍：

定义data的值

data: {
 arr: [{
  name: '笨笨',
  address: '上海'
 }, {
  name: '笨笨熊',
  address: '北京'
 }],
 obj: {
  name: '呆呆',
  address: '苏州'
 },
 str: '哈哈哈'
 }

定义watch

watch: {
 arr: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 obj: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 str: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 }

定义事件触发

methods: {
 test() {
  this.arr.push({
  name: 9
  })
  this.$set(this.obj, 'i', 0)
  this.str = ''
 },
 test1() {
  this.arr = [{
  name: '000'
  }]
  this.obj = {
  name: 999
  }
  this.str = '123'
 }
 }

测试结果为

1. 对数组进行push操作和对Obj进行$set操作，虽然都可能触发watch事件，但是在callback返回的结果中，oldValue和newValue相同。字符串对象如预期返回
2. 在对数组和Obj统一进行赋值操作时，watch触发并且oldValue和newValue如预期返回

关于watch的其他测试

不能够触发监听的

1、数组

        修改某个下标的某个属性的值

        使用原生delete删除某个属性

        对某个下标新增一个属性（不使用$set）

        对某个下标重新赋值

2、对象

        修改某个属性的值（但是会触发这个属性的监听）

        新增一个属性（不使用$set）

        原生delete删除某个属性

以上总结可能存在不足

万金油实现watch监听

在修改完数据后添加这样一段代码

array

arr = [...arr]

obj

obj = {...obj}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# vue  # watch  # oldvalue  # oldval  # old  # 实例详解vue.js浅度监听和深度监听及watch用法  # vue.js使用watch监听路由变化的方法  # Vue.js中关于侦听器（watch）的高级用法示例  # Vue.js 中的 $watch使用方法  # Vue.Js中的$watch()方法总结  # Vue.js计算属性computed与watch（5）  # vue.js中$watch的用法示例  # Vue.js 的 watch函数基本用法  # 这两个  # 但是在  # 大家都  # 给我们  # 苏州  # 在对  # 顾名思义  # 这篇文章  # 来做  # 谢谢大家  # 不能够  # 北京  # 上海  # 中会  # 过程中  # 我发现  # 笨笨熊  # 有疑问  # callback 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  javascript中的try catch异常捕获机制用法分析  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】  如何在橙子建站上传落地页？操作指南详解  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  Laravel策略(Policy)如何控制权限_Laravel Gates与Policies实现用户授权  软银砸40亿美元收购DigitalBridge 强化AI资料中心布局  高端智能建站公司优选：品牌定制与SEO优化一站式服务  奇安信“盘古石”团队突破 iOS 26.1 提权  JS中对数组元素进行增删改移的方法总结  如何在IIS管理器中快速创建并配置网站？  Laravel如何升级到最新版本？（升级指南和步骤）  Linux网络带宽限制_tc配置实践解析【教程】  如何挑选优质建站一级代理提升网站排名？  无锡营销型网站制作公司,无锡网选车牌流程？  iOS发送验证码倒计时应用  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  西安专业网站制作公司有哪些,陕西省建行官方网站？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  海南网站制作公司有哪些,海口网是哪家的？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  如何确认建站备案号应放置的具体位置？  Thinkphp 中 distinct 的用法解析  Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程  如何撰写建站申请书？关键要点有哪些？  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  Laravel如何为API编写文档_Laravel API文档生成与维护方法  Laravel怎么进行浏览器测试_Laravel Dusk自动化浏览器测试入门  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  C++用Dijkstra(迪杰斯特拉)算法求最短路径  nginx修改上传文件大小限制的方法  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  EditPlus中的正则表达式 实战(4)  大连 网站制作,大连天途有线官网？  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  EditPlus 正则表达式 实战(3)  Laravel如何配置任务调度？（Cron Job示例）  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  中国移动官方网站首页入口 中国移动官网网页登录  iOS验证手机号的正则表达式  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  Android中AutoCompleteTextView自动提示  如何用AWS免费套餐快速搭建高效网站？  晋江文学城电脑版官网 晋江文学城网页版直接进入  Swift中swift中的switch 语句  如何在建站主机中优化服务器配置？