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

更新时间：2022年04月11日 15:26:24 作者：一名假人

这篇文章主要介绍了vue watch内部调用methods方法报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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>

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

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

您可能感兴趣的文章:

vue 鼠标移入移出(hover)切换显示图片问题
这篇文章主要介绍了vue 鼠标移入移出(hover)切换显示图片问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
详解Vue3.0中ElementPlus<input输入框自动获取焦点>
这篇文章主要给大家介绍了关于Vue3.0中ElementPlus<input输入框自动获取焦点>的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3.0具有一定的参考学习价值,需要的朋友可以参考下
2023-04-04
详解Vue-cli代理解决跨域问题
本篇文章主要介绍了Vue-cli代理解决跨域问题，详细的介绍了Vue如何设置代理，具有一定参考价值，有兴趣的可以了解一下
2017-09-09
详解vue数组遍历方法forEach和map的原理解析和实际应用
这篇文章主要介绍了详解vue数组遍历方法forEach和map的原理解析和实际应用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
Vue如何使用百度地图自定义信息窗口InfoWindow的样式
这篇文章主要介绍了Vue如何使用百度地图自定义信息窗口InfoWindow的样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
如何使用Vue3+Vite+TS快速搭建一套实用的脚手架
Vite是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具,下面这篇文章主要给大家介绍了关于如何使用Vue3+Vite+TS快速搭建一套实用脚手架的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
vue perfect-scrollbar(特定框架里使用非该框架定制库/插件)
这篇文章主要为大家介绍了vue perfect-scrollbar在特定框架里使用一款并非为该框架定制的库/插件如何实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
2023-05-05
Vue 如何向集合的头部添加元素
在 Vue 中,如果要向集合的头部添加元素,可以使用 JavaScript 的 unshift 方法或 Vue 的 $set 方法,本文给大家介绍Vue 向集合的头部添加元素的方法,感兴趣的朋友一起看看吧
2023-12-12
Vue3实现转盘抽奖效果的示例详解
这篇文章主要为大家详细介绍了如何通过Vue3实现简单的转盘抽奖效果,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的可以了解一下
2023-10-10
Vue中watch和methods两种属性的作用
这篇文章主要介绍了Vue中watch和methods两种属性的作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-02-02