<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属性来进行计算是最好的选择