vue|vue watch内部调用methods方法报错的解决方案
目录
- watch内部调用methods方法报错
- 例子
- 错误原因
- 理解methods,computed,watch的调用时机
- 1.methods中定义的函数
- 2.computed中定义的函数
- 3.watch中定义的方法
watch内部调用methods方法报错 错误例子还原
例子
错误原因
【vue|vue watch内部调用methods方法报错的解决方案】在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中定义的函数都会执行,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); }}})
{{num}}
{{getNum()}}
上面的理解,来源于代码运行情况的测试和总结,或有不周到之处,还望读者见谅。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
推荐阅读
- Vue子组件监听父组件值的变化
- DOM——创建节点及节点属性与内部插入append()和appendTo()
- Vue路由切换 & Axios接口取消重复请求
- Android AsyncTask内部线程池异步执行任务机制简要分析
- Kotlin嵌套类和内部类
- inwatch pi自动选择手表技巧:魅族inwatch pi技巧
- inwatch pi技巧有哪些?魅族inwatch pi技巧
- inwatch pi评测视频:魅族inwatch pi上手评测
- inwatch pi怎样看时间?inwatch pi显示时间办法
- Kotlin Android读写内部存储