import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    <div>
      <p>Name: {{name}}</p>
      <p>Name: {{getName()}}</p>
      <p>Number: {{number}}</p>
      <p>FullName: {{fullName}}</p>
      <p><input type="text" v-model="number"></p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
      <p>LastName: <input type="text" v-model="lastName"></p>
      <p>Name: <input type="text" v-model="name"></p>
      <p>Obj.a: <input type="text" v-model="obj.a"></p>
    </div>
  `,
  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}`
    }
  }
});