这样监听不到值的变化（已解决，有情况可以）

已于 2022-02-19 15:54:31 修改
阅读量257 收藏
点赞数
分类专栏： vue JavaScript 文章标签： javascript vue.js 前端
于 2022-02-19 15:49:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40945354/article/details/123019452
版权
vue 同时被 2 个专栏收录
722 篇文章 4 订阅
订阅专栏
JavaScript
628 篇文章 6 订阅
订阅专栏
本文通过示例代码探讨了Vue.js中使用`$watch`进行数据监听的情况。重点在于如何监听对象属性的变化，包括直接监听对象和深度监听。示例展示了当直接监听整个对象时，初始赋值改变可以触发回调，但修改对象内部属性不会触发。而通过监听对象的某个属性或者使用深度监听（deep: true），则可以捕获到对象内部属性的变化。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html>
	<div id="app">
            <input type="text" v-model="name">{{name}}
            <input type="text" v-model="age">{{age}}
            <input type="text" v-model="obj.id">{{obj.id}}
            <input type="text" v-model="obj.addr">{{obj.addr}}
	</div>
	
	<script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
      return {
        name: "",
        age: "",
        obj: {
          id: "1",
          addr: "gz"
        }
      };
    },
    created() {
      this.obj = {
        id:"99",
        addr:"gd"
      }
      // 用法一：  this.$watch("要监听的值",(oldVal,newVal)=>{ })
      
      //这样监听不到对象的变化的
      this.$watch("obj", (newval, oldval) => {
        console.log(newval);
        console.log(oldval);
      });
    }
}).mount('#app')
 
</script>
</html>

可是，这样也监听不到值的变化啊？

<!DOCTYPE html>
<html>
	<div id="app">
            <input type="text" v-model="name">{{name}}
            <input type="text" v-model="age">{{age}}
            <input type="text" v-model="obj.id">{{obj.id}}
            <input type="text" v-model="obj.addr">{{obj.addr}}
	</div>
	
	<script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
      return {
        name: "",
        age: "",
        obj: {
          id: "1",
          addr: "gz"
        }
      };
    },
    created() {
      this.obj = {
        id:"99",
        addr:"gd"
      }
      // 用法一：  this.$watch("要监听的值",(oldVal,newVal)=>{ })
      this.$watch("name", (newValue, oldValue) => {
        console.log(newValue + "_新值");
        console.log(oldValue + "_旧值");
      });
  
    }
}).mount('#app')
 
</script>
</html>

这样可以

<!DOCTYPE html>
<html>
	<div id="app">
            <input type="text" v-model="name">{{name}}
            <input type="text" v-model="age">{{age}}
            <input type="text" v-model="obj.id">{{obj.id}}
            <input type="text" v-model="obj.addr">{{obj.addr}}
	</div>
	
	<script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
      return {
        name: "",
        age: "",
        obj: {
          id: "1",
          addr: "gz"
        }
      };
    },
    created() {
      this.obj = {
        id:"99",
        addr:"gd"
      }
      // 用法一：  this.$watch("要监听的值",(oldVal,newVal)=>{ })
      this.$watch("name", (newValue, oldValue) => {
        console.log(newValue + "_新值");
        console.log(oldValue + "_旧值");
      });
      //这样监听不到对象的变化的
     
    },
    watch: {
    age: (newValue, oldValue) => {
      console.log(newValue);
      console.log(oldValue);
    },
    // 监听对象中的某个属性的变化
    "obj.id":(newVal,oldVal)=>{
      console.log(newVal);
      console.log(oldVal);
      
    },
    //深度监听
    obj:{
      handler(newVal,oldVal){
        console.log(newVal);
        console.log(oldVal);
        
      },
　　　　deep:true
    }
  }
}).mount('#app')
 
</script>
</html>

可是，这样也可以啊，
这个原文里面说不可以。

<!DOCTYPE html>
<html>
	<div id="app">
            <input type="text" v-model="name">{{name}}
            <input type="text" v-model="age">{{age}}
            <input type="text" v-model="obj.id">{{obj.id}}
            <input type="text" v-model="obj.addr">{{obj.addr}}
	</div>
	
	<script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
      return {
        name: "",
        age: "",
        obj: {
          id: "1",
          addr: "gz"
        }
      };
    },
    created() {
      this.obj = {
        id:"99",
        addr:"gd"
      }
      
      //这样监听不到对象的变化的
      this.$watch("obj", (newval, oldval) => {
        console.log(newval);
        console.log(oldval);
      });
    },
    watch: {
    age: (newValue, oldValue) => {
      console.log(newValue);
      console.log(oldValue);
    },
    // 监听对象中的某个属性的变化
    "obj.id":(newVal,oldVal)=>{
      console.log(newVal);
      console.log(oldVal);
      
    },
    //深度监听
    obj:{
      handler(newVal,oldVal){
        console.log(newVal);
        console.log(oldVal);
        
      },
　　　　deep:true
    }
  }
}).mount('#app')
 
