data

基本上组件里面的数据定义等都在这里声明。

props

props是父组件传入的数据，props的值可以直接在template中使用，当父组件的title发生变化时，子组件会响应变化。

• 因为vue遵循单项数据流规范，所以想在组件中直接修改props是不允许的，数据从父组件传的值不可以在子组件中直接修改，只可以直接使用，如果想修改props的属性值必须通过父组件修改props的值或者赋给data，赋给data后就相当于拷贝了一份props数据，data中的数据与props中的数据就不存在从属关系。

需要注意：这种使用方式data中的titleCopy不会响应props中title的变化，除非监听props中title的变化时将变化后的值赋值给titleCopy。（监听title数据变化，然后重新赋值给data中的titleCopy，这样就能保证props与data同步变化）

computed

computed是计算属性，它会根据所依赖的数据动态显示新的计算结果， 该计算结果会被缓存起来。

• computed的值在getter执行后是会被缓存的。如果所依赖的数据发生改变时候, 就会重新调用getter来计算最新的结果。

  // 直接通过{{ reversedMsg }}使用
  computed: {
    reversedMsg() {
      return this.msg.split('').reverse().join('')
    }
  }
  

computed的使用场景：适用于一些重复使用数据或复杂及费时的运算。我们可以把它放入computed中进行计算， 然后会在computed中缓存起来，下次就可以直接获取了。

watch

watch用来监听数据。它会对data的数据监听回调，当依赖的data的数据变化时，会执行回调。在回调中会传入newVal和oldVal两个参数。

• Vue实列将会在实例化时调用$watch()，他会遍历watch对象的每一个属性。

watch的使用场景是：当在data中的某个数据发生变化时，我们需要做一些操作， 或者当需要在数据变化时执行异步或开销较大的操作时，我们就可以使用watch来进行监听。

• watch里面的immediate属性
  • immediate: false是默认的设置，也就是说在第一次初始化页面的时候，是不会去执行watch里面属性监听的，只有当watch里面属性监听的值发生改变的时候才会执行监听计算，如果想要设置第一次就监听，需要修改 watch的方法，需要引入handler方法和immediate属性，也就需要设置immediate: true。

  // 改变之前的watch
  watch: {
       age(newVal, oldVal) {
           this.basicMsg = '今年' + newVal + '岁' + ' ' + this.single;
      }
  }
  

  // 改变之后的watch
  watch: {
    age: {
      handler(newVal, oldVal) {
        this.basicMsg = '今年' + newVal + '岁' + ' ' + this.single;
      },
      immediate: true
    }
  }
  

• watch里面的deep属性
  • 是否深度监听某个对象的值，该值默认为false。
  • deep 实现机制 是: 监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，这样性能开销会非常大的。

总结

在实际开发中，建议以下几点：

• watch中监听props中的数据或data中的数据
• computed中计算props或者data中的数据
• data中使用props中的数据进行拷贝，如需响应数据变化则在watch中监听props的变化，在赋值给data
• 不要直接赋值给computed的属性，如果需要赋值，computed需要定义get与set函数