vue核心方法

props

说明：子组件 访问 父组件数据的唯一接口

computed

说明：计算数据
示例：

new Vue({
  el: '#root',
  template: `
    <div>
      <span>Name: {{firstName + ' ' + lastName}}</span>
      <span>Name: {{name}}</span>
      <span>Name: {{getName()}}</span>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou'
  },
  computed: {
    name () { // 使用 computed
      return `${this.firstName} ${this.lastName}`
    }
  },
  methods: {
    getName () { // 使用 methods
      return `${this.firstName} ${this.lastName}`
    }
  }
})

好处
computed 里面声明的数据发生改变时，该声明的数据才会重新计算，并进行缓存；
当改变其他数据时，computed 属性并不会重新计算，从而提升性能。

watch

说明：监听数据，并根据该数据改变得到的新值，进行某些操作。

new Vue({
  template: `
    <div>
      <p>FullName: {{fullName}}</p>
      <p>FirsName: <input type="text" v-model="firstName"/></p>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou',
    fullName: ' '
  },
  watch: {
    firstName (newName, oldName) {
      this.fullName = newName + ' ' + this.lastName
    }
  }
})

watch 的方法默认是不会执行的，只有当监听数据变化，才会执行

watch 的 immerdiate 属性

说明：通过声明 immediate 选项为 true，可以立即执行一次 handler。

watch: {
    firstName: {
      handler (newName, oldName) {
        this.fullName = newName + ' ' + this.lastName
      },
      immediate: true
    }
  }

watch 的 deep 属性

说明：默认情况下，handler 只监听属性引用的变化，也就是只监听了一层，但改对象内部的属性是监听不到的

new Vue({
  template: `
    <div>
      <p>Obj.a: <input type="text" v-model="obj.a"/></p>
    </div>
  `,
  data: {
    obj: {
      a: '123'
    }
  },
  watch: {
    obj: {
      handler () {
        console.log('obj.a changed')
      },
      immediate: true
      // deep: true
    }
  }
})

通过使用 deep: true 进行深入观察，这时，我们监听 obj，会把 obj 下面的属性层层遍历，都加上监听事件，这样做，性能开销也会变大，只要修改 obj 中任意属性值，都会触发 handler。

deep 优化

在字符串中，写 obj 深入的属性调用，vue 会层层解析，找到 a，并进行监听。

watch: {
    'obj.a': {
      handler () {
        console.log('obj.a changed')
      },
      immediate: true
      // deep: true
    }
  }

来源声明
Vue核心知识-computed和watch的使用场景和方法