深入理解vue.js中$watch的oldvalue与newValue


Posted in Javascript onAugust 07, 2017

$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}

总结

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

Javascript 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 #Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 #Javascript
jquery+css实现简单的图片轮播效果
Aug 07 #jQuery
bootstrap table表格客户端分页实例
Aug 07 #Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 #Javascript
react native实现往服务器上传网络图片的实例
Aug 07 #Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 #Javascript
You might like
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python中的错误处理
2016/04/10 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
大学生就业策划书范文
2014/04/04 职场文书
地质灾害防治方案
2014/05/14 职场文书
沈阳故宫导游词
2015/01/31 职场文书
毕业设计致谢语
2015/05/14 职场文书
运动会班级前导词
2015/07/20 职场文书
药房管理制度范本
2015/08/06 职场文书
预备党员入党感想
2015/08/10 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技