vue2 watch监听中调用methods方法

原创已于 2023-11-16 17:01:37 修改 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

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

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

  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

986

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

vue2的方法与监听

Wang3317866410的博客

05-27

1467

理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。* 这时this其实是methods的this，但是methods没别任何对象调用所以他的this是undefined。注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。注意：子组件不允许修改父组件传递的值，否则会破坏vue的单向数据流。定义生命周期并对起销毁，给一个show属性，为true控制开关。

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

解决Vue watch里调用方法的坑

01-18

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

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

热门推荐

pacholy的博客

12-10

1万+

直接通过watch监听对象，对象的属性值变化并不会触发这个监听，所以通过属性deep:true，可以深入监听， data:{ return { myObj:{ name: 'lily', age: 12 } } }, watch: { myObj: { handler: (val, olVal) => {

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

茂茂的博客

12-12

1122

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

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

10-18

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

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

10-18

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

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

pan_junbiao的博客

08-24

2100

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

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

10-18

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

【Vue2手录07】监听器Watch

最新发布

qq_45925548的博客

09-12

1209

本文系统梳理了Vue.js的核心概念与应用技巧，主要包括四个部分：1）计算属性与方法的区别，强调计算属性的缓存机制；2）表单绑定的实现原理与修饰符使用；3）列表渲染中v-for指令的正确用法与数据响应式处理方法；4）样式动态绑定的实现方式。文章还详细介绍了Vue监听器(watch)的两种写法（简写与完整形式）及其配置项，通过典型应用场景说明如何实现数据变化的响应处理。内容涵盖Vue开发中的关键知识点，配有清晰的语法示例和对比表格，具有实用参考价值。

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

上善若泪

11-04

1264

文章目录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

1164

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

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

u011266694的专栏

10-20

7093

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

vue项目中在watch中调用methods的方法报错

千里之行，始于足下！

12-23

2512

之前做vue项目的开发的过程中，遇到在watch中调用methods里面的方法报错问题，今天想起来记录一下 1、问题复现： <input type="text" v-model="inputValue"/> export default{ data(){ return { inputValue: '', } }, watch: { inputValue: (newValue) => { .

vue.js 关于watch

Beng_shakalaka的博客

04-11

785

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

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

九日的博客

07-01

5482

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

vue2.0学习笔记 ——methods

qq_19318067的专栏

05-02

540

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

vue2.0源码解析，Methods

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

06-13

316

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

Vue学习—选项(二)methods

倾世~茹薇

04-16

3946

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

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选项进行深入监听。