基础概念

Posted 2024-09-12 Updated 2024-09- 12

By today62 已删除用户

22~29 min read

1.1 Vue 简介

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的核心库专注于视图层，易于上手并与其他库或现有项目整合。Vue 的设计理念是将视图和数据进行分离，使得开发者能够更高效地创建交互式的单页应用（SPA）。

1.2 Vue 的特点

响应式数据绑定：Vue 通过其响应式系统，能够自动追踪依赖并在数据变化时自动更新视图。这使得开发者不需要手动操作 DOM。
组件化：Vue 将 UI 拆分为可重用的组件，每个组件都有自己的状态和逻辑。这种方法提高了代码的可维护性和可复用性。
虚拟 DOM：Vue 使用虚拟 DOM 来优化更新性能。通过比较新旧 DOM 的差异，Vue 只会更新需要更改的部分，从而提高了渲染效率。
灵活性：Vue 可以作为一个库引入到现有项目中，也可以作为一个完整的框架使用，适应不同规模的应用需求。
强大的生态系统：Vue 拥有丰富的插件和工具支持，包括 Vue Router（路由管理）、Vuex（状态管理）等，能够满足复杂应用的需求。

1.3 Vue 3 的新特性

Vue 3 引入了许多新特性，提升了性能和开发体验，主要包括：

组合式 API：Vue 3 采用了组合式 API（Composition API），允许开发者通过 setup 函数在组件中更灵活地组织代码。这种方式使得逻辑复用更加简单，特别是在大型组件中。
```
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;

    return { count, increment };
  }
};
```
性能提升：Vue 3 在性能上进行了多项优化，包括更快的虚拟 DOM 渲染、内存占用减少等，使得应用在大型数据集和复杂组件下依然流畅。
TypeScript 支持：Vue 3 原生支持 TypeScript，使得开发者可以享受类型检查带来的安全性和开发体验。组件的类型定义更加清晰，减少了运行时错误。
Fragment 支持：Vue 3 支持 Fragment，允许组件返回多个根节点。这使得组件结构更加灵活，无需再包裹在一个单一的根节点中。
Teleport：Teleport 是一个新的内置组件，用于将子组件的 DOM 移动到 DOM 树中的其他位置。这在处理模态框、通知等场景时特别有用。
```
<teleport to="#modal">
  <div>这是一个模态框内容</div>
</teleport>
```
Suspense：Suspense 组件用于处理异步组件的加载状态，允许开发者在数据加载时展示占位符，提升用户体验。
更好的逻辑复用：除了组合式 API，Vue 3 还引入了 provide/inject API，允许跨层级的组件共享状态和逻辑，增强了组件间的解耦性。

1.4 Vue2与Vue3的区别

Vue 3 相比 Vue 2 有许多显著的区别与改进，主要体现在性能、API 设计、响应式系统等方面。以下是一些关键的区别与改进：

1. 组合式 API (Composition API)

Vue 2：主要使用选项式 API（Options API），通过 data、methods、computed 等选项来定义组件的行为。
Vue 3：引入了组合式 API，允许开发者在 setup 函数中更灵活地组织逻辑，支持更好的逻辑复用和代码组织。

2. 性能提升

虚拟 DOM：Vue 3 对虚拟 DOM 的实现进行了优化，使得渲染性能更高，特别是在处理复杂组件和大量数据时。
编译优化：Vue 3 在编译时进行了多项优化，减少了运行时的开销，提高了整体性能。

3. 响应式系统

Vue 2：使用 Object.defineProperty 实现响应式，存在一些限制（如无法监听数组的某些操作）。
Vue 3：使用 Proxy API 实现响应式，支持更全面的特性，包括对数组和对象的更好支持，且性能更优。

4. TypeScript 支持

Vue 2：虽然支持 TypeScript，但集成不是很好，类型声明不够完善。
Vue 3：原生支持 TypeScript，改进了类型声明，使得开发者能够更方便地使用 TypeScript，提供更好的类型安全。

5. Fragment 支持

Vue 2：每个组件必须有一个单一的根节点。
Vue 3：支持 Fragment，允许组件返回多个根节点，提供了更大的灵活性。

6. Teleport

Vue 2：没有内置的解决方案来处理 DOM 结构的灵活性。
Vue 3：引入了 Teleport 组件，允许将子组件的 DOM 移动到父组件外部，适用于模态框、通知等场景。

7. Suspense

Vue 2：没有内置的支持来处理异步组件的加载状态。
Vue 3：引入了 Suspense 组件，允许在加载异步组件时展示占位符，提高用户体验。

8. 更好的逻辑复用

Vue 2：主要依赖混入（mixins）和高阶组件（HOC）来复用逻辑，容易导致命名冲突和代码难以跟踪。
Vue 3：组合式 API 和 provide/inject API 使得逻辑复用更加清晰和可控，减少了命名冲突的可能性。

9. 新生命周期钩子

Vue 3 引入了新的生命周期钩子，如 onBeforeMount、onMounted、onBeforeUpdate 等，提供了更细粒度的控制。

