methods下的死循环

使用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>则不会出现死循环。

 

转载于:https://www.cnblogs.com/shiyuzuxia/p/9530551.html