Vue中侦听器watch时，调用this时出现undefined问题

最新推荐文章于 2024-03-15 21:49:18 发布
最新推荐文章于 2024-03-15 21:49:18 发布
阅读量967 收藏 3
点赞数 1
分类专栏： 项目中碰到的一些bug和特殊情况 vue 文章标签： vue javascript 前端
Edited by Boale_H （博哥的二进制世界）
本文链接：https://blog.csdn.net/Boale_H/article/details/115082982
版权
本文详细解释了在Vue组件的watch监听器中，使用箭头函数导致this指向错误的问题。通过实例展示了为何不能使用箭头函数，并提供了正确的函数写法，确保this指向组件实例，从而能够正确地更新组件状态。
摘要由CSDN通过智能技术生成

watch侦听器中，我们要将新的值赋给this.a出错

watch: {
	value: (newV, oldV) => {
	this.a = newV;
	}
}

这里报错undefined，这里错误的原因是不能写成箭头函数。写成箭头函数后，this会取上下文，而不是组件里面的this了，正确写法为：

watch: {
	value: function(newV, oldV) {
	this.a = newV;
	}
}

如下图:
在这里插入图片描述

Boale_H
关注
专栏目录
踩坑：vue-router使用全局守卫时$router.push返回undefined
Yuki_Aruki的博客
06-28 2163
在写项目的登陆页面时，需要用到全局守卫：router.beforeEach 最初写的代码大致如下： 使用$router.push()时抛出错误undefined，看了很多大佬们的解决方法，但是应该都不太适配这个问题 既然只有配置守卫后才出现undefined，那大致是守卫改变了$router本身的指针，使得无法调用（this的位置不对）这里使用了一个图方便的方法，不对login界面进行守卫监听，因此在login页面进行push后会直接进行跳转，不再受router.beforeEach的影响，代码如下：...
源码分析vue watch侦听器
Jiuto_crx的博客
03-27 262
源码分析vue watch侦听器 在阅读侦听器源码之前，建议先看一下响应式相关的源码源码分析vue响应式原理，有助理解。 侦听器的几种用法 <div id="app"> <input v-model="text1"> <input v-model="text2"> <input v-model="text3.val"> <input v-model="text4.val"> </div> var v
vue对象变量中属性undefined时，watch监测不到变化
唯爱浅浅waqq914的博客
03-05 1116
问题： 父组件传递的对象中属性值初始值为undefined，子组件watch监测不到该对象变化。 原因： 受ES5的限制，Vue.js不能检测到对象属性的添加或删除 解决办法： 通过Object.assign()重新创建一个对象，例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) ...
watch监听发现事件并没有执行报undefined
weixin_46627814的博客
02-13 422
解决vue3在watch内调用事件找不到
使用vue路由信息对象$router时router.js中包含此路由却出现This page could not be found
Bab的博客
12-03 9225
引起此问题的原因是路由路径不正确引起(例如this.$router.push({ path: '/pay/' + this.order.orderNo })的pay前面少了"/")，虽然浏览器的地址栏中显示正常，但是本次使用的是nuxtjs，好似被它解析忽略。
详解Vue的watch中的immediate与watch是什么意思
10-15
在Vue实例中，我们可以在watch对象中定义一个或多个侦听器，当指定的数据源发生变化时，对应的函数就会被自动调用。例如，我们有以下的watch用法： ```javascript new Vue({ data: { question: '', answer: 'I ...
vue 中 methods、computed、watch
Rêve
08-05 660
是 vue 的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新，一般情况下，computed 默认使用的是 getter 属性。大部分下 watch 和 computed 是没有区别的，但是如果在数据变化的同时进行异步操作的情况下，watch 则是最好的选择。计算属性，属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。侦听属性，可以看作是 methods 和 computed 的结合。watch 在监听的时候，可以有二次参数，第一次参数为。属性给 Vue 定义方法。.
vue3学习教程第六节（vue3 中 computed watch watchEffect）
最新发布
weixin_39593730的博客
03-15 665
vue 项目中 computed() 、watch() 、watchEffect()的使用以及注意事项
Vue基础：计算属性 与 侦听器
林夏天的博客
04-20 300
（一）计算属性computed 对于任何复杂逻辑，你都应当使用计算属性。 1. 基本使用 **计算属性是基于它们的响应式依赖进行缓存的。**只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要依赖数据没有发生改变，computed将从缓存中获取之前的计算结果，而不必再次执行函数。 例子： <div id="example"> <p>Original messag...
watch '$route'(to,from)无效
小萌新 Z H彪
03-09 73
watch '$route'(to,from)无效 组件代码： watch:{ '$route' (to, from) { // 对路由变化作出响应... console.log(to) } }, 路由配置: { path:'/user/:id', name:'User', component:() => imp...
watch ‘$route‘(to,from)无效 解决方法
u010227042的博客
08-12 5004
组件代码： watch:{ '$route' (to, from) { // 对路由变化作出响应... console.log(to) } }, 路由配置: { path:'/user/:id', name:'User', component:() => import ('../views/User'), children:[ ] }, user 组件我让其成为异步组件，是想实现...
Vue中路由监听无法生效
站在顶峰看星星
05-14 3384
需求： 点击编辑按钮，跳转到编辑页面，编辑好信息后，点击保存，返回到列表页面，并且显示原来高亮的选项卡，而且列表页数据更新。 问题： 在编辑页面是通过路由接受传来的id，当前选中的选项卡activeName，然后通过id查询数据，回显到表单中，但是通过路由传过来的参数，在刷新页面时，路由传传过来的参数会丢失掉； 在编辑页面点击保存后，跳转到列表页时，要实现页面刷新，并且选项卡高亮应在上一次编辑对应的位置，我采用的方案是路由监听，但是当路由发生变化后，就刷新页面，也就是重新请求数据，但是我见听了路由
watch监听路由信息
qq_40860137的博客
06-27 3675
①在watch函数中监听$route ②to表示将当前所在路由信息, from表示从哪跳转到路由信息
事件监听器中this指代问题
lj1934197878的博客
11-26 1621
我们都知道，事件监听器中的this指代当前元素，换句话说，谁"点"的，就指谁；单一情况好理解，但是，当遇到原型链中的this时，我们有时候就会反应不过来。 今天写百度前端技术学院的题时，就遇到了这样一个问题，于是把它记下来，免得以后忘记。 首先定义了一个Square函数，代码如下： function Square(x, y, dom) { this.x = x; this....
this.$route.query.pid获取为undefined
Daylight629博客
04-15 676
this.$route.query.pid获取为undefined 注意自己有没有写错
vue报错之this.$router is undefine
热门推荐
liuarmyliu的博客
04-29 1万+
vue报错之this.$router is undefine 最近写项目遇到这个报错，特此记录一下 axios.get('/person/ticket') .then(response => { this.$router.push('/ground') }) 原因很简单，因为我使用的是箭头函数，改变了this指向，所以vue在这里找不到$ro...
this.$route.query里的对象属性打印显示undfined
m0_50981596的博客
07-18 655
this.$route.query里的对象属性打印显示undfined
this和this.$router这个方法在setup()里使用竟然是undefined----使用composition-api踩到的坑总结篇
qq_33653393的博客
05-25 1781
vue的版本是2，使用插件composition-api尝试组合式api 1. this和this.$router这个方法在setup()里直接使用竟然是undefined 我是这么写的 setup() { console.log(this)//undefined console.log(this.$router)//error } 控制台告诉我显然有问题，但是我在另一个完成的vue页面里在setup()的方法里使用了this.$router，发现可以正常使用 setup() {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值