首页 > 技术文章 > methods下的死循环

shiyuzuxia 2018-08-24 16:19 原文

使用Vue框架时,data里的数据的改变会导致整个页面刷新一遍。

<div id = "app">
<div>{{num}}</div>
<div>{{getFullName()}}</div>
<button v-on:click = "num++">add</button>
</div>
<script type="text/javascript">
var a = new Vue({
el:"#app",
data:{
num:0,
firstName:"san",
lastName:"zhang",
},
methods:{
getFullName:function(){
alert('我执行了 getFullName');
return this.firstName+""+this.lastName;
},

}

})

点击按钮,num的改变会导致整个页面重新刷新,就会执行getFullName函数。但是我们只是想改变num的值,并不希望执行getFullName函数,并不希望引起整个页面的刷新,

这时,可以使用computed属性。

变量的改变导致页面的重新刷新还会造成死循环:

<div id = "app">
<div>{{addtest()}}</div>
</div>
<script type="text/javascript">
var a = new Vue({
el:"#app",
data:{
test:1,
},
methods:{

addtest:function(){
alert('我执行了 addtest');
this.test = this.test + 1 ;
return this.test;
  }
}
})
</script>

当执行到<div>{{addtest()}}</div> 时,会执行addtest函数,addtest函数的执行会导致变量test的改变,就会重新刷新页面,重新刷新页面又会导致函数的执行。

页面刷新--》函数执行,变量改变--》页面刷新.........

若把<div>{{addtest()}}</div>改成<div>{{addtest}}</div>则不会出现死循环。

 

推荐阅读