Vue学习3：计算属性computed与监听器

用户1149564

发布于 2018-05-28 16:34:28

4990

发布于 2018-05-28 16:34:28

下面是计算属性相关代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue3</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
 8     <script src="vue.js"></script>
 9 </head>
10 <body>
11 <!--计算属性computed,可以用在一些复杂逻辑上-->
12 <div id="app">
13     <!--1.模板中逻辑过重，不易维护-->
14     <p>{{msg.split('').reverse().join('')}}</p><br>
15     <!--2.用上computed属性，适用于复杂逻辑-->
16     <p>原值:{{msg}}</p>
17     <p>使用computed:字符串反转后的值:{{reverseMsg}}</p><br>
18     <!--3.用methods-->
19     <p>原值:{{msg}}</p>
20     <p>使用methods:字符串反转后的值:{{reverseMsg1()}}</p><br>
21     <!--我们可以发现computed属性和methods得到的结果是一样的。但是computed是基于它的缓存依赖（例子中指vm.msg)，
22     只有相关依赖改变才会重新取值；但是methods，每次重新渲染时，都会重新取值-->
23     <!--所以说一般computed性能更好-->
24 
25 
26     <!--计算属性默认只有getter,不过我们可以设置setter-->
27     <p>{{fullName}}</p>
28     <p>{{firstName}}</p>
29     <p>{{lastName}}</p>
30 </div>
31 
32 <script>
33     var vm=new Vue({
34         el: '#app',
35         //选项对象
36         data:{
37             msg:'hello',
38             firstName:'Smith',
39             lastName: 'Lee'
40         },
41         //声明计算属性,提供的函数将用作vm.reverseMsg的getter
42         //vm.reverseMsg依赖于vm.msg；vm.msg改变时，vm.reverseMsg也会改变
43         computed:{
44             //计算属性的getter
45             reverseMsg:function(){
46                 return this.msg.split('').reverse().join('');
47             },
48             fullName:{
49                 get:function(){
50                     return this.firstName+' '+this.lastName;
51                 },
52                 set:function(newValue){
53                     var value=newValue.split(' ');
54                     this.firstName=value[0];
55                     this.lastName=value[1];
56                 }
57             }
58 
59         },
60         methods:{
61            reverseMsg1:function(){
62               return this.msg.split('').reverse().join('');
63            }
64         }
65     });
66     vm.fullName='John Lee';
67 </script>
68 </body>
69 </html>

2.下面是监听器相关代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue4 监听属性</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
 8     <script src="vue.js"></script>
 9 </head>
10 <body>
11 <div id="app">
12     <input type="text" v-model="meter">
13     <input type="text" v-model="kilometer">
14     <p class="test"></p>
15 </div>
16 <!--其实计算属性在大多数时候更合适，但是当数据执行异步操作或开销较大的操作时，需要采用监听器操作-->
17 <script>
18     var vm=new Vue({
19         el: '#app',
20         data:{
21             meter:'',
22             kilometer: ''
23         },
24         watch:{
25             //watch创建了meter和kilometer两个方法
26             meter:function(val){
27                 this.meter=val;
28                 this.kilometer=val/1000;
29             },
30             kilometer:function(val){
31                 this.kilometer=val;
32                 this.meter=val*1000;
33             }
34         },
35 
36 
37     });
38     vm.$watch('meter',function(newValue,oldValue){
39         document.getElementsByClassName('test')[0].innerHTML="meter新值："+newValue+ ";" + "meter旧值："+oldValue;
40     })
41 </script>
42 </body>
43 </html>

在第一个输入框中输入123后，运行结果：