vue2 watch监听中调用methods方法

xl__qd

已于 2023-11-16 17:01:37 修改

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js

于 2022-11-12 14:26:25 首次发布

本文链接：https://blog.youkuaiyun.com/lcc2001/article/details/127819965

本文对比了Vue中正确与错误的watch语法，重点讲解了在Vuex中使用watch时如何正确设置handler。通过实例展示了如何调用store的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  watch: {
    '$store.state.fold': {
      handler() {
        this.wheel()
      },
    },
  },

上面是正确写法，可以调用成功

这个是错误写法

  watch: {
    '$store.state.fold': {
      handler:()=> {
        this.wheel()
      },
    },
  },



  watch: {
    '$store.state.fold': {
      handler:function() {
        this.wheel()
      },
    },
  },

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xl__qd

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

侦听器watch及其和计算属性、methods方法的总结

qq_53841687的博客

07-30

962

!计算属性方法侦听器watch年龄age{{age}}el"#app","zhang","san",age18,}},{console.log("调用了fullName2,使用了一次方法")}},{console.log("调用了fullName,计算了一次属性")}},watch{初始化缓存功能https。

Vue的计算属性：methods方法、computed计算属性、watch监听属性

pan_junbiao的博客

08-24

1979

在创建的 Vue 应用程序实例中，可以通过methods 选项定义方法。应用程序实例本身会代理methods 选项中的所有方法，因此可以像访问 data 数据那样来调用方法。通过计算属性可以实现各种复杂的逻辑，包括运算、函数调用等，只要最后返回一个计算结果就可以。当计算属性依赖的数据发生变化时，计算属性的值会自动更新，所有依赖该计算属性的数据绑定也会同步进行更新。

参与评论您还未登录，请先登录后发表或查看评论

vue之watch监听对象，以及watch内调用methods方法

最新发布

silverclayz的技术分享

05-15

1013

深入学习vue源码，老曹带你彻底搞懂methods方法底层实现逻辑与原理

vue中watch函数调用methods中的方法

茂茂的博客

12-12

1083

我们在开发中难免会遇见监听某个值的场景，这时候就要用到咱们vue中的watch，然后咱们在watch里面监听后对应不同的逻辑调用不同的处理方法。那么咱们这里正确的做法是不要使用箭头函数，使用普通的function函数。说是咱们调用的这个getEqLists方法未定义。这样的话，就可以成功调用了。这时候浏览器就报错了。

vuejs基础之监听watch，computed，methods事件

上善若泪

11-04

1114

文章目录1 使用键盘监听2 使用监听事件2.1 watch监听2.1.1 监听属性2.1.2 监听路由2.2 computed监听3 watch,computed和methods三种对比需求分析：假如有两个姓名框，需要他们拼接成全名字怎么监听到文本框数据的改变，这样才能知道什么时候去拼接出一个全名如何监听到文本框的数据改变呢 1 使用键盘监听主要是使用了键盘的监听事件即method的方法事件页面部分代码 <div id="app"> <input type="te

vue watch(监听) method(方法) computed(计算)

zhaojikun521521的博客

02-16

1137

watch(监听)与computed(计算)都使用缓存，当监听或者计算的对象有变化的时候才会重新计算，但相对于语法简洁性来说，推荐使用computed(计算)。与method(方法)对比来说，前两者使用缓存机制，加载速度快，不推荐使用。 ...

vue中的watch监听数据变化及watch中各属性的详解

10-18

2. 方法名字符串：如果你希望调用methods中定义的方法，可以将方法名作为字符串赋值给watch。这样做可以使得watch的书写更加简洁，但是必须确保在methods对象中有对应的函数定义。例如，watch: { data: 'changeData'...

解决Vue2.0 watch对象属性变化监听不到的问题

10-18

在Vue2.0开发过程中，开发者可能会遇到一个常见的问题，即在使用watch来监听组件数据对象中属性变化时，如果对象的属性是动态添加或删除的，那么普通的watch监听可能无法捕捉到这些变化。针对这一问题，本文将会详细...

Vue2 监听属性改变watch的实例代码

10-18

Vue2中的watch属性正好提供了这样的机制，可以用来监听数据的变化，并在数据变化时执行某些逻辑。本实例代码主要展示了如何在Vue2中监听组件内一个对象属性的变化，并根据变化情况执行相应的逻辑。具体到代码中，...

实战篇：（十八） Vue2 中的 watch 使用：数组与对象监听的技巧与陷阱

一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。

10-24

3929

在 Vue2 项目开发中，`watch` 是一个强大的特性，用于观察数据的变化并在变化时执行相应的回调。然而，在处理数组、对象以及嵌套数据结构时，很多开发者会遇到一些问题。本文将探讨 `watch` 的使用情况、常见问题及其解决办法，以帮助你更好地利用这一特性。

解决Vue watch里调用方法的坑

01-18

这里是说watch调用methods里方法的时候，页面经常会报找不到方法这个时候一定要在watch里去输出一下this，看看this包裹的壳是不是多了好多层，所以找不到方法，虽然我到现在还没理解为啥有时候会出现一层或几层壳的问题。例如正常情况下用this.functionname()就可以调用了。但是在一些情况下（现在本人还没找到原因）在控制台输出this的时候你会发现数据经常是这样包裹的a{name},name里面对你的methods还包裹了一层，所以使用方法的时候就会变成 this.a.methods.funtionname() 原因还在找，不过解决办法先记下来。补充知识：使用

前端框架Vue中methods,computed,watch的调用时机的理解

u011266694的专栏

10-20

7061

最近在学Vue框架的时候对methods,computed不甚理解，看了几篇别人写的博客感觉描述的也很模糊，故而在稍微明白他们之间主要差异的时候，写篇博客记录分享一下。 methods中定义的函数，其调用时机是：当页面引用了vue data关键字的属性，并且这些属性发生改变的时候，就会执行methods中定义的函数，并且不管methods中定义的函数是否依赖了data关键字中的属性，metho...

vue.js 关于watch

Beng_shakalaka的博客

04-11

765

watch：观测Vue实例上的数据变动，对应一个对象，键：就是需要监测的那个东西，值： 1.可以是当键变化时执行的函数，有两个参数，第一个是变化前的值，第二个是变化后的值。 2.可以是函数名，得用单引号包裹。 3.可以是一个对象，这个对象有三个选项：（1）handler ：一个回调函数，监听到变化时应该执行的函数。（2）deep ：boolean值，是否深度监

vue关于watch和methods值执行顺序问题，以及解决方案

九日的博客

07-01

5366

问题父组件： <GroupTransform :is-show.sync="selectPeopleDialogVisible" @callback="getSelectedPeople" ></GroupTransform> watch: { selectGroupRight: { handler(val) { }, deep:

vue2.0学习笔记 ——methods

qq_19318067的专栏

05-02

522

选项 methods 21 选项 methods {{a}} +--> +--> 外部访问构造器里的事件 ..

vue2.0源码解析，Methods

柯闪电，一位前端小白的博客。

06-13

299

安定针 Methods部分的源码很简单，简单到什么程度，需要看的代码行数不超过20行。妈妈再也不用担心我的学习，芜湖起飞！代码以上基本就是全部的代码（其余可以忽略），在利用bind固定了作用域，使其每次触发，都保持着同一个上下文this，而对于低版本浏览器，使用polyfillBind方法兼容，以下是可以使用Function.prototype.bind()的浏览器版本如图所示，低版本ie浏览器不支持此方法，而兼容的polyfillBind方法，利用闭包保存上下文（ctx参数），灵活运用ap

Vue学习—选项(二)methods

倾世~茹薇

04-16

3916

1. methods 将被混入到 Vue 实例中。可以直接通过 app实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。不应该使用箭头函数来定义 method 函数 (例如 plus: () =>this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。2....

Vue.js中computed、methods、watch的使用

soos的博客

01-17

1181

1、computed计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例，在HTML DOM加载后马上执行的，如赋值,它是依赖缓存的，当相关依赖发生变化时才会重新取值。 2、methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例，必须

vue2watch中调用方法

09-14

在Vue.js中，可以使用watch选项来监听数据的变化并执行相应的方法。当数据发生变化时，watch会自动调用指定的处理函数。在上述引用中，watch中的handler函数可以调用methods对象中的getList方法。在这个例子中，当myObjNew属性发生变化时，handler函数会被触发，并执行getList方法。通过这种方式，我们可以在watch中调用methods里的方法。在引用中提到，有时候在watch中调用methods的方法时可能会出现找不到方法的问题。为了解决这个问题，可以在watch中输出this对象，查看其层级结构是否正确。如果发现多层嵌套导致方法找不到，可以按照正确的层级结构去调用方法。在引用中提到，直接通过watch监听对象的属性值变化并不会触发监听。为了深入监听对象的属性变化，可以使用deep选项设置为true。当deep选项为true时，watch会递归监听对象的所有属性，从而实现对属性值变化的监听。综上所述，在Vue.js中，可以通过watch选项来监听数据的变化，并在相应的处理函数中调用methods中的方法。需要注意的是，如果出现方法找不到的问题，要检查this对象的层级结构是否正确，并可以使用deep选项进行深入监听。