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