014-computed、watch

💡 Tips：Vue 中，data、computed、watch、methods 各有其使用场景，使用时需要如何区别呢？

1、概念

<script>
export default {
  name: 'App',
  components: { Son },
  props: {
      fatherData: {
          type: String,
          default: '',
      }
  },
  data() {
    return {
        showSonComponent: false,
        sonData: 'son',
        watchSonData: '',
    }
  },
  computed: {
      calcA() {
          return this.fatherData + this.sonData;
      }
  },
  watch: {
      fatherData(newval) {
          if(newVal) {
              this.watchSonData = newVal + this.sonData;
          }
      },
  },
  methods: {
    init() {
      // 更新该变量，会引起 DOM 更新
      this.showSonComponent = true
      this.$nextTick(() => {
        // 需要等DOM更新完成后调用init方法
        this.$refs.sonComponent.init()
      })
    }
  }
}
</script>

2、data

data 中可以定义的数据，支持双向绑定，是最基础的数据定义方式。

3、props

接收父组件传入的数据 fatherData，支持异步，即父组件调接口，回调后给该数据赋值，子组件该数据会同步修改。

需要注意的点：
如果在子组件的 data 中定义数据 a，在 created 中，将 fatherData 赋值给 a，那么 fatherData 异步改变后，a 不会修改！如果要 a 跟着修改，使用 computed 或 watch。

4、computed

computed 计算属性，即在 data 中定义变量 a 和 b，computed 中定义变量 c return this.a + this.b，那么 a 或 b 有修改，c 会重新计算。
支持缓存，即 会将上次计算结果存到内存中，再次获取 c 时，先检查 a 和 b 是否有变动，没有就直接返回上次的结果，效率高，只有依赖数据 a 或 b 改变了才会重新计算。

需要注意的点：
监听不到异步修改，例如：computed 中定义变量 d return this.a + new Date()，第一次获取 d 时，会调用 new Date() 获取当前时间，返回，再次获取 d，检查发现 a 没有变动，所以直接返回上次计算的结果。

5、watch

watch 即 监听，跟 computed 功能类似，区别在于：不支持缓存，能监听到异步修改，每次都会重新计算新值返回，没有 computed 效率高，好处就是 watch 中的任意变动，都会被监听到。

需要注意的点：
如果在 子组件 中使用 watch，首次加载 子组件时，watch 会先创建一个监听器，并不会立即执行监听代码，组件加载完成后，监听的内容有修改，才会执行监听代码，所以 首次加载 时，不会立即执行监听代码，需要搭配 created 或者 mounted 共同使用。

6、methods

methods 中定义方法，有调用，就执行。