vue watch内部调用methods方法报错的解决方案

目录
  • watch内部调用methods方法报错
    • 例子
    • 错误原因
  • 理解methods,computed,watch的调用时机
    • 1.methods中定义的函数
    • 2.computed中定义的函数
    • 3.watch中定义的方法

watch内部调用methods方法报错

错误例子还原

例子

<script>
	export default{
		data(){
			return {
				data: 1,
			}
		},
		watch: {
			data: (newV, oldV) => {
				this.printf() // 此处调用会出现 undefined
			}
		},
		methods: {
			printf(){
				console.log("111111")
			}
		}
	}
</script>

错误原因

在vue的Watch监听器要注意一点，那就是watch的内部的监听方法，一定一定不要使用箭头表达式，正确的写法应该是

watch: {
    data: function(newV, oldV){
        this.printf
    }
}

关于watch使用方式的vue官方链接

理解methods,computed,watch的调用时机

最近在学Vue框架的 时候对methods,computed不甚理解，看了几篇别人写的博客感觉描述的也很模糊，故而在稍微明白他们之间主要差异的时候，写文章记录下。

1.methods中定义的函数

其调用时机是：当页面引用了vue data关键字的属性，并且这些属性发生改变的时候，就会执行methods中定义的函数，并且不管methods中定义的函数是否依赖了data关键字中的属性，methods中定义的函数都会被执行。methods中定义的函数能像普通函数那样，当主动调用methods中定义的函数的时候，这些函数每次调用都会执行。

2.computed中定义的函数

在computed中定义的函数的调用时机是：当页面引用了vue data关键字的属性，并且这些属性发生改变的时候，如果computed中定义的函数也依赖了这些改变的属性，那么computed中定义的函数才会被执行。

也就是computed中定义的函数被Vue框架回调的条件是

  • 1.函数内依赖了vue的属性
  • 2.这些属性发生了改变
  • 3.这些属性被页面引用

这三个条件同时满足，才会触发computed中定义的某个函数的回调。而且和methods定义的函数，其调用语法也是不一样的，computed中定义的函数，调用的时候后面不能有小括号，类似属性的调用。

并不是每次主动调用computed中定义的函数都会执行，computed中定义的函数即使是主动调用，其是否会执行也和内部的依赖属性是否发生改变有关。

3.watch中定义的方法

是用来监听某个属性发生变化的时候，触发回调。在watch中定义方法的时候，方法的键必须是vue中已经定义的属性。

new Vue({
  el: "#app",
  data: {
   num: 1,
   num2: 2,
   value3: 88
   
  },
  methods: {
     getNum:function(){ //每次更新页面的时候就会执行
           alert("methods");
           return "现在的num：";
     }
  },
   computed: {
      getNum2:function(){ //第一次执行，后面当依赖的属性发生改变的时候执行
      alert("computed");
        return "num2："+ this.num2;
     }
  },
  watch: {
   value3: function(value){  //value3是已经在data中定义的属性，value是该属性发生改变的时候的值
    alert(" 现在的value："+ value);
   }
  }
})
<div id="app">
<p>{{num}}</p>
<p>{{getNum()}}</p>
<button v-on:click="num++">Num++</button>
<button v-on:click="num--">Num--</button>
<button v-on:click="num2++">Num2++</button>
<button v-on:click="value3++">value3++</button>
</div>