10. 生态系统的更新

Vue 3 伴随的生态系统（如 Vue Router 和 Vuex）也进行了重构和升级，以支持新的特性和改进。

下面是 Vue 3 与 Vue 2 在语法和风格上的主要区别：

1. 组件定义

Vue 2：使用选项式 API，通过 data、methods、computed 等选项定义组件。

Vue.component('example-component', {
  data() {
    return {
      message: 'Hello Vue 2!'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
});

Vue 3：使用组合式 API，可以在 setup 函数中定义响应式状态和方法。

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3!');
    const greet = () => {
      console.log(message.value);
    };

    return { message, greet };
  }
};

2. 响应式数据

Vue 2：使用 data 函数返回一个对象，属性需要手动声明为响应式。

Vue 3：使用 ref 和 reactive 函数来创建响应式数据。

// Vue 2
data() {
  return {
    count: 0
  };
}

// Vue 3
const count = ref(0);

3. 计算属性和侦听器

Vue 2：使用 computed 和 watch 选项。

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
},
watch: {
  count(newVal) {
    console.log('Count changed:', newVal);
  }
}

Vue 3：在 setup 函数中使用 computed 和 watch 函数。

import { computed, watch } from 'vue';

const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('');
});

watch(count, (newVal) => {
  console.log('Count changed:', newVal);
});

4. 生命周期钩子

Vue 2：使用选项来定义生命周期钩子。

mounted() {
  console.log('Component mounted');
}

Vue 3：使用 onMounted 等函数。

import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component mounted');
});

5. 逻辑复用

Vue 2：主要依赖混入（mixins）和高阶组件（HOC）。
```
mixins: [myMixin]
```

Vue 3：使用组合式 API 和 provide/inject，逻辑复用更清晰。

import { provide, inject } from 'vue';

// 提供
provide('key', value);

// 注入
const value = inject('key');

6. 模板语法

Vue 2 和 Vue 3 的模板语法基本相同，但 Vue 3 的组合式 API 提供了更灵活的方式来处理逻辑。

7. Fragment 支持

Vue 2：每个组件必须有一个单一的根节点。

Vue 3：支持 Fragment，可以返回多个根节点。

<template>
  <div>部分1</div>
  <div>部分2</div>
</template>

8. Teleport 和 Suspense

Vue 2：没有内置支持。
Vue 3：可以使用 Teleport 和 Suspense 组件来处理复杂的 UI 需求。

组合式、选项式和渐进式

在 Vue 3 中，组合式、选项式和渐进式 API 是三种不同的编程范式。它们各自有不同的特点和使用场景。以下是它们的主要区别：

1. 选项式 API（Options API）

定义：这是 Vue 2 中的主要编程方式，使用对象选项（如 data、methods、computed 等）来定义组件的行为。
特点：
- 结构化：组件的逻辑按功能划分为多个选项，易于理解。
- 命名冲突：在使用混入（mixins）时，可能会出现命名冲突。
- 逻辑复用：逻辑复用主要依赖混入和高阶组件，可能导致代码难以追踪。

示例：

Vue.component('example', {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  }
});

2. 组合式 API（Composition API）

定义：Vue 3 引入的新 API，允许在 setup 函数中组合逻辑，使用 ref、reactive 等函数来管理状态。
特点：
- 灵活性：逻辑可以按需组合，易于重用和组织。
- 可读性：可以更清晰地表示组件的逻辑，特别是在处理复杂逻辑时。
- 类型安全：与 TypeScript 结合使用时，能够提供更好的类型支持。

示例：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    const doubleCount = computed(() => count.value * 2);

    return { count, increment, doubleCount };
  }
};

3. 渐进式 API（Progressive API）

定义：渐进式 API 并不是一个独立的 API，而是指 Vue 的设计理念，允许开发者逐步采用 Vue 的特性。Vue 3 仍然支持 Vue 2 的选项式 API，同时引入了组合式 API。
特点：
- 兼容性：开发者可以在现有的 Vue 2 项目中逐步引入 Vue 3 的新特性，而不需要完全重构。
- 灵活性：可以根据项目需求选择使用选项式 API 或组合式 API，提供了更大的灵活性。

总结

选项式 API：结构化、易于理解，但在逻辑复用和复杂组件时可能不够灵活。
组合式 API：提供更高的灵活性和可重用性，适合复杂逻辑和 TypeScript 项目。
渐进式 API：允许开发者逐步采用新特性，保持与旧版的兼容性，支持灵活的开发方式。

开发者可以根据项目的需求和复杂性选择合适的 API。对于简单组件，可以继续使用选项式 API，而对于复杂组件，组合式 API 提供了更好的组织和复用方式。

总结

Vue 3 在语法和风格上引入了组合式 API，使得代码更加灵活、可读和可维护。响应式系统的改进和逻辑复用的方式变化，使得开发者能够更高效地组织和管理代码。

Vue

前端

License: CC BY 4.0