vue用watch监听对象，打印oldValue和newValue相同的问题

背景

做节目设计器时候，当组件超出限制大小时，需要回滚此次操作，但是数据没有备份，拿不到旧数据。因此在watch中监听变化对象，达到旧数据缓存的能力。

data(){return {obj:{a:1,b:2,c:{d:3,e:4}},oldObj:null}
},
watch: {obj: {handler: function (newVal, oldVal) {console.log('newVal', newVal, 'oldVal', oldVal)this.oldObj = this.obj},deep: true}
}

设想是这样，可是当我们实践发现，newVal，和oldVal打印值相同，这是为什么呢？

原理

其实很简单，因为对象指向的是一个对象，对象是引用类型。所以在改了数据之后，oldVal也会随之变化。

Vue官方的解释是：在变更（不是替换）对象或数组时，新值与旧值相同，因为他们指向同一数组或对象，Vue不会保留变更前值的副本。

解决方法

我们可以用计算属性并配合JSON.stringify()来进行保存。
修改后代码：

computed: {computedObj () {return JSON.parse(JSON.stringify(this.obj))}
}
watch: {computedObj: {handler: function (newVal, oldVal) {console.log('newVal', newVal)console.log('oldVal', oldVal)this.oldObj = oldVal},deep: true}}

这样就实现了我们想要的效果。缓存了旧数据。如果需要回滚操作，只需要赋值缓存数据即可。

同样使用场景还可以是：我们需要监听多个字段时，就可以把它们放到一个对象中。然后去监听这个对象。

附加

如果是第二种场景想节省性能的话，可以加一个防抖函数进去，防止页面初始化被调用多次。watch监听虽好，但还是少用、小心用为妙啊！

搞定，下班！

vue用watch监听对象，打印oldValue和newValue相同的问题相关推荐

vue watch监听对象
一.watch的API vm.$watch( expOrFn, callback, [options] ) 参数: {string | Function} expOrFn {Function | Ob ...
vue 对象中数组中对象某个属性更改_vue之监听对象、对象数组的改变
vue之监听对象的改变一.对象监听 1. 深度监听 change name:'test', data () {return{ user: { id:1, name: '李四', age: 14, s ...
[vue] watch怎么深度监听对象变化
[vue] watch怎么深度监听对象变化 deep设置为true 就可以监听到对象的变化let vm=new Vue({el:"#first",data:{msg:{name:' ...
VUE 2 无法监听数组和对象的某些变化
一.数组 1. 不能监听的情况 (1) 直接通过下标赋值 arr[i] = value (2) 直接修改数组长度 arr.length = newLen 2. 替代做法 (1)修改值 1. Vu ...
vue 监听对象里的特定数据
2019独角兽企业重金招聘Python工程师标准>>> vue 监听对象里的特定数据变化通常是这样写的,只能监听某一个特定数据 watch: {params: function( ...
vue监听对象某一个属性
watch: {uploadObj: {//监听对象deep: true,handler: function(value) {if (!value.receiver && !value ...
Vue.js开发记录--用watch监听对象中属性的变化
监听对象中所有属性存在对象obj,若想要监听其中所有的值的变化 watch: {obj: {handler (val) {// coding},deep: true}, } 监听对象中某个属性如果 ...
动态数据绑定之监听对象变化
---恢复内容开始--- 动态数据绑定是MVVM框架中最基础的的一个功能,简单描述就是:将数据和视图进行绑定,当数据发生改变时,视图随之改变,更深层次一点,数据绑定包括单向数据绑定和双向数据绑定. 本 ...
watch监听对象里面值的变化_Vue总结——computed和watch的用法和区别
computed--计算属性写法一: 写法二: computed默认有缓存如果被依赖的属性没有发生变化,就不会重新计算. 什么是变化: 点击n+1按钮,控制台打出 n变了点击obj.a=hi , ...

vue用watch监听对象，打印oldValue和newValue相同的问题

vue用watch监听对象，打印oldValue和newValue相同的问题

背景

原理

解决方法

附加

vue用watch监听对象，打印oldValue和newValue相同的问题相关推荐

最新文章

热门文章