vue computed和methods 计算属性和侦听器

 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性能最好