初識Vue——計算屬性和觀察者

1、計算屬性

在模板內使用

一、基礎例子 

<template>
    <div class="main">
        <div id="reverse_str">
            <p>原始字符串：{{ msg }}</p>
            <p>倒置字符串：{{ reversedmsg }}</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
        msg: '夢裏夢到醒不來的夢',
    }
  },
  computed: {
  //計算屬性的getter
    reversedmsg: function () {
        return this.msg.split('').reverse().join('')
    }
  }
}
</script>

<style>
#reverse_str{
    color: powderblue;
}
</style>

解釋說明：這裏咱們聲明瞭一個計算屬性reversemsg，咱們提供的函數將用做屬性的getter函數

二、計算屬性緩存vs方法

以上還能夠經過在表達式中調用方法來達到一樣的效果：

<template>
    <div class="main">
        <div id="method">
            <p>原始字符串：{{ msg1 }}</p>
            <p>倒置字符串：{{ reversedmsg1() }}</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
        msg1: '浮現你被軟禁的紅'
    }
  },
  methods: {
      reversedmsg1 () {
          return this.msg.split('').reverse().join('')
      }
  }
}
</script>

<style>
#method{
    color: darksalmon;
}
</style>

　　　　

這兩種方式的結果是如出一轍的；不一樣的是，計算屬性是基於他們的依賴進行緩存的；計算屬性只有在他的相關依賴發生改變時，纔會從新求值；這就意味着只要msg沒有發生改變，屢次訪問reversemsg計算屬性會當即返回以前計算的結果，而沒必要再次執行函數；

這也意味着下面的計算屬性將再也不更新，由於Date.now()不是響應式依賴，

computed: {
      // 計算屬性的getter
    now_time: function () {
        return Date.now()
    }
  },

三、計算屬性VS偵聽屬性

偵聽屬性：觀察和相應Vue實例上的數據變更；watch回調

<template>
    <div class="main">
        <div id="sang">

　　　　　　<div class="watch_it">
　　　　　　　　<input v-model="first" />
　　　　　　　　<input v-model="last" />
　　　　　　　　<p>{{ fullname }}</p>
　　　　　　</div>

        </div>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
        sangname: '我若是愛你——',
        author: '毫不學癡情的鳥兒,爲綠蔭重複單調的歌曲',
    }
  },
  watch: {
      first: function (val) {
          this.fullname = val + ' ' + this.last
      },
    last: function (val) {
          this.fullname = this.first + ' ' + val
    }
  }
}
</script>

<style>
.watch_it input{
    list-style: none;border: 1px seagreen solid;width: 200px;height:30px;color: gray;padding:0 10px;outline: none;
}
</style>

 

上面的代碼是命令式的，且重複代碼較多，下面來寫一下計算屬性的版本：

<template>
    <div class="main">
        <div id="sang">
            <p>{{ sang }}</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
        sangname: '我若是愛你——',
        author: '毫不學癡情的鳥兒,爲綠蔭重複單調的歌曲',
  },
  computed: {
      // 計算屬性的getter
    sang: function () {
        return this.sangname + ' ' + this.author
    }
  }
}
</script>

<style>
#sang{
    color: cadetblue;
}
</style>

　　　　　

四、計算屬性的setter

計算屬性只有默認的getter，不過在必要的時候你能夠自定義一個setter

<template>
    <div class="main">
            <div id="sang">
            <p>{{ sang }}</p>
            </div>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
        sangname: '我若是愛你——',
        author: '毫不學癡情的鳥兒,爲綠蔭重複單調的歌曲',
    }
  },
  computed: {
    sang: {
        //getter
        get: function () {
            return this.sangname + ' ' + this.author
        },
        set: function (newval) {
            var sentence = newval.split(' ')
            this.sangname = sentence[0]
            this.author = sentence[sentence.length - 1]
        }
    }
  }
}
</script>

<style>
#sang{
    color: cadetblue;
}
</style>

 

 2、偵聽器

雖然計算機屬性能夠適用於大多數狀況，但有時也須要一個自定義的偵聽器；

暫無