Vue3 -- 新特性

Vue3.0相较于Vue2.0有了很大的提升，本篇是对Vue3.0新特性的总结，分别从 语法 API、响应式系统增强、Teleport、Suspense 这几方面进行详细介绍及使用方式：

语法和 API 层面

• 组合式 API（Composition API）

  • 原理： 组合式 API 是 Vue 3 最核心的新特性之一，它允许开发者以函数的形式组织逻辑，将相关的逻辑封装在一个函数中，而不是像选项式 API 那样分散在不同的选项里。
  • 优势： 提高了代码的复用性和可维护性，尤其适用于大型项目。

• < script setup> 语法糖

  • 原理： 这是一种在单文件组件（SFC）中使用组合式 API 的更简洁语法。使用 < script setup> 后，无需再手动导出 setup 函数的返回值，变量和函数会自动暴露给模板。
  • 优势： 减少了样板代码，让代码更加简洁。
  • 示例：

  <template>
    <div>
      <p>{{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  </script>
  

响应式系统增强

• 原理： Vue 3 使用 Proxy 代替了 Vue 2 中的 Object.defineProperty 来实现响应式。Proxy 可以直接监听对象和数组的变化，而不需要像 Object.defineProperty 那样对每个属性进行遍历和劫持，这使得响应式的实现更加高效和灵活，并且能够检测到更多类型的变化，比如对数组的直接修改等。
• 优势： 提高了性能，支持更多的数据类型（如 Map、Set 等），并且能更精确地追踪依赖。
• 使用示例：

  <template>
    <div>
      <p>Count: {{ state.count }}</p>
      <button @click="increment">Increment</button>
    </div>
  </template>
  <script>
  import { reactive } from 'vue'
  export default {
    setup() {
      // 创建响应式数据
      const state = reactive({
        count: 0
      })
      // 定义方法
      const increment = () => {
        state.count++
      }
      return {
        state,
        increment
      }
    }
  }
  </script>
  

Teleport（传送门）

• 概念： Teleport 是 Vue 3 提供的一个新组件，它允许你将一个组件内部的元素渲染到 DOM 中的其他位置，而不是严格按照组件的嵌套层次来渲染。
• 优势： 这在一些场景下非常有用，比如创建模态框、提示框等，这些元素通常需要放置在文档的顶层，以避免被其他元素的样式或布局所影响。
• 使用示例：

  <template>
    <div>
      <button @click="showModal = true">Open Modal</button>
      <!-- Teleport组件将其内部内容传送到指定的目标元素 -->
      <teleport to="body">
        <div v-if="showModal" class="modal">
          <div class="modal-content">
            <p>This is a modal!</p>
            <button @click="showModal = false">Close</button>
          </div>
        </div>
      </teleport>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        showModal: false
      }
    }
  }
  </script>
  <style>
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
  }
  </style>
  

Suspense（异步组件加载）

• 概念： Suspense 是 Vue 3 中用于处理异步组件加载的新特性。它允许你在组件加载过程中显示一个加载状态，直到异步组件加载完成后再显示实际内容。这对于提高用户体验，特别是在加载一些较大的组件或需要异步获取数据的组件时非常有帮助。
• 优势： 提高了用户体验，避免在异步组件加载时出现空白页面。
• 使用示例：

  <template>
    <div>
      <suspense>
        <!-- 加载中的提示 -->
        <template #fallback>
          <p>Loading...</p>
        </template>
        <!-- 异步组件 -->
        <template #default>
          <AsyncComponent />
        </template>
      </suspense>
    </div>
  </template>
  <script>
  import { defineAsyncComponent } from 'vue'
  // 定义异步组件
  const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))
  export default {
    components: {
      AsyncComponent
    }
  }
  </script>
  

渲染机制层面

• Fragment 支持

  • 原理： 在 Vue 2 中，组件必须有一个根节点。而在 Vue 3 中，组件可以返回多个根节点，形成一个片段。
  • 优势： 减少了不必要的 DOM 节点嵌套，使代码结构更加清晰。
  • 示例：

  <template>
    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
  
  <script>
  	export default {};
  </script>
  

其他特性

• 全局 API 的模块化
  • 原理： Vue 3 将全局 API 进行了模块化处理，需要按需引入，而不是像 Vue 2 那样挂载在全局的 Vue 对象上。
  • 优势： 减少了打包体积，提高了代码的可维护性。
  • 示例：

    import { createApp } from 'vue';
    import App from './App.vue';
    
    const app = createApp(App);
    app.mount('#app');