[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> ~~~