Vue監(jiān)聽屬性和計算屬性

更新時間：2021年12月12日 15:50:37 作者：小旺不正經(jīng)

這篇文章主要介紹了Vue監(jiān)聽屬性和計算屬性，基本用法添加watch屬性，值為一個對象。對象的屬性名就是要監(jiān)視的數(shù)據(jù)，屬性值為回調(diào)函數(shù)，每當(dāng)這個屬性名對應(yīng)的值發(fā)生變化，就會觸發(fā)該回調(diào)函數(shù)執(zhí)行，下面來看詳細(xì)內(nèi)容,需要的朋友也可以參考一下

一、watch監(jiān)聽屬性

這個屬性用來監(jiān)視某個數(shù)據(jù)的變化，并觸發(fā)相應(yīng)的回調(diào)函數(shù)執(zhí)行。

基本用法添加watch屬性，值為一個對象。對象的屬性名就是要監(jiān)視的數(shù)據(jù)，屬性值為回調(diào)函數(shù)，每當(dāng)這個屬性名對應(yīng)的值發(fā)生變化，就會觸發(fā)該回調(diào)函數(shù)執(zhí)行。

回調(diào)函數(shù)有2個參數(shù)：

newVal，數(shù)據(jù)發(fā)生改變后的值。
oldVal，數(shù)據(jù)發(fā)生改變前的值。

計數(shù)器：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <div>計數(shù)器{{ shu }}</div>
   <span>改變前: {{ov}}</span>
   <span>改變后: {{nv}}</span>
   <br />
   <button @click="shu++">加一</button>
  </div>
  
  <script>
  var vm = new Vue({
   el: '#app',
   data: {
    shu:1,
    ov:0,
    nv:0
   },
   methods:{
    
   }
  })
  vm.$watch("shu",function(nval,oval){
   vm.$data.ov = oval
   vm.$data.nv = nval
  })
  </script>
 </body>
</html>

添加監(jiān)聽，同時將計數(shù)器改變前的值賦值給變量ov，將改變后的值賦值給變量nv

  vm.$watch("shu",function(nval,oval){
   vm.$data.ov = oval
   vm.$data.nv = nval
  })

1.購物車

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
  <table>
   <tr>
    <th>序號</th>
    <th>商品名稱</th>
    <th>商品價格</th>
    <th>購買數(shù)量</th>
    <th>操作</th>
   </tr>
   <tr v-for="sp in sps">
    <td>{{ sp.id }}</td>
    <td>{{ sp.name }}</td>
    <td>{{ sp.money }}</td>
    <td>
    <button v-on:click="sp.sum=sp.sum-1">-</button>
    {{ sp.sum }}
    <button v-on:click="sp.sum=sp.sum+1">+</button>
    </td>
    <td>
     <button v-on:click="sp.sum=0">重置</button>
    </td>
   </tr>
  </table>
  <div >
   總價：{{ getmaney() }}
  </div>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     sps:[
      {
       id:1,
       name:"蘋果13",
       money:6000,
       sum:1
      },
      {
       id:2,
       name:"蘋果12",
       money:5000,
       sum:1
      },
      {
       id:3,
       name:"蘋果11",
       money:4000,
       sum:1
      }
     ]
    },
    methods:{
     getmaney:function(){
      var m=0;
      for(var x=0;x<this.sps.length;x++){
       m=m+this.sps[x].money*this.sps[x].sum;
      }
      return m;
     }
    }
   })
  </script>
 </body>
</html>

得出總的費用：

getmaney:function(){
    var m=0;
    for(var x=0;x<this.sps.length;x++){
   m=m+this.sps[x].money*this.sps[x].sum;
 }
 return m;
}

2.全選與取消全選

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <input type="checkbox" id="a" value="a" v-model="che"/>
   <label for="a">a</label>
   <input type="checkbox" id="b" value="b" v-model="che"/>
   <label for="b">b</label>
   <input type="checkbox" v-model="checked" id="bok" v-on:change="ckall()" />
   <label for="box">全選</label>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     checked:false,
     che:[],
     shuzu:["a","b"]
    },
    methods:{
     ckall:function(){
      //全選狀態(tài)
      if(this.checked){
       this.che = this.shuzu
      }else{
       //取消全選
       this.che=[]
      }
     }
    },
    watch:{
     "che":function(){
      //判斷是否全選
      if(this.che.length == this.shuzu.length){
       this.checked=true
      }else{
       this.checked=false
      }
     }
    }
   })
  </script>
 </body>
</html>

二、計算屬性

1.computed

特點：

在computed屬性對象中定義計算屬性的方法，在頁面上使用{{方法名}}來顯示計算結(jié)果。
通過getter/setter來顯示和監(jiān)視屬性數(shù)據(jù)。
計算屬性存在緩存，多次讀取只執(zhí)行一次getter。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <p>{{ mess }}</p>
   <p>{{ remess }}</p>
   <p>{{ mess.split('').reverse().join('') }}</p>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data:{
     mess:'abcd'
    },
    computed: {
     remess:function(){
      return this.mess.split('').reverse().join('')
     }
    }
   })
  </script>
 </body>
</html>

2.methods

computed基于它的依賴緩存，只有相關(guān)依賴發(fā)生改變時才會重新取值。而使用methods，在重新渲染的時候，函數(shù)總會重新調(diào)用執(zhí)行。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <input v-model="mess" />
   <p>{{ mess }}</p>
   <p>{{ remess }}</p>
   <p>{{ remess2() }}</p>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data:{
     mess:'abcd'
    },
    computed: {
     remess:function(){
      return this.mess.split('').reverse().join('')
     }
    },
    methods: {
     remess2:function(){
      return this.mess.split('').reverse().join('')
     }
    }
   })
  </script>
 </body>
</html>

3.setter

當(dāng)頁面獲取某個數(shù)據(jù)的時候，先會在data里面找，找不到就會去計算屬性里面找，在計算屬性里獲取數(shù)據(jù)時會自動執(zhí)行g(shù)et方法，同時也提供了set方法。computed屬性默認(rèn)只有getter，不過在需要時也可以提供一個setter。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <p>{{ site }}</p>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     name: 'xiaowang',
     cls:'01'
    },
    computed:{
     site:{
      get: function(){
       return this.name+' '+this.cls
      },
      set: function(Value){
       var names = Value.split('|')
       this.name = names[0]
       this.cls = names[1]
      }
     }
    }
   })
   vm.site = 'xiaowang|01';
   document.write('name:'+vm.name);
   document.write('<br>');
   document.write('class:'+vm.cls);
  </script>
 </body>
</html>