watch监听不到变化？

watch监听不到对象内部的变化

有的时候vue会出现这种现象，无法监听到复杂对象内部的变化：当对象里面原本有某一个属性，并对这个属性操作时，watch是可以监听到当前属性的变化的。但是，若对象里面本没有这个属性的时候，在操作时将属性添加进去，同时包括之后对这个属性的操作，watch是都检测不到的。

这是因为vue的watch会在初始化的时候通过object.defineProperty给对象的每一个属性都添加watcher来监听内部的变化。所以，后期添加上去的属性是无法检测到的。

解决方法：

如果想在初始化后添加一个属性并进行监听操作，可以使用$set：

// this.$set(object, key, value)
// 使用this.$set就可以监听到
this.$set(this.obj, 'a', Math.random())
复制代码

watch的handler方法的两个参数值相同

一个数据，如果值发生了变化，如果想要记录变化前和变化后的两个值，可以使用handler方法，第一个参数为变化后的新值，第二个为变化前的旧值。

但是如果这个值是复杂对象，如果想记录里面的属性的变化，使用handler，两个参数均为变化后的新值。

解决方法：

结合计算属性、序列化、反序列化生成新的对象，来避免此问题

 data () {return {obj: {}}},computed: {// 如果想要得到差异内容，可以结合计算属性、序列化、反序列化生成新的对象，来避免此问题 。obj2 () {return JSON.parse(JSON.stringify(this.obj))}},watch: {obj2: {handler (newVal, oldVal) {console.log('data变化了')console.log(newVal, oldVal)},deep: true}},
复制代码

全部代码

<template><div><button @click="clickFn">++++</button></div>
</template><script>
export default {name: 'Mall',data () {return {// !监听时给每一个属性都添加getter和setter，变化了，就触发handler函数，如果后期添加属性，这个属性不可以被监听到// obj: {//   a: 10// }// !这种是不可以被监听到的// 因为watch是通过Object.defineProperty()给对象的每一个现有属性增加监听器// 在后面直接添加a属性，身上没有监听器，所以不会被监听到obj: {}}},computed: {// 如果想要得到差异内容，可以结合计算属性、序列化、反序列化生成新的对象，来避免此问题 。obj2 () {return JSON.parse(JSON.stringify(this.obj))}},watch: {obj2: {handler (newVal, oldVal) {console.log('data变化了')console.log(newVal, oldVal)},deep: true}},methods: {clickFn () {// this.obj.a = Math.random()// this.$set(object, key, value)// 使用this.$set就可以监听到this.$set(this.obj, 'a', Math.random())}}
}
</script>

watch监听不到变化？相关推荐

MutationObserver 监听DOM树变化
1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...
android 监听手机电量变化
今天,简单讲讲如何监听手机电量的变化. 监听电量是不能静态注册的. 后来上网搜索,发现有五个不能静态注册的广播,这里记录一下,免得下次再后知后觉的发现并惊讶于自己的笨拙. 不能静态注册的广播: and ...
JS实时监听DOM元素变化 - MutationObserver
使用 MutationObserver API实时监听DOM元素变化创建 MutationObserver 实列,接受一个用于监听到DOM元素变化的回调函数 const handleListenCh ...
实时监听输入框值变化的完美方案：oninput onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange 原文:实时监听输入框值变化的完美方案:oninput & onpropertychange 在 W ...
jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
[react] React中如何监听state的变化？
[react] React中如何监听state的变化? 16.x 之前使用componentWillReveiveProps componentWillReceiveProps (nextProps) ...
vue 监听map数组变化_解决vue无法侦听数组及对象属性的变化问题
一.数组 1.可以监听到的情况如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况使用下标修改某个元素(这种比较常见) array[index] = 1 objec ...
父页面监听iframe路由变化_前端路由原理
对于前端路由应该都很熟悉了,开发过spa应用的应该都用过,只是很少人去查一下前端路由实现的原理. 前端路由的实现核心问题有两个,一个是改变url不刷新,另一个是监听url变化.主要靠的就是hash和h ...
vue监听路由的变化，跳转到同一个页面时，Url改变但视图未重新加载问题
vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题解决方法: 添加路由监听,路由改变时执行监听方法 methods:{fetchData(){console.log('路由发送 ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案) 参考文章: (1)onchange监听inpu ...

watch监听不到变化？

watch监听不到对象内部的变化

解决方法：

watch的handler方法的两个参数值相同

解决方法：

全部代码

watch监听不到变化？相关推荐

最新文章

热门文章