<body> <div id="computed"> <p>Message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> <p>Computed reversed message: "{{ reversedMessage2() }}"</p> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '#computed', data: { message: 'Hello Vue' }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } }, methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } } }); </script> </body>
通过调用表达式中的method来达到同样的效果:不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。
计算属性:它是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
method:每当重新渲染的时候，method 调用总会执行函数。