Vue 3 中的高级特性详解

1. 片段 (Fragment)

在 Vue 3 中，片段（Fragment）用于解决在一个组件中返回多个根元素的问题。在 Vue 2 中，组件模板只能有一个根元素，而在 Vue 3 中，可以通过片段来返回多个根元素。

• 示例：

  <template>
    <div>第一个根元素</div>
    <div>第二个根元素</div>
  </template>
  

2. Teleport (瞬移)

Teleport 允许我们将组件的内容追加到任意的 DOM 元素中，而不是默认的组件根元素中。这在处理模态框、弹出窗口等场景时非常有用。

• 示例：

  <template>
    <teleport to="body">
      <div class="modal">
        <p>这是一个模态框</p>
      </div>
    </teleport>
  </template>
  

3. Pinia (小菠萝)

Pinia 是一个轻量级的状态管理库，适用于 Vue 3。它提供了类似于 Vuex 的功能，但更加简洁和易于使用。

• defineStore：

  • 用于定义一个状态存储。
  • 示例：

    import { defineStore } from 'pinia';
    
    export const useCounterStore = defineStore('counter', {
      state: () => ({
        count: 0
      }),
      actions: {
        increment() {
          this.count++;
        }
      }
    });
    

• 持久化存储：

  • Pinia 支持持久化存储，可以将状态存储在本地存储中。
  • 示例：

    import { defineStore } from 'pinia';
    import { createPersistedState } from 'pinia-plugin-persistedstate';
    
    export const useCounterStore = defineStore('counter', {
      state: () => ({
        count: 0
      }),
      actions: {
        increment() {
          this.count++;
        }
      }
    });
    
    const pinia = createPinia();
    pinia.use(createPersistedState());
    

4. 父⼦组件传参

在 Vue 3 中，父组件和子组件之间的传参可以通过 defineProps 和 defineEmits 来实现。

• 父传子 defineProps：

  • 用于定义子组件接收的 props。
  • 示例：

    <template>
      <ChildComponent :message="parentMessage" />
    </template>
    <script>
    import ChildComponent from './ChildComponent.vue';
    
    export default {
      components: {
        ChildComponent
      },
      data() {
        return {
          parentMessage: 'Hello from parent'
        };
      }
    };
    </script>
    

• 子传父 defineEmits：

  • 用于定义子组件触发的事件。
  • 示例：

    <template>
      <button @click="emitEvent">Click me</button>
    </template>
    <script>
    export default {
      emits: ['customEvent'],
      methods: {
        emitEvent() {
          this.$emit('customEvent', 'Hello from child');
        }
      }
    };
    </script>
    

• defineModel：

  • 用于实现父组件和子组件的数据保持一致，子组件变更了，会触发父组件绑定的值一起更新。
  • 示例：

    <template>
      <ChildComponent v-model="parentData" />
    </template>
    <script>
    import ChildComponent from './ChildComponent.vue';
    
    export default {
      components: {
        ChildComponent
      },
      data() {
        return {
          parentData: 'Initial value'
        };
      }
    };
    </script>
    

5. keepAlive

keepAlive 可以在包含被包裹组件的组件树上，将其所有子组件都缓存起来，而不会销毁它们。这在处理需要保持状态的组件时非常有用。

• 示例：

  <template>
    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
  </template>
  <script>
  import ComponentA from './ComponentA.vue';
  import ComponentB from './ComponentB.vue';
  
  export default {
    components: {
      ComponentA,
      ComponentB
    },
    data() {
      return {
        currentComponent: 'ComponentA'
      };
    }
  };
  </script>
  

总结

Vue 3 提供了许多高级特性，如片段、Teleport、Pinia、父⼦组件传参和 keepAlive，帮助开发者更好地组织和复用代码。通过理解这些特性，可以更高效地开发 Vue 3 应用。