vue.js的computed,filter,get,set的用法及区别

1、vue.js的computed方法：
处理复杂逻辑，基于依赖缓存，当依赖发生改变时会重新取值。用methods也可以实现同样的效果，但methods在重新渲染的时候会重新调用执行，在性能上computed优于methods,当不需要缓存时可用methods。

实例1：computed和methods实现翻转字符串

[html] view plain copy

1. <template>  
2.   <div>  
3.     <input v-model="message">  
4.     <p>原始字符串: {{ message }}</p>  
5.     <p>计算后反转字符串: {{ reversedMessage }}</p>  
6.     <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>  
7.   </div>  
8. </template>  
9.   
10. <script>  
11. export default {  
12.   data () {  
13.     return {  
14.       message: 'Runoob123!'  
15.     }  
16.   },  
17.   computed: {  
18.     // 计算属性的 getter  
19.     reversedMessage: function () {  
20.       // `this` 指向 vm 实例  
21.       return this.message.split('').reverse().join('')  
22.     }  
23.   },  
24.   methods: {  
25.     reversedMessage2: function () {  
26.       return this.message.split('').reverse().join('')  
27.     }  
28.   }  
29. }  
30. </script>  

执行结果：

实例2：computed的get()和set()用法

[html] view plain copy

1. <template>  
2.   <div>  
3.     <select v-model="site">  
4.         <option value="Google http://www.google.com">Google http://www.google.com</option>  
5.         <option value="baidu http://www.baidu.co">baidu http://www.baidu.com</option>  
6.         <option value="网易 http://www.163.com">网易 http://www.163.com</option>  
7.     </select>  
8.     <p>name：{{name}}</p>  
9.     <p>url：{{url}}</p>  
10.   </div>  
11. </template>  
12.   
13. <script>  
14. export default {  
15.   data () {  
16.     return {  
17.       name: 'Google',  
18.       url: 'http://www.google.com'  
19.     }  
20.   },  
21.   computed: {  
22.     site: {  
23.       // getter  
24.       get: function () {  
25.         return this.name + ' ' + this.url  
26.       },  
27.       // setter  
28.       set: function (newValue) {  
29.         let names = newValue.split(' ')  
30.         this.name = names[0]  
31.         this.url = names[names.length - 1]  
32.       }  
33.     }  
34.   }  
35. }  
36. </script>  

执行结果：

2、vue.js的过滤器fliter方法：
过滤器是将返回数据进行处理后返回处理结果的简单函数。可是在vue2.0版本被去掉了，替代方法是将函数写在methods里。


实例：

[html] view plain copy

1. <template>  
2.   <div>  
3.     <input v-model="filterText"/>  
4.     <ul>  
5.       <li v-for="item in obj">  
6.         <span>{{myfilter(item.label)}}</span>  
7.       </li>  
8.     </ul>  
9.   </div>  
10. </template>  
11.   
12. <script>  
13. export default {  
14.   data () {  
15.     return {  
16.       obj: [  
17.         {value: 0, label: 'beijing'},  
18.         {value: 1, label: 'shanghai'},  
19.         {value: 2, label: 'guangdong'},  
20.         {value: 3, label: 'zhejiang'},  
21.         {value: 4, label: 'jiangshu'}  
22.       ],  
23.       filterText: ''  
24.     }  
25.   },  
26.   methods: {  
27.     myfilter (value) {  
28.       if (value.indexOf(this.filterText) > -1) {  
29.         return value  
30.       }  
31.     }  
32.   }  
33. }  
34. </script>  

执行结果：

3、vue.js的get和set方法：
vue中data属性能够响应数据变化内部是将data 的属性转换为 getter/setter，在vue2.0中，get()和set()用于computed计算属性中，在上面的computed实例中已有涉及。另外从vue1.0中继承的vm.$set( object, key, value )用于动态监控数据元素，在实例创建后添加数组属性并且有响应可用该方法实现。

[html] view plain copy

1. <template>  
2.   <div>  
3.     <input v-model="opt" @blur="add()"/>  
4.     <ul>  
5.       <li v-for="item in arr">  
6.         {{ item }}  
7.       </li>  
8.     </ul>  
9.   </div>  
10. </template>  
11.   
12. <script>  
13. export default {  
14.   data () {  
15.     return {  
16.       arr: [ '北京', '上海', '广东', '深圳' ],  
17.       opt: ''  
18.     }  
19.   },  
20.   methods: {  
21.     add () {  
22.       this.$set(this.arr, this.arr.length, this.opt)  
23.     }  
24.   }  
25. }  
26. </script>  

执行结果：

原文：http://blog.csdn.net/eagle_88/article/details/72957496