vue-計算屬性和偵聽屬性

一、計算屬性computed

計算屬性是基于它們的響應式依賴進行緩存的。隻在相關響應式依賴發生改變時它們才會重新求值。

多次通路計算屬性會立即傳回之前的計算結果，而不必再次執行函數。對比普通函數方式，每次通路都需要執行一遍函數。

計算屬性預設隻有 getter ，不過在需要時你也可以提供一個 setter 。

例子

<script>
// @ is an alias to /src
export default {
  data () {
    return {
      title: '标題',
    }
  },
  computed: {
  // 第一鐘寫法
    ctitle () {
      return this.title
    },
    // 第二種寫法
    ctitle2: function () {
      return this.title
    },
    // 第三種寫法
    ctitle3: {
      // 預設隻有getter
      get: function () {
        return this.title
      },
    }
  }
}
</script>
           

二、偵聽屬性watch

當需要在資料變化時執行異步或開銷較大的操作時，這個方式是最有用的。

例子

watch: {
	// 監聽一個對象屬性變化
    obj: {
      handler (newVal, oldVal) {
        console.log('監聽對象的屬性變化：', newVal)
      },
      deep: true
    },
    // 監聽對象中name屬性變化
    'obj.name': {
      handler (newVal, oldVal) {
        console.log('監聽對象中name屬性：', newVal)
      }
    },
    // 監聽基數資料類型第一種寫法
    info (newVal, oldval) {
      console.log(oldval, newVal)
    },
    // 監聽基數資料類型第二種寫法
    title: {
      handler (newVal, oldVal) {
        this.obj.name = newVal
      }
    }
  }
           

三、實作vue中監聽某一個屬性值的變化

1. 監聽data中某一個對象中屬性變化

<template>
    <div class="home">
        <p>偵聽屬性：obj.name={{obj.name}}</p>
        <p>計算屬性檢測：obj.name={{comName}}</p>
        <input type="text" style="width:100%;height:30px;border:1px solid" v-model="title">
    </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home',
  data () {
    return {
      title: '',
      obj: { name: '對象标題' }
    }
  },
  computed: {
    comName () {
      return this.obj.name
    }
  },
  watch: {
  // 第一種寫法
    obj: {
      handler (newVal, oldVal) {
        console.log('監聽對象的屬性變化：', newVal)
      },
      deep: true
    },
    // 第二種寫法
    'obj.name': {
      handler (newVal, oldVal) {
        console.log('監聽對象中name屬性：', newVal)
      }
    },
    title: {
      handler (newVal, oldVal) {
        this.obj.name = newVal
      }
    }
  }
}
</script>
           

1. 監聽data中基本資料類型屬性變化

<template>
    <div class="home">
        <p>{{ctitle}}</p>
        <input type="text" style="width:100%;height:30px;border:1px solid" v-model="title">
    </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home',
  data () {
    return {
      title: '标題'
    }
  },
  computed: {
    ctitle () {
      return this.title
    }
  },
  watch: {
    title: {
      handler (newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }
  }
}
</script>