亲宝软件园·资讯

展开

watch内部调用methods报错

一名假人 人气:0

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框架回调的条件是

这三个条件同时满足,才会触发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>

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

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

加载全部内容

相关教程
猜你喜欢
用户评论