vue基础（4）--computed&&watch

import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    <div>
      <p>Name: {{name}}</p>               //watch方法有缓存，性能开销好
      <p>Name: {{getName()}}</p>          //数据变化，DOM重新渲染的话， 方法会被重新调用
      <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: 'PPP',
    lastName: 'Liu',
    number: 0,
    fullName: '',
    obj: {
      a: 0
    }
  },
  computed: {                                       //有数据变化，做一次计算，有缓存
    /*name(){            //用这种形式为好              
        return `${this.firstName} ${this.lastName}`
    }*/
    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        //对象属性上见效果obj.a，升入观察，耗性能
    },
    firstName(newName,oldName){                    //最初不加载， 有变化在执行
        this.fullName = newName +' ' +this.lastName     
    }
  },
  methods: {
    getName () {
      console.log('getName invoked')
      return `${this.firstName} ${this.lastName}`
    }
  }
})