vue中计算属性和方法的区别，演示代码

第一个，使用计算属性，来修改数据

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<div id="example">      <p>{{ now }}"</p>      <p>{{msg}}</p>    </div>         <script>      //  在控制台，使用vm.msg=2,修改msg的时候，时间不会发生变化    var vm = new Vue({      el: '#example',      data: {        msg: 'Hello'      },      computed: {        now: function () {          return Date.now()        }      }    })    </script>

　第二种，使用方法来修改数据

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<div id="example">        <p>{{ now() }}"</p>        <p>{{msg}}</p>      </div>             <script>        //   在控制台，使用vm.msg=2,修改msg的时候，时间发生了变化      var vm = new Vue({        el: '#example',        data:{            msg:"你好"        },        methods: {          now: function () {            return Date.now()          }        }      })      </script>

　　区别和联系

• 两者的执行结果是完全相同的
• 计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数
• 每次触发重新渲染时，调用方法将总会再次执行函数
• 上方两个例子，计算属性将总会返回相同值，而方法则不会

　　另一个例子

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<div id="example">     <p>{{msg}}</p>     <p>{{ reversedMessage()}}"</p>     <hr>     {{ceshi}} </div>   <script>     //   在控制台，使用vm.ceshi="修改",修改ceshi的时候，计算属性中的函数，没有执行     var vm = new Vue({         el: '#example',         data: {             msg: 'Hello',             ceshi:"测试"         },         // computed: {         //     // 计算属性的 getter         //     reversedMessage: function () {         //         // `this` 指向 vm 实例         //         console.log("计算属性执行了")         //         return this.msg.split('').reverse().join('')         //     }         // },          //   在控制台，使用vm.ceshi="修改",修改ceshi的时候，方法中的函数，都会执行         methods: {             reversedMessage: function () {                 console.log("方法执行了")                 return this.msg.split('').reverse().join('')             }         }     }) </script>

　　再总结：计算属性中的函数，只有在依赖改变的时候，才会执行。方法中的函数，数据一遍，这个函数也会执行。

　　会不会执行，通过console.log来打印判断