</script>
</html>

完整版

<!DOCTYPE html>
<html>
	<div id="app">
            <input type="text" v-model="name">{{name}}
            <input type="text" v-model="age">{{age}}
            <input type="text" v-model="obj.id">{{obj.id}}
            <input type="text" v-model="obj.addr">{{obj.addr}}
	</div>
	
	<script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
      return {
        name: "",
        age: "",
        obj: {
          id: "1",
          addr: "gz"
        }
      };
    },
    created() {
      this.obj = {
        id:"99",
        addr:"gd"
      }
      // 用法一：  this.$watch("要监听的值",(oldVal,newVal)=>{ })
      this.$watch("name", (newValue, oldValue) => {
        console.log(newValue + "_新值");
        console.log(oldValue + "_旧值");
      });
      //这样监听不到对象的变化的(似乎也可以？我加)
      this.$watch("obj", (newval, oldval) => {
        console.log(newval);
        console.log(oldval);
      });
    },
    watch: {
    age: (newValue, oldValue) => {
      console.log(newValue);
      console.log(oldValue);
    },
    // 监听对象中的某个属性的变化
    "obj.id":(newVal,oldVal)=>{
      console.log(newVal);
      console.log(oldVal);
      
    },
    //深度监听
    obj:{
      handler(newVal,oldVal){
        console.log(newVal);
        console.log(oldVal);
        
      },
　　　　deep:true
    }
  }
}).mount('#app')
 
