vue2 watch监听props 异步传值

Vue 2中的`watch`属性通常用于监听组件数据的变化，但如果你想要监听来自父组件的异步`props`（prop通常是同步传递的），你可以结合`this.$options.propsData`和`setTimeout`或`Promise`来实现。

以下是一个简单的例子：

// 在子组件中
export default {
  props: ['asyncProp', { // 声明异步prop
    type: Function,
    default: () => Promise.resolve('default value')
  }],
  data() {
    return {
      localValue: null, // 初始化本地值
    };
  },
  mounted() {
    this.$watch(
      () => this.$options.propsData.asyncProp, // 观察prop的变化
      async (newVal) => {
        await newVal(); // 如果是函数，调用它获取实际值
        this.localValue = newVal; // 保存到本地数据
        // 可能还需要处理异步加载后的其他操作
      },
      {
        immediate: true, // 马上执行第一次
        deep: false, // 如果props的值结构复杂，可能需要设置为true
      }
    );
  },
}

在这个例子中，当`asyncProp`的值从父组件异步加载完成并传递给子组件时，`mounted`钩子会立即触发`watch`的回调，并开始处理新的值。