[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 && eventsinjections && reactivity'el'是一个判断格式，他是第一个被判断的物件？（不知道能不能这样称呼他）如果没有，就会去判断是否有呼叫公用API $是否有template（这两个是一定会判断）
目前理解到这边....我们继续往下走

Computed Caching vs Methods

如何调用function

<p>Reversed message: "{{ reverseMessage() }}"</p>// in componentmethods: {  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

不知道该写什么以后再补