Vue3.2里面的watch监听props参数的警告怎么解决

在Vue3.2中，如果你使用watch监听props属性，会出现这样的警告：

[Vue warn]: Property "xxx" was accessed during render but is not defined on instance. 
  at <ChildComponent onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <ParentComponent>

这是因为Vue3.2对props的处理方式有所改变，导致watch监听props时会出现警告。解决这个问题的方法有两种：

1. 使用watchEffect代替watch

Vue3.2中引入了新的API——watchEffect，它可以自动追踪响应式数据的变化，并在变化时执行回调函数。因此，你可以使用watchEffect来代替watch监听props属性：

import { watchEffect } from 'vue';

export default {
  props: {
    xxx: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    watchEffect(() => {
      console.log(props.xxx);
    });
  }
};

2. 使用provide/inject传递props

另一种解决方法是使用provide/inject来传递props属性。在父组件中使用provide来提供props属性，然后在子组件中使用inject来注入props属性。这种方法可以避免watch监听props时出现的警告。

// ParentComponent.vue
<template>
  <ChildComponent :xxx="xxx" />
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      xxx: 'xxx'
    };
  },
  setup() {
    provide('xxx', this.xxx);
  }
};
</script>


// ChildComponent.vue
<script>
import { inject } from 'vue';

export default {
  setup() {
    const xxx = inject('xxx');
    console.log(xxx);
  }
};
</script>

这两种方法都可以解决watch监听props属性时出现的警告。你可以根据自己的实际情况选择其中一种方法来使用。