1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 </head> 7 <body> 8 <div id="example"> 9 <p>Original message: "{{ message }}"</p> 10 <p>Computed reversed message: "{{ reversedMessage }}"</p> 11 <p>Reversed message: "{{ reversedMessage2() }}"</p> 12 </div> 13 <!-- 开发环境版本，包含了用帮助的命令行警告 --> 14 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 15 <script type="text/javascript"> 16 var vm = new Vue({ 17 el: '#example', 18 data: { 19 message: 'Hello' 20 }, 21 computed: { 22 // 计算属性的 getter,有缓存 23 reversedMessage: function () { 24 // `this` 指向 vm 实例 25 return this.message.split('').reverse().join('') 26 } 27 }, 28 // 在组件中，方法无缓存 29 methods: { 30 reversedMessage2: function () { 31 return this.message.split('').reverse().join('') 32 } 33 } 34 }) 35 </script> 36 </body> 37 </html>
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。
如果你不希望有缓存，请用方法来替代。