3.5 computed和watch

import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    

      
Name: {{name}}
      
Name: {{getName()}}
      
Number: {{number}}
      
FullName: {{fullName}}
      

      
FirstName: 
      
LastName: 
      
Name: 
      
Obj.a: 
    
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou',
    number: 0,
    fullName: '',
    obj: {
      a: 0
  },

// 对已有数据的拼装，监听后处理成新的数据
  computed: {
    name: {
      get () {
        console.log('new name');
        return `${this.firstName} ${this.lastName}`
      },
      set (name) {
        const names = name.split(' ');
        this.firstName = names[0];

        this.lastName = names[1]
      }
    }
  },
  watch: {
    // 监听的数据
    'obj.a': {
      handler () {
        console.log('obj.a changed');
        this.obj.a += 1
      },
      // 绑定时立即执行
      immediate: true

      // 对引用类型进行监听
      // deep: true
    }
  },

// computed 会缓存计算结果，只有数据发生改变时才会执行，methods每次都进行计算
  methods: {
    getName () {
      console.log('getName invoked')
      return `${this.firstName} ${this.lastName}`
    }
  }
});