深入理解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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
理解javascript回调函数
Dec 28 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
基于vue.js实现购物车
Jan 15 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
React列表栏及购物车组件使用详解
Jun 28 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
Smarty Foreach 使用说明
2010/03/23 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
微信红包随机生成算法php版
2016/07/21 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
Python2.x中文乱码问题解决方法
2015/06/02 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
python计算两个地址之间的距离方法
2018/06/09 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
JSF界面控制层技术
2013/06/17 面试题
幼儿园春游活动方案
2014/01/19 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
优秀学生事迹材料
2014/02/08 职场文书
初中学习计划书范文
2014/09/15 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
汇报材料怎么写
2014/12/30 职场文书
中国合伙人观后感
2015/06/02 职场文书