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

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

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

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

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

　　区别和联系

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

　　另一个例子

　　

    <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来打印判断