Vue3非模版组件二次封装怎么一次性获取原组件属性

在Vue3中，如果你想要封装一个非模板组件，并一次性获取原组件的所有属性，可以使用`reactive`函数或`ref`配合深拷贝。`reactive`来自Composition API，它会创建一个响应式的对象，而`ref`则返回一个可变的引用。

假设你有一个名为`MyComponent`的非模板组件，它的`props`如下：

import { ref, reactive } from 'vue';

export default {
  props: {
    prop1: {
      type: String,
      required: true
    },
    prop2: {
      type: Number,
      default: 0
    },
    // ...其他props...
  }
}

你可以这样做来一次性获取所有属性：

const originalProps = reactive({});

// 创建一个ref来存储原始props的浅拷贝
const originalPropsRef = ref();

useEffect(() => {
  originalPropsRef.value = { ...originalProps };
}, [originalProps]); // 当props变化时更新原始Props的副本

// 现在你可以访问originalPropsRef.value来获取所有的原始属性
console.log(originalPropsRef.value);

这样，在每次组件实例化或者props变更时，`originalPropsRef.value`都会同步更新到原始组件的属性。