[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]
    }
  }
}
// ...