vue里的渲染以及computed的好處

如果vue里的某個methods函數執行，導致頁面重新渲染，那么所有頁面渲染相關的methods函數會重新執行以及時的渲染頁面

但是大量函數的重新沒有必要的執行會導致性能的下降，

此時如果把沒有必要再次執行的方法定義到computed里，那么這些沒有必要執行的方法就不會被渲染頁面時候執行。

只有在computed函數所依賴的數據變化時候才會被執行

並且將結果會存在緩存里，每次環境改變只會執行一次，不會像methods里的方法一樣每次遇到都執行

 <div id="app">
     <div></div>
     <p>{{num}}</p>
     <p>{{showName}}</p>
     <p>{{name}}</p>
     <button v-on:click='add'>add</button>//點擊此按鈕，add在methods里，會導致頁面被重新渲染，所有頁面需要的函數都會重新執行一遍，但computed里的函數不會執行
     <button v-on:click='changeName'>name</button>//點擊此按鈕，是否會導致頁面重新渲染？？是否會引起methods里函數執行

    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
           data:{
               name:'aaa',
               num:0
           },
           methods:{
              
               add:function(){
                   this.num ++
               },
               changeName:function(){
                   this.name = this.name+'a'
               }
           },
           computed:{
            showName:function(){
                   alert('showName執行了')
                   return this.name
               },
            
           },

        })
    </script>

 

 

 

• computed比較適合對多個變量或者對象進行處理后返回一個結果值，也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化，舉例：購物車里面的商品列表和總金額之間的關系，只要商品列表里面的商品數量發生變化，或減少或增多或刪除商品，總金額都應該發生變化。這里的這個總金額使用computed屬性來進行計算是最好的選擇