[TOC] ## 1.計算屬性 >[danger]計算屬性有個緩存機制,當它計算的值不發生改變時,計算屬性不會再次觸發。 ~~~ <div id="app"> <div>{{sum}}</div> </div> ~~~ ~~~ new Vue({ el:"#app", data:{ num1:1, num2:2 }, /* 計算屬性 */ computed:{ sum(){ return this.num1+this.num2 } } }) ~~~ ## 2.方法 ~~~ <div id="app"> <div>{{sum()}}</div> </div> <script> var vm =new Vue({ el:"#app", data:{ num1:1, num2:2 }, methods:{ sum:function(){ return this.num1+this.num2 } } }) </script> ~~~ ## 3.watch偵聽器 ~~~ <div id="app"> <div>{{sum}}</div> </div> ~~~ ~~~ var vm =new Vue({ el:"#app", data:{ num1:1, num2:2, sum:3 }, watch:{ /* 偵聽num1的改變 */ num1:function(){ this.sum = this.num1+this.num2 } } }) ~~~