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>上面的理解，来源于代码运行情况的测试和总结，或有不周到之处，还望读者见谅。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。