Vue高版本中一些新特性的使用详解

1. 静态属性 $attrs 和 $listeners

在 Vue 2.x 版本中，父组件给子组件传递 props 属性的时候，必须要在子组件中声明该属性才能够正常接收。而在 Vue 3.x 版本中，为了方便，可以使用 v-bind="$attrs" 将所有非 prop 的属性传递给子组件，子组件可以在 $attrs 中获取到这个对象。类似的，事件监听器也可以传递给子组件，同理可以在 $listeners 对象中获取。

举个例子：

<!-- 父组件 -->
<template>
  <child-component id="foo" class="bar" :value="value" @click="onClick"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      value: 'Hello world',
    };
  },
  methods: {
    onClick() {
      console.log('Clicked');
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <input v-bind="$attrs" v-on="$listeners">
</template>

<script>
export default {
  inheritAttrs: false,  // 必须添加这个选项，否则 attrs 会自动绑定到根元素上
};
</script>

上述代码中，父组件中的 id 和 class 属性将会传递给子组件，并在子组件的 $attrs 对象中包含。同样的，父组件中的 click 事件监听器也会被传递给子组件，在子组件的 $listeners 对象中包含。子组件中的 <input> 标签通过 v-bind="$attrs" 和 v-on="$listeners" 来使用这些属性和事件监听器。

2. Suspense 组件

Suspense 组件是 Vue 3.x 中引入的新组件，它可以在异步组件加载完成前显示一个占位符（或者显示指定的插槽内容），直到异步组件加载完成后再显示真正的内容。在加载异步组件期间，您可以自定义 Suspense 组件中的加载指示器。

举个例子：

<!-- 父组件 -->
<template>
  <suspense>
    <template #default>
      <child-component />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const ChildComponent = defineAsyncComponent(() => {
  // 模拟异步加载
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        template: '<div>Hello world</div>',
      });
    }, 1000);
  });
});

export default {
  components: {
    ChildComponent,
  },
};
</script>

上述代码中，使用 defineAsyncComponent 函数创建一个异步组件 ChildComponent，在父组件中通过 suspense 组件作为包裹组件，同时通过 #default 和 #fallback 插槽来设置异步组件加载完成前和加载完成后的内容。在异步组件加载完成前，会显示 <div>Loading...</div>，加载完成后，会显示 ChildComponent 组件的内容。

除此之外，Vue 3.x 还引入了很多新的特性，如新的组合API、Teleport 组件、全局API 改进、提高性能等等。如果想要更深入地了解 Vue 3.x 的新特性，可以查看官方文档。