iT邦幫忙

0

[Vue2] 從初學到放棄 Day7-怎麼變化裡面的值

先用官網裡面的範例

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

這個範例,可以說到 Day5 這個生命週期。

  • 建立Vue的Instance,建立LifeCycle && events
  • injections && reactivity
  • 'el'是一個判斷格式,他是第一個被判斷的物件?(不知道能不能這樣稱呼他)
    • 如果沒有,就會去判斷是否有呼叫公用API $
    • 是否有template(這兩個是一定會判斷)
      目前理解到這邊....我們繼續往下走

Computed Caching vs Methods

  • 如何調用function
<p>Reversed message: "{{ reverseMessage() }}"</p>
// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

computed 這兩種方式其實都可以,但在

computed: {
  now: function () {
    return Date.now()
  }
}

這兩個範例,method都會重新渲染,但為什麼要使用computed caching,有時會有大量運算的array。如果不使用,getter將會超過預定次數。

Computed vs Watched Property

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  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
    }
  }
})

這邊有重複的function,可以把它拆到computed裡面

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Computed Setter

另外一個是如何做Computed的設定?
如果不特別設定都會是 getter-only

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

watcher

不知道該寫什麼以後再補


尚未有邦友留言

立即登入留言