Vue computed 与 watch

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  template: `
  <div>
    <div>Name: {{firstName + ' ' + lastName}}</div>
    <div>Name: {{getName()}}</div>
    <div>Name: {{name}}</div>
    <div>FullName: {{fullName}}</div>
    <input type='text' v-model='obj.temp'>
  </div>
  `,
  data:{
    firstName: 'dzm',
    lastName: 'xyq',
    fullName: '',
    obj: {
      temp: '123'
    }
  },
  computed: { // 在 computed 内部不要去做值的修改操作，不然可能会进入无线死循环

    name () { // 只有在内部值发生变化的时候才会重新更新
      return `${this.firstName} ${this.lastName}`
    }

    // name: {
    //   get () {
    //     return `${this.firstName} ${this.lastName}`
    //   },
    //   set (name) {
    //     const names = name.split(' ')
    //     this.firstName = names[0]
    //     this.lastName = names[1]
    //   }
    // }
  },
  watch: { // 在 watch 内部不要去做值的修改操作，不然可能会进入无线死循环
    
    // firstName (newName, oldName) { // 这么监听的话它只会在有变化的时候才会调用，如果需要直接默认就调用一次需要下面那种方法。
    //   this.fullName = newName + ' ' + this.lastName
    // },

    firstName: {
      handler (newName, oldName) { // handler 方法别写错，写错不生效
        this.fullName = newName + ' ' + this.lastName
      },
      immediate: true, // true 代表我们声明这个 firstName 之后需要立马执行一遍它，如果不设置 immediate 属性则需要下次变化的时候才会执行。
    },

    // obj: {
    //   handler (newName, oldName) { // handler 方法别写错，写错不生效
    //     console.log('obj.temp change');
    //   },
    //   immediate: true, // true 代表我们声明这个 obj 之后需要立马执行一遍它，如果不设置 immediate 属性则需要下次变化的时候才会执行。
    //   deep: true // 默认是 false, 默认 watch 监听只会监听当前属性的变化，如果这个属性是个对象，对象内部的值发生变化是不会被监听到的，如果想要监听到那么就可以设置 deep: true，但是加上 deep 之后，它会相当于把当前对象的所有属性遍历加上监听事件，而且是一层一层的遍历直到全部加上监听为止，这样的话就会相当消耗性能。
    // },

    'obj.temp': {
      handler (newName, oldName) { // handler 方法别写错，写错不生效
        console.log('obj.temp change');
      },
      immediate: true, // true 代表我们声明这个 obj.temp 之后需要立马执行一遍它，如果不设置 immediate 属性则需要下次变化的时候才会执行。
    }
  },
  methods: {
    getName () { // 每次都会调用
      return `${this.firstName} ${this.lastName}`
    }
  }
})