快捷導(dǎo)航

深入淺析Vue中的 computed 和 watch

更新時間：2018年06月06日 11:32:09 作者：吳凌云

computed 計算屬性是通過屬性計算得來的屬性，watch屬性變化，就會觸發(fā)監(jiān)聽的函數(shù)。下面通過本文給大家介紹Vue中的 computed 和 watch，感興趣的朋友一起看看吧

computed

計算屬性：通過屬性計算得來的屬性

計算屬性,是在相關(guān)聯(lián)的屬性發(fā)生變化才計算，計算過一次，如果相關(guān)屬性沒有變化，下一次就不需要計算了，直接去緩存的值

a:<input type="number" v-model.number="a" />
 b:<input type="number" v-model.number="b" />
 <!--c:<input type="number" v-model.number="c" />-->
 總和：{{sum()}}
 總和：{{count}}
 平均值：{{avg}}
 <p v-once>單價：{{price}}</p>
 <p>數(shù)量：<input type="number" v-model.number="count"/></p>
 <p>總價：{{sum}}</p>
 <p>運費：{{free}}</p>
 <p>應(yīng)付：{{pay}}</p>
  data: {
      a: '',
      b:'',
      c:'',
      price: 28.8,
      count: '',
      free: 10
  },
  computed: {
    count(){
      console.log('計算屬性觸發(fā)了');
        return this.a+this.b;
    },
    avg(){
      return this.count/2;
    },
    sum(){
      return this.price * this.count;
    },
   pay(){
    if(this.count>0){
      if(this.sum>=299){
        return this.sum;
    }else{
      return this.sum + this.free;
    }
     }else{
        return 0;
    }
    }
   }

watch

屬性變化，就會觸發(fā)監(jiān)聽的函數(shù)。

監(jiān)聽屬性變化，一般是用于跟數(shù)據(jù)無關(guān)的業(yè)務(wù)邏輯操作。

計算屬性，適用于屬性發(fā)生變化后，需要計算得到新的數(shù)據(jù)。

<div id="app">
      a: <input type="number" v-model.number="a" /><br />
      b: <input type="number" v-model.number="b" /><br />
      總和：{{count}}
      <br /><br /><br />
      name: <input type="text" v-model="obj.name" /><br />
      age: <input type="text" v-model.number="obj.age" /><br />
    </div>
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          a: '',
          b: '',
          count: '',
          obj: {
            name: '',
            age: ''
          }
        },
        watch: {
          a(newVal, oldVal){
            console.log('觸發(fā)了a-watch');
            this.count = this.a + this.b;
          },
          b(newVal){
            console.log('觸發(fā)了b-watch');
            this.count = this.a + this.b;
          },
//          obj(newVal, oldVal){
//            console.log('觸發(fā)了obj的監(jiān)聽');
//          }
//
          obj: {
            //監(jiān)聽對象中的每一個值
            handler(newVal, oldVal){
              console.log('觸發(fā)了obj的監(jiān)聽');
            },
            deep: true//深度監(jiān)聽
          },
          //監(jiān)聽對象中的某個屬性
          'obj.name': function(){
            console.log('觸發(fā)了obj.name的監(jiān)聽');
          }
        }
      })
    </script>

watch 也可以在methods里面進行監(jiān)聽配置

<div id="app">
      a: <input type="number" v-model.number="a" /><br />
      b: <input type="number" v-model.number="b" /><br />
      總和：{{count}}
      <br /><br /><br />
      name: <input type="text" v-model="obj.name" /><br />
      age: <input type="text" v-model.number="obj.age" /><br />
      <button @click="btnAction()">開始監(jiān)聽</button>
    </div>
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          a: '',
          b: '',
          count: '',
          obj: {
            name: '',
            age: ''
          }
        },
        methods: {
          btnAction(){
            this.$watch('a', (newVal, oldval)=>{
              console.log('監(jiān)聽到了a的變化');
              console.log(newVal, oldval);
            })
            this.$watch('obj.name', (newVal, oldval)=>{
              console.log('監(jiān)聽到了obj.name的變化');
              console.log(newVal, oldval);
            })
            this.$watch('obj', (newVal, oldval)=>{
              console.log('監(jiān)聽到了obj的變化');
              console.log(newVal, oldval);
            }, {
              deep: true
            })
          }
        }
      })
//      vm.$watch('a', (newVal, oldval)=>{
//        console.log('監(jiān)聽到了a的變化');
//        console.log(newVal, oldval);
//      })
//      
//      vm.$watch('obj.name', (newVal, oldval)=>{
//        console.log('監(jiān)聽到了obj.name的變化');
//        console.log(newVal, oldval);
//      })
//      
//      vm.$watch('obj', (newVal, oldval)=>{
//        console.log('監(jiān)聽到了obj的變化');
//        console.log(newVal, oldval);
//      }, {
//        deep: true
//      })
    </script>

下面在看下computed 和 watch

都可以觀察頁面的數(shù)據(jù)變化。當(dāng)處理頁面的數(shù)據(jù)變化時，我們有時候很容易濫用watch。而通常更好的辦法是使用computed屬性，而不是命令是的watch回調(diào)。

/*html:
  我們要實現(xiàn) 第三個表單的值 是第一個和第二個的拼接，并且在前倆表單數(shù)值變化時，第三個表單數(shù)值也在變化
  */
<div id="myDiv">
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <input type="text" v-model="fullName">
</div>
<!--js: 用watch方法來實現(xiàn)-->
//將需要watch的屬性定義在watch中，當(dāng)屬性變化氏就會動態(tài)的執(zhí)行watch中的操作，并動態(tài)的可以更新到dom中 
 new Vue({
 el: '#myDiv',
 data: {
  firstName: 'Foo',
  lastName: 'Bar',
  fullName: 'Foo Bar'
 },
 watch: {
  firstName: function (val) {
   this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
   this.fullName = this.firstName + ' ' + val
  }
 }
})
<!--js: 利用computed 來寫-->
  //計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。
  //這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。
 new Vue({
    el:"#myDiv",
      data:{
        firstName:"Den",
        lastName:"wang",
      },
      computed:{
        fullName:function(){
          return this.firstName + " " +this.lastName;
        }
      }
  })

很容易看出 computed 在實現(xiàn)上邊的效果時，是更簡單的。

總結(jié)

以上所述是小編給大家介紹的Vue中的 computed 和 watch，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: