computed

核心： 依賴緩存而改變

基礎(chǔ)用法：1.get：依賴緩存，監(jiān)測(cè)data數(shù)據(jù)的變化；2.set:監(jiān)測(cè)computed本身數(shù)據(jù)的變化 。3，關(guān)閉cache:每次訪問都是最新的而非緩存；
注意：vuex傳遞的computed值必須通過watch才能監(jiān)測(cè)到，set函數(shù)無(wú)法監(jiān)測(cè)到

實(shí)現(xiàn)用computed代替watch的地方：

• 1.data => computed

  data數(shù)據(jù)改變,computed因改變而改變;而不會(huì)用watch; √
  監(jiān)聽data的變化

demo

<template>
  <div>
    <h4>測(cè)試computed</h4>
    <div>
      <input type="text" v-model="message" />
      <span>{{defdata}}</span>
    </div>
    <div>setter</div>

  </div>

</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
       def () {
         return 'dfd'
       },
       defdata () {
         console.log(this.message) // message被改變的時(shí)候，這里會(huì)被執(zhí)行；并重新賦值defdata變量
         return 'dfd' +this.message
       }
     }
  }
</script>

• 2.Computed => data ×

  computed不能監(jiān)聽computed的變化(注意：即使使用set，也改變不了computed的值，只能改變data;)
  監(jiān)聽computd的變化用set/watch

demo computed不能監(jiān)聽computed的變化

<template>
  <div>
    <h4>測(cè)試computed</h4>
    <div>
      <input type="text" v-model="abc" />
      <span>{{def}}</span>
    </div>
    <div>setter</div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
       abc () {
         return 'abc'
       },
       def () {
         console.log(this.abc)  // 這里不會(huì)被執(zhí)行并重新賦值def變量
         return 'dfd' +this.abc
       }
     }
  }
</script>

• 3.computed的get是設(shè)置監(jiān)聽data的數(shù)據(jù)；

<template>
  <div>
    <h4>測(cè)試computed的get</h4>
    <div>
      <input type="text" v-model="message" />
      <div>{{abc}}</div>
    </div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
       abc: {
         get () {
           // 監(jiān)聽data的變化，每次變化都會(huì)打印123
           console.log(123)
           // abc隨著    data中的message的變化而變化
           return 'abc' + this.message
         }
       }
     }
  }
</script>

<style>
</style>

4.computed的set函數(shù)
set函數(shù)當(dāng)computed屬性重新賦值后，set里的操作會(huì)被調(diào)用。
注：需要改變computed的值的時(shí)候，就需要設(shè)置set函數(shù)

<template>
  <div>
    <h4>測(cè)試computed的set</h4>
    <div>
      <input type="text" v-model="abc" />
    </div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
       abc: {
         get () {
           return 'abc'
         },
         set (val) {
           //  只能在set函數(shù)里面打印改變后的值
           console.log('set', val)  // => 123
         }
       }
     },
     mounted () {
       this.abc = '123'
       // 在mounted 無(wú)法打印改變后的值
       console.log('mounted', this.abc) //=> abc
     }
  }
</script>

<style>
</style>

• 5. Cache :true 默認(rèn)開啟計(jì)算屬性的緩存； 如果需要每次訪問都是最新的則關(guān)閉緩存false;
     demo

<template>
  <div>
    <h4>測(cè)試computed的緩存</h4>
    <div>{{now}}</div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
      now:{
        get:function(){
          return Date.now() + this.message
        },
        cache: true   // 默認(rèn)是true
      }
    },
    mounted () {
      for(let i = 0 ;i<3;i++){
        console.log(this.now)  // 當(dāng)false關(guān)閉緩存的時(shí)候，每次訪問now是都是最新的的。 而為true的時(shí)候，則需要依賴的屬性改變了才會(huì)更新時(shí)間；
      }
    }
  }
</script>

<style>
</style>

• 6. watch能用而computed的set不能用的地方；
     vuex 接收 的computed ，用set監(jiān)測(cè)不到變化，必須要用watch才可以生效；（原理：實(shí)質(zhì)沒有改變computd的值，只是改變了get的return值）
     v-model 改變的computed，用watch監(jiān)測(cè)不到變化，必須要用computed對(duì)象中的set函數(shù)方法才能監(jiān)測(cè)得到（原理：相當(dāng)于每次改變了computed的值）

7. 寫法規(guī)范：
   vuex 傳遞的computed值

computed: {
     abc  () {
          return 'vuex
    }
 }

自身computed定義

computed: {
    abc: {
      get () {
          return 'computed'
      }
    }
}

參考鏈接

• heightzhang github demo