上面的理解，来源于代码运行情况的测试和总结，或有不周到之处，还望读者见谅。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue watch数据的方法被调用了两次的问题

    背景: 路由结构/video/1.mp4,即/video是父路由,/1.mp4是/video的动态子路由,在/video父路由中会通过url的params获取视频信息,即通过/1.mp4获取对应的视频完整信息,然后通过props传到动态子路由中,然后子路由通过接受到的视频对象,进行展示 问题: 当路由切换时,即当我点击其他视频时,导致动态子路由变化时,我监听了/video父路由的变化并重新根据url的params获取视频对象,并自动通过props传入子路由中,我在子路由中通过watch 视频对象

  • 解决Vue watch里调用方法的坑

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

  • vue 中使用 watch 出现了如下的报错的原因分析

    报错: Method "watch" has type "object" in the component definition. Did you reference the function Method "watch" has type "object" in the component definition. Did you reference the function correctly? 原因: watch 是一个对

  • vue watch内部调用methods方法报错的解决方案

    目录 watch内部调用methods方法报错 例子 错误原因 理解methods,computed,watch的调用时机 1.methods中定义的函数 2.computed中定义的函数 3.watch中定义的方法 watch内部调用methods方法报错 错误例子还原 例子 <script> export default{ data(){ return { data: 1, } }, watch: { data: (newV, oldV) => { this.printf() //

  • vue父组件调用子组件方法报错问题及解决

    目录 vue父组件调用子组件方法报错 vue父组件调用子组件方法及遇到的问题 vue父组件调用子组件方法报错 在父组件定义了一个tab标签页,每一个标签页下面都调用不同的组件, 如下图所示: 子组件中定义的方法: setup() { const getList = () =>{ const date = moment(new Date()).format('YYYY-MM') loading.value = true apiGetPageList({ salaryDate: date, page

  • Java replaceAll()方法报错Illegal group reference的解决办法

    前言 replaceAll(regex, replacement)函数,由于第一个参数支持正则表达式,replacement中出现"$",会按照$1$2的分组模式进行匹配. 当编译器发现"$"后跟的不是整数的时候,就会抛出"非法的组引用"的异常. 例如,如下代码会报错: public class Test { public static void main(String[] args) { String str = "123ABC456

  • spring在service层的方法报错事务不会回滚的解决

    目录 spring在service层方法报错事务不会回滚 解决方法 service手动回滚问题 spring在service层方法报错事务不会回滚 @Transactional(rollbackFor = {Exception.class}) public void insertData() throws Exception {     // 业务代码1     business1();          // 业务代码2     business2();          // 业务代码3  

  • Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)

    目录 1.git下载源码运行打包dist 2.将dist文件引入项目 3.应用 4.常见报错 1.git下载源码运行打包dist git 源码地址:https://github.com/mengshukeji/Luckysheet 下载好源码之后执行 npm install npm install gulp -g //跑去源码看看正常与否 npm run dev //如果正常执行打包 npm run build 打包结束后在目录下找到 dist 文件 2.将dist文件引入项目 将dist离线包

  • jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法

    废话不多说了,直接给大家贴代码了. jQuery(function ($) { // 备份jquery的ajax方法 var _ajax = $.ajax; // 重写ajax方法,先判断登录在执行success函数 $.ajax = function (opt) { var _success = opt && opt.success || function (a, b) { }; var _opt = $.extend(opt, { success: function (data, te

  • 深入dom4j使用selectSingleNode方法报错分析

    我有一段代码,使用dom4j 正则表达式解析gml , 代码如下:List<Element> featureMembers= root.selectNodes("featureMember");发生以下异常:java.lang.NoClassDefFoundError: org/jaxen/JaxenException    at org.dom4j.DocumentFactory.createXPath(DocumentFactory.java:230)    at or

  • vue项目中Eslint校验代码报错的解决方案

    vue项目中Eslint校验代码报错的解决方案

    目录 vue Eslint校验代码报错 1.空格缩进,不让使用tab 2.未使用的变量报错 3.分号和引号问题 vue使用Eslint报错 解决办法很简单 vue Eslint校验代码报错 在使用脚手架创建Vue项目时,一般会安装Eslint插件,这个主要是校验代码格式和规范用的,但是它很有点让人抓狂,因为很多校验规则和代码规范,你只要不按照它的格式来,直接导致项目编译报错,运行不了项目,这个是非常令人讨厌的. 它不像idea里安装alibaba插件,校验代码规范只是会提示,并不会导致你项目都不

  • Vue父组件调用子组件事件方法

    Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }, methods { callMethod () { con

  • vue 父组件调用子组件方法及事件

    情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块: 设想思路:点击父组件中的按钮触发子组件中上传方法: 子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法 子组件中处理上传的方法: fileClick(index) { c

随机推荐