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>
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。
如果你不希望有缓存，请用方法来替代。
计算属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>computed,methods,watch</title> 6 <div id="app"> 7 {{fullName}} 8 {{age}} 9 </div> 10 </head> 11 <body> 12 <!-- 开发环境版本，包含了用帮助的命令行警告 --> 13 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 14 <script type="text/javascript"> 15 16 var app = new Vue({ 17 el: '#app', 18 data: { 19 firstName: 'Dell', 20 lastName: 'Lee', 21 age: 28 22 }, 23 computed: { 24 fullName: function() { 25 console.log('计算了一次'); 26 return this.firstName + ' ' + this.lastName; 27 } 28 } 29 }) 30 31 </script> 32 </body> 33 </html>
方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>computed,methods,watch</title> 6 <div id="app"> 7 {{fullName()}} 8 {{age}} 9 </div> 10 </head> 11 <body> 12 <!-- 开发环境版本，包含了用帮助的命令行警告 --> 13 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 14 <script type="text/javascript"> 15 16 var app = new Vue({ 17 el: '#app', 18 data: { 19 firstName: 'Dell', 20 lastName: 'Lee', 21 age: 28 22 }, 23 methods: { 24 fullName: function() { 25 console.log('计算了一次'); 26 return this.firstName + ' ' + this.lastName; 27 } 28 } 29 30 }) 31 32 </script> 33 </body> 34 </html>
watch 侦听器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 </head> 7 <body> 8 <div id="app"> 9 <div> 10 {{fullName}} 11 {{age}} 12 </div> 13 </div> 14 15 16 <!-- 开发环境版本，包含了用帮助的命令行警告 --> 17 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 18 <script> 19 var app = new Vue({ 20 el: '#app', 21 data: { 22 firstName: 'Tom', 23 lastName: 'Lee', 24 fullName: 'Tom Lee', 25 age: '33' 26 }, 27 watch: { 28 firstName: function(){ 29 console.log('计算了一次'); 30 return this.fullName = this.firstName + ' ' + this.lastName; 31 }, 32 lastName: function(){ 33 console.log('计算了一次'); 34 return this.fullName = this.firstName + ' ' + this.lastName; 35 } 36 } 37 }) 38 </script> 39 </body> 40 </html>
computed性能最好