解决vue侦听器watch,调用this时出现undefined的问题

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

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

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

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

如下图:

看考链接：https://cn.vuejs.org/v2/api/#watch

PS：好吧，虽然问题可以解决，但是具体为什么不能写成箭头函数，讲实话，我现在也不懂，知道原理的可以给我评论，非常感谢。

来自yyf994的评论解答：

var app = new Vue({
   el: '#app',
   data: {
    a: 1
   },

   watch: {
    a:()=> {
     console.log(this)
    }
   },

   methods: {
    onClick() {
     this.a++;
    }
   }
  })

在babel 编译后是这样子的

"use strict";
var _this = void 0;
var app = new Vue({
 el: '#app',
 data: {
 a: 1
 },
 watch: {
 a: function a() {
  console.log(_this);
 }
 },
 methods: {
 onClick: function onClick() {
  this.a++;
 }
 }
});

因为箭头函数 的 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

补充知识：vue watch用法和没反应的原因 =>看看下面是不是还有一个watch

我就废话不多说了，大家还是直接看代码吧~

watch: {
 stop: function(newVal, old){ //非josn用法
   console.log(newVal)
  },
 'form.fdnDct': function(newVal, old){ //josn用法
   console.log(newVal)
  },
 }

 //这也是一种用法
 watch: {
  'browse_integral_info.buy':'RMB',     //购买积分转化成人民币
  'browse_integral_info.give':'GIVE',     //完成邀请浏览任务赠送
  'bargain_integral_info.give':'BARGAINGIVE',
  deep:true,
 },
 methods: {
  RMB: function(){
   this.RMBs = this.browse_integral_info.buy/100
  },
 },

以上这篇解决vue侦听器watch,调用this时出现undefined的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js使用watch监听路由变化的方法

    vue.js使用watch监听路由变化的方法

    watch除了可以监听数据的变化,路由的变化也能被其监听到 效果如下: 具体代码 当路由发生变化后,在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎进入登录页面'); } if (newVal === '/registe

  • 详解Vue中watch对象内属性的方法

    vue提供了watch方法,用于监听实例内data数据的变化.通常写法是: new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } } }) 上述情况里data中的count属性可以直接监听,但是如果需要监听的数据是对象内

  • 详解Vue中watch的详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: ''' <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } }) ''' 直接写一个监听处理函数,当每次监听到

  • 解决vue侦听器watch,调用this时出现undefined的问题

    watch侦听器中,我们要将新的值赋给this.a出错 watch: { value: (newV, oldV) => { this.a = newV; } } 这里报错undefined,这里错误的原因是不能写成箭头函数.写成箭头函数后,this会取上下文,而不是组件里面的this了,正确写法为: watch: { value: function(newV, oldV) { this.a = newV; } } 如下图: 看考链接:https://cn.vuejs.org/v2/api/#wa

  • vue中计算属性computed理解说明包括vue侦听器,缓存与computed的区别

    一.计算属性(computed) 1.vue computed 说明 当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护 computed主要的作用: 分离逻辑(模板和数据分离) 缓存值 双向绑定(getter,setter) 2.语法格式 格式 computed:{ [key:

  • Vue.js中关于侦听器（watch）的高级用法示例

    Vue侦听器watch 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的.例如: <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> &l

  • Vue基础之侦听器详解

    目录 vue中什么是侦听器 侦听器的用法 vue侦听器-watch vue侦听器-深度侦听和立即执行 总结 vue中什么是侦听器 开发中我们在data返回的对象中定义了数据,这个数据可以通过插值语法等方式绑定到templat中. 当数据变化的时候,template里绑定的数据会自动进行更新来显示最新的数据.但是这种变化是在template中自动侦听data的值来进行变换的 在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这个时候就需要用到侦听器watch了 官方定义:Vue 通过 watc

  • Vue中侦听器的基本用法示例

    目录 前言 一.侦听器的基本用法 二.侦听器的格式 三.实现刚进入页面就触发监听和深度监听 深度监听 深度监听返回侦听对象子属性的值 最后 前言 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 一.侦听器的基本用法 <div id="demo">{{ fullName }}</div> var vm = new Vue({ el: '#demo', data: { fir

  • 老生常谈Vue中的侦听器watch

    老生常谈Vue中的侦听器watch

    目录 一.侦听器watch 1.1.初识侦听器watch 1.2.Vue的data的watch 1.3.Vue的watch侦听选项 一.侦听器watch (思维导图不太完善,因为是按照自己看懂的方式记的,如有错误,还请指正) 1.1.初识侦听器watch watch:观看,监视 那么什么是侦听器watch呢 开发中我们在data返回的对象中定义了数据,这个数据通过插值语法等方式绑定到template中: 当数据变化时,template会自动进行更新来显示最新的数据: 但是在某些情况下,我们希望在

  • 详解Vue3 中的计算属性及侦听器

    目录 计算属性 缓存 getter 和 setter 侦听器 配置选项 其它写法 计算属性 我们知道,在模板中可以直接通过插值语法显示一些data中的数据,但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示 在模板中使用表达式,可以非常方便的实现,但是设计它们的初衷是用于简单的运算,在模板中放入太多的逻辑会让模板过重和难以维护,并且如果多个地方都使用到,那么会有大量重复的代码 所以我们希望将业务逻辑和UI界面进行分离,其中一种方式就是将逻辑抽取到一个met

  • Vue3侦听器的实现原理详情

    Vue3侦听器的实现原理详情

    目录 侦听响应式对象 侦听属性值 侦听获取新值和旧值 实现效果 前言: 本篇内容基于Vue3计算属性是如何实现的实现. 侦听响应式对象 前面我们聊到计算属性,它可以自动计算并缓存响应式数据的值.而如果我们仅需要在响应式数据变化时,执行一些预设的操作,就可以使用watch侦听器.我们还是先来实现一个最简单的例子,然后来一点一点扩充它. const data = {foo: 1} const obj = reactive(data) watch(obj, () => { console.log('o

  • 深入浅析Vue.js计算属性和侦听器

    一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于

  • Vue 2.0 侦听器 watch属性代码详解

    用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的表达式(函数),还可以是一个对象,可以包含如下几个属性: handler        ;对应的函数                          ;可以带两个参数,分别是新的值

随机推荐