解决Vue watch里调用方法的坑
这里是说watch调用methods里方法的时候，页面经常会报找不到方法
这个时候一定要在watch里去输出一下this，
看看this包裹的壳是不是多了好多层，所以找不到方法，虽然我到现在还没理解为啥有时候会出现一层或几层壳的问题。
例如
正常情况下用this.functionname()就可以调用了。
但是在一些情况下（现在本人还没找到原因）在控制台输出this的时候你会发现数据经常是这样包裹的a{name},name里面对你的methods还包裹了一层，所以使用方法的时候就会变成this.a.methods.funtionname()
原因还在找，不过解决办法先记下来。
补充知识：使用Vue的最佳做法---不要在“created”和“watch”中调用方法
我就废话不多说了，大家还是直接看代码吧~
watch:{
params:{
handler:function(val,oldVal){
if(val=='1'){
this.initTableData()
}
},
deep:true
},
property:{
immediate:true,
handler:function(val,oldVal){
this.initTableData()
},
},
},
Vue开发人员经常犯的一个错误是他们不必要地在created和watch中调用方法。其背后的想法是，我们希望在组件初始化后立即运行watch。
//不好的做法created:(){this.handleChange()},methods:{handleChange(){//stuffhappens}},watch(){property(){this.handleChange()}}
但是，Vue为此提供了内置的解决方案，这是我们经常忘记的Vuewatch属性。
我们要做的就是稍微重组watch并声明两个属性：
1.handler(newVal,oldVal)-这是我们的watch方法本身。
2.immediate:true-代表如果在wacth里声明了之后，就会立即先去执行里面的handler方法，如果为false就跟我们以前的效果一样，不会在绑定的时候就执行
//好的做法
methods:{
handleChange(){
//stuffhappens
}
},
watch(){
property{
immediate:true
handler(){
this.handleChange()
}
}
}
以上这篇解决Vuewatch里调用方法的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。