watch、computed和method的区别以及与props，data的加载顺序

• computed

• 当页面中有某些数据 依赖 其他数据 进行变动的时候，可以使用计算属性。

• 需要注意的是，就算在 data中没有直接声明 出要计算的变量，也可以直接在computed中写入。

• 计算属性默认只有getter，可以在需要的时候自己设定setter：

• 使用场景：computed擅于处理：一个数据受多个数据影响

• 即在这多个依赖数据中，任何一个改变都会导致 受影响的数据的改变

computed: {
    fullName: {
      // getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

• watch
• data中没有相应的属性的话，是不能watch
• watch:类似于监听机制+事件机制：一个数据影响多个数据。
• 适合监控场景，某【一个】变量改变时需要做什么操作；
• 在数据变化的同时进行异步操作或者是比较大的开销，
• watch为一个对象，键是需要观察的表达式，
  值是对应回调函数。值也可以是方法名，或者包含选项的对象。

  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  },

vue组件props，methods，data，computed，watch的加载顺序

props - > methods - > data - > computed - > watch

父组件向子组件通过props传值，props是一个只读属性，
如果要改变props的值，需要在data中进行定义，
所以props在前，data在后
computed计算属性要使用data里面的数据，
所以data在前，computed在后

vue的props，data，computed的加载顺序的影响
1.因为加载顺序： props->methods->data->computed->watch

2.computed与watch只能作为变化监听，千万不能做初始化！！！

3.所有的init方法必须直接调用数据库或者直接this.$store.getters读取内存而不是通过computed去获取