Vue3与Vue2的区别

eqa11

于 2024-10-02 16:28:24 发布

阅读量426

点赞数 16

文章标签： vue.js uni-app

本文链接：https://blog.csdn.net/NiNg_1_234/article/details/142682501

版权

文章目录

Vue3与Vue2的区别

Vue3与Vue2的区别

一、引言

Vue.js 是一个流行的前端框架，以其易用性和灵活性而闻名。随着前端技术的发展，Vue.js 也迎来了它的3.0版本。Vue 3 不仅带来了性能的提升，还在语法和API上做了诸多改进。本文将详细比较 Vue 3 和 Vue 2 的主要区别，帮助开发者更好地理解 Vue 3 的新特性。

二、响应式系统的升级

1、第一步：响应式原理的变化

Vue 2 使用的是 Object.defineProperty 来实现响应式系统，这在大多数情况下工作良好，但有一些局限性，比如不能检测到对象属性的添加或删除。

1.1、Vue 3 的响应式原理

Vue 3 引入了基于 Proxy 的响应式系统，解决了 Vue 2 中的问题，可以精确地追踪动态添加的属性。Proxy 为 Vue 3 提供了更全面的响应式能力，包括对数组索引和长度的监听。

// Vue 3 reactive 示例
import { reactive } from 'vue';

const state = reactive({
  count: 0
});

// 可以直接监听 count 的变化
watch(() => state.count, (newCount) => {
  console.log(`count changed to: ${newCount}`);
});

2、第二步：Composition API 的引入

Vue 3 引入了 Composition API，提供了一种更灵活的编写组件逻辑的方式。

2.1、组合式 API

Composition API 允许开发者更灵活地组织代码，逻辑相关的函数可以放在一起，而不是分散在 options 中。这让代码更易于维护，特别是对于复杂的组件。

<script setup>
import { ref, onMounted } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

onMounted(() => {
  console.log(`The initial count is ${count.value}.`);
});
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

三、性能优化

Vue 3 在性能上进行了诸多优化，如虚拟 DOM 的重写、事件处理的改进等。

1、虚拟 DOM 的改进

Vue 3 重写了虚拟 DOM 的实现，使得 diff 算法更加高效。新增的 patchFlag 功能可以标记不同类型的节点，优化了 DOM 更新过程。

2、事件处理的改进

Vue 3 改进了事件处理机制，缓存了事件处理函数，避免了不必要的函数创建，减少了内存开销。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
};
</script>

四、新特性

1、Teleport 组件

Vue 3 新增了 Teleport 组件，允许将组件的 DOM 放到应用的其他部分，这对于处理弹出框等场景非常有用。

<template>
  <teleport to="body">
    <div class="backdrop"></div>
    <div class="dialog">
      Teleported content
    </div>
  </teleport>
</template>

2、Fragment、Suspense

Vue 3 支持了多个根节点，引入了 Fragment 和 Suspense 组件，可以更方便地处理异步组件。

<template>
  <suspense>
    <template #default>
      <async-component />
    </template>
    <template #fallback>
      Loading...
    </template>
  </suspense>
</template>

<script>
const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent')
);
</script>

3、全局 API 的改变

Vue 3 对全局 API 进行了重构，很多全局 API 需要通过 app 实例来访问，以更好地支持模块化和 tree-shaking。

// Vue 3全局API使用示例
import { createApp, nextTick } from 'vue';
const app = createApp({});

app.config.globalProperties.$myGlobalProperty = 'Hello, Vue 3';

app.mount('#app');

nextTick(() => {
  console.log('The app has been mounted.');
});

五、TypeScript 支持

Vue 3 重写为 TypeScript，提供了更好的 TypeScript 支持，使得开发者可以享受到 TypeScript 带来的类型安全和开发体验。

// Vue 3 TypeScript 示例
import { defineComponent, ref } from 'vue';

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