Vue系列之computed使用詳解(附demo,不按期更新)

時間 2019-11-08

標籤 vue 系列 computed 使用詳解 demo 按期更新简体版

原文原文鏈接

前言：工做中用Vue技術開發項目有一段時間了，獨立開發完成項目基本沒什麼問題。但是就是在在開發過程當中遇到問題經常是經過零散的搜索或者官方文檔來解決，這樣的現象就說明本身對Vue根本沒有一套本身理解後的系統知識的框架。爲了創建這套完整的Vue知識框架，開始了《我眼中的Vue》系列文章的寫做，本系列是基於Vue官方文檔，其餘資料教材，加上實踐經驗總結後造成的一套我的資料。文中的觀點僅供參考，若是能對你有些許幫助或者啓發，筆者則甚是欣慰。點此進入githubDemo地址html

文章目錄

基礎用法：vue

1.計算屬性的getter函數

2.計算屬性的setter函數

3.計算屬性的cache緩存屬性
複製代碼

常見問題：git

1.計算屬性getter不執行的場景
  
  2.在v-for中使用計算屬性，起到相似"過濾器的做用"
  
  3.watch與computed的set函數的比較
複製代碼

computed 計算屬性

定義：當其依賴的屬性的值發生變化的時，計算屬性會從新計算。反之則使用緩存中的屬性值。github

一個完整的計算屬性以下：vuex

computed: {
 example: {
   get () {
     return 'example'
   },
   set (newValue) {
     console.log(newValue)
   }
 }
複製代碼

基礎用法

1.計算屬性的getter函數

當其依賴的屬性的值發生變化的時，這個計算屬性的值也會自動更新。多用於"data，computed"的屬性。緩存

<template>
  <div>
    <h4>測試</h4>
    <div>
      <input type="text" v-model="message" />
      <div>{{changeMessage}}</div>
    </div>
  </div>
</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
       changeMessage: {
        // 計算屬性：依賴message變化而變化  依賴沒變化就不會從新渲染；
        get () {
           return this.message + 'world'
        },
        set () {
        }
      }
     }
  }
</script>
複製代碼

2.計算屬性的setter函數

當賦值給計算屬性的時候，將調用setter函數。多用於在模板組件中須要修改計算屬性自身的值的時候。框架

<template>
  <div>
    <h4>測試</h4>
    <div>
      {{didi}}
      {{family}}
    </div>
    <div>
      {{didiFamily}}
    </div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
        didi: 'didi',
        family: 'family'
       }
     },
    computed: {
      didiFamily:{
        //getter
        get:function(){
          return this.didi + ' ' + this.family
        },
        //setter
        set:function(newValue){
          // 這裏因爲該計算屬性被賦值，將被調用
          console.log(newValue)
          this.didi = 123
          this.family = 456
        }
      }
    },
    mounted () {
      // 賦值，調用setter函數
      this.didiFamily = 'John Doe'
    }
  }
</script>
複製代碼

3.計算屬性的緩存

Vue實例中被觀察的數據屬性發生了改變時纔會從新執行getter,可是咱們有時候計算屬性依賴實時的非觀察數據屬性，好比下面例子中的Data.nowide

<template>
  <div>
    <h4>測試</h4>
    <div>
      <input type="text" v-model="message" />
      <div>{{now}}</div>
    </div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
      now:{
        cache: false,
        get:function(){
          return Date.now() + this.message
        }
      }
    },
    mounted () {
      setInterval(() => {
        // 當緩存開關爲false的時候，定時器每次打印的時間都是不同的
        console.log(this.now)
      }, 500)
    }
  }
</script>
複製代碼

常見問題

1.計算屬性getter不執行的場景

當包含計算屬性的節點被移除而且模板中其餘地方沒有再引用該屬性的時候，那麼對應的計算屬性的getter函數方法不會執行函數

代碼實例以下測試

<template>
  <div>
    <h4>測試</h4>
    <div>
      <button @click="toggleShow">Toggle Show Total Price</button>
      <p v-if="showTotal">Total Price = {{totalPrice}}</p>
    </div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
        showTotal: true,
        basePrice: 100
       }
     },
    computed: {
      totalPrice () {
        return this.basePrice + 1
      }
    },
    methods: {
      toggleShow () {
        this.showTotal = !this.showTotal
      }
    }
  }
</script>
複製代碼

2.在v-for中使用計算屬性，起到相似"過濾器的做用"

<template>
  <div>
    <h4>測試</h4>
    <div>
      <ul>
      	<li v-for="n in evenNumbers">{{n}}</li>
      </ul>
    </div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
        numbers: [ 1, 2, 3, 4, 5 ]
       }
     },
    computed: {
      evenNumbers () {
        return this.numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }
  }
</script>

複製代碼