Vue學習3：計算屬性computed與監聽器

時間 2019-11-08

標籤 vue 學習計算屬性 computed 監聽器简体版

原文原文鏈接

下面是計算屬性相關代碼：css

 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>

View Code

2.下面是監聽器相關代碼：html

 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>