</script>
</html>
hamimelon2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Vue 使用Watch侦听器监听对象如何取得旧值问题
qq_41777791的博客
08-25 5095
解决Vue 使用Watch侦听器监听对象如何取得旧值问题
vue watch 经常监听不到_vue.js watch经常失效的场景与解决方案
weixin_39526872的博客
01-17 1397
使用过watch的，应该起码经历过一次失效。比如，我们监听对象的时候，在没有踩坑之前，很容易这样写： 但是，❌，这里的watch是无效的!!!因为 obj 是引用类型！！！引用类型的指针是固定的，所以如果不是重新赋值，那么其赋值的变量自然也不会发生变化。举个例子：let obj = { a: 1 };let obj1 = obj;let obj2 = { ...obj };obj1.a = 2;o...
v-model双向绑定时数据不能实时变化使用this.$set
qq_46691281的博客
05-29 618
<Test3 :options="options"/> 在Test2.vue文件中有一个子组件Test3，父组件对子组件进行传值，传的值是一个对象options: { width: '20px' } 当发生点击时，想改变options对象的值this.options = {};this.options.width = '30px' 如果使用这种方式的话，在Test3组件中接受的options参数并不会实时发生变化 <input v-model="options.width" @click
vue之组件间v-model通信
sxjit的博客
04-12 1777
假如要使原生元素例如input输入框与实例数据双向绑定，我们都知道可以直接使用v-model指令。那如果是两个自定义组件间通信该如何使用v-model？ 首先要清楚v-model的原理： <input-con v-model="inputVal"></input-con> 等价于 <input-con :value="inputVal" @input="inputV...
解决watch数组新旧值无法监听的问题
ccss__ddnn的博客
11-23 816
解决watch数组新旧值无法监听的问题： 问题原因为新旧值同源，解决方案如下，直接computed一个数组的深度拷贝，监听拷贝即可。 new Vue({ el:"#example", data:{ arr:[1,2,3], index:1 }, methods:{ changeArr(){ this.arr.push(this.index++); } }, computed:{ newarr(){ return JSON.parse(JSON.stringify(this.arr)); } }, watch
解决layui下拉框监听问题(监听不到值的变化)
10-16
在使用layui框架开发时，下拉框（select）组件的值变化监听是一个常见的需求，但在某些情况下，开发者可能会遇到监听不到值变化的情况。本文将详细解析如何解决layui下拉框监听不到值变化的问题。 ### 知识点一：...
vue 子组件watch监听不到prop的解决
10-14
然而，在处理异步数据时，有时子组件的watch属性无法监听到prop的变化，这会导致组件状态不及时更新。为了解决这个问题，可以采用以下几种方法： 1. 使用immediate属性。在watch对象中，为要监视的prop添加...
解决Vue2.0 watch对象属性变化监听不到的问题
12-01
发现子组件使用deep watch都不能观察到对象中属性的变化，今天终于找到为啥出现这种问题和解决办法了。 解决 为啥出现这种问题？受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。 请参照...
vue计算属性无法监听到数组内部变化的解决方案
10-16
然而，在某些情况下，Vue无法监听到数组内部的变化，尤其是当直接修改数组元素的值时（比如使用索引直接赋值）。这会导致计算属性无法正确响应数组内部的变化，从而无法更新模板中显示的数据。 要解决这个问题，...
vue3.0 在setup中watch监听无法监听旧值
一个小白的博客
02-17 598
watch 无法监听旧值的原因
Vue3：watch属性的坑||监视reactive数据时遇到的问题||深度监视||无法获取oldValue的原因
Forest_2Cat的博客
04-03 5444
Vue3在使用watch属性监视reactive定义的响应式数据时遇到的坑： 1.当监测对象为对象类型时，无法获取到oldValue。 2.当监测对象是reactive定义的数据时，强制开启深度监视。 3.当监测对象时reactive定义数据中的一个类型为对象的属性时，需要手动开启深度监视。 // 监视ref定义的一个响应式数据 watch(sum,(newV,oldV)=>{ console.log(newV+'-'+oldV);
Vue.js中 watch 的高级用法
qq_40414209的博客
09-23 249
Vue.js中 watch 的高级用法 假设有如下代码： <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName
解决vue3中watch 监听不到旧值的问题,亲测有效！
最新发布
枫ゞ的博客
01-06 2296
这个问题是我在公司vue3项目的时候发现的一个问题，watch 在监听变量的变化时，发现对象的数据变化时 旧数据 获取到的和新数据是一样的 类似于下面这样数据变化之后显示出来的如下 :打印出来的值 {a:'改变值',b:6 } {a:'改变值',b:6 }当我打印出同样数据的时候 我一脸懵逼 甚至于怀疑自己代码写错了。但是检查一圈 发现代码没有任何错误。然后我用数组去实验了一下 发现 监听数组时也监听到的都是新数据。
vue的watch属性监听不到数据的变化的解决方案
S_xxcc的博客
04-12 8305
vue踩坑记录
watch监听不到变化？
不定时分享最优质的网络技术与教程，满满的干货。
12-31 3784
有的时候vue会出现这种现象，无法监听到复杂对象内部的变化：当对象里面原本有某一个属性，并对这个属性操作时，watch是可以监听到当前属性的变化的。但是，若对象里面本没有这个属性的时候，在操作时将属性添加进去，同时包括之后对这个属性的操作，watch是都检测不到的。一个数据，如果值发生了变化，如果想要记录变化前和变化后的两个值，可以使用handler方法，第一个参数为变化后的新值，第二个为变化前的旧值。但是如果这个值是复杂对象，如果想记录里面的属性的变化，使用handler，两个参数均为变化后的新值。
vue2 -- 响应式赋值组件更新数据v-model不生效问题
King Saj
11-05 3400
问题描述 在使用Vue双向绑定(v-model)功能时，封装子组件通过Inject功能使用了父组件中的 model 中的属性进行双向绑定，此时在程序中去更新model的某个属性的值，发现子组件没有实时渲染。 原因分析 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。 解决方案 对于这种对象变化，我们有三种方法去解决： 方法一 使用Vue.set(object,key,value) Vue.set(vm.obj,"sex",
vue input进行v-model双向绑定后，在watch中监听绑定的值，当在watch中设置value值时，input内容未实时改变。
weixin_45037273的博客
12-04 3723
例如： <input type="text" v-model="value" /> watch中监听并设置value的最大长度为50，这样的写法会不生效。 watch: { value(newVal, oldVal) { if (newVal.length > 50) { newVal = newVal.slice(0, 50) this.v...
记一次 vue 页面的computed中没有监听到store中属性变化的问题
yifangshikong的博客
08-25 1428
记一次 vue 页面的computed中没有监听到store中属性变化的问题
Vue监听store中数据变化的两种方式
热门推荐
烈阳，
12-10 2万+
方式一 watch: { "$store.state.userInfo.Name":{ handler:function(newVal,oldVal){ console.log(newVal,oldVal); } } } 方式二 computed: { isEdit () { return this.$store.state.userInfo.Name;　　//需要监听的数据 } }, watch: { isEdit(newVal, oldVal)
vue数组遍历成dom后v-model的值变化watch监听不到
05-25
请问你的代码是怎样的？常见的问题可能是因为你在遍历数组时没有给每个元素一个唯一的key，导致Vue对数组的响应式处理出现问题。此外，在使用v-model时，需要将v-model绑定的值声明在data中，并且需要在定义watch时使用深度监听（deep:true）。以下是一个简单的示例代码： ```html <template> <div> <div v-for="(item, index) in items" :key="index"> <input type="text" v-model="item.value" /> </div> </div> </template> <script> export default { data() { return { items: [ { value: 'foo' }, { value: 'bar' } ] } }, watch: { items: { handler(newVal) { console.log(newVal) }, deep: true } } } </script> ``` 在这个示例代码中，我们使用v-for遍历items数组，并为每个元素绑定了一个唯一的key。在每个输入框中使用v-model绑定了每个元素的value属性。在watch中使用了深度监听，当items数组中任意一个元素的value属性变化时，都会触发handler函数。如果你的代码中还是无法监听到变化，请提供更多的代码或详细描述问题，我们一起来解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值