Vue的计算属性computed

<!--第一步引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    /*第二步创建Vue并绑定对象*/
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        methods: {
            reversedMessage1: function () {
                return this.message.split('').reverse().join('')
            }
        },
        computed: {
            // 计算属性的 getter/*计算属性是基于它们的响应式依赖进行缓存的。*/
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
        }
    })

    var vm1=new Vue({
        el:'#app',
        data:{
            message:'hello Vue'
        },
        methods: {
            currentTime1:function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed: {//计算属性
            currentTime2:function () {
                return Date.now();//返回一个时间戳
            }
        }

    });
</script>

<!--第三步赋值 view层 模板-->
<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Reversed message: "{{ reversedMessage1() }}"</p><!--方法和计算属性不能重名-->
</div>
<div id="app">
    <p>currentTime1{{currentTime1()}}</p>
    <p>currentTime2{{currentTime2}}</p>
</div>

• 总结
  我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。