当前位置：首页 > article >正文

vue3和vue2的区别有哪些差异点

article 2025/1/29 8:00:29

Vue3 vs Vue2 主要差异对比指南

官网

1. 核心架构差异

1.1 响应式系统

Vue2：使用 Object.defineProperty 实现响应式

// Vue2 响应式实现
Object.defineProperty(obj, 'key', {
  get() {
    // 依赖收集
    return value
  },
  set(newValue) {
    // 触发更新
    value = newValue
  }
})

Vue3：使用 Proxy 实现响应式

// Vue3 响应式实现
const proxy = new Proxy(target, {
  get(target, key) {
    // 依赖收集
    track(target, key)
    return target[key]
  },
  set(target, key, value) {
    // 触发更新
    target[key] = value
    trigger(target, key)
    return true
  }
})

1.2 组合式 API vs 选项式 API

Vue2：主要使用选项式 API

// Vue2 组件
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  }
}

Vue3：引入组合式 API

// Vue3 组件
import { ref, computed } from 'vue'

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

2. 性能优化

2.1 虚拟 DOM

Vue2：
- 虚拟 DOM 更新时需要遍历整个虚拟 DOM 树
- 组件级别的更新优化

Vue3：

引入静态树提升
引入 Patch Flag 标记动态内容
基于 Block 的更新机制

<!-- Vue3 模板编译优化 -->
<div>
  <h1>静态内容</h1>
  <div :id="dynamicId">{{ dynamicContent }}</div>
</div>

2.2 编译优化

Vue2：
- 运行时确定更新范围
- 需要遍历更多不必要的节点

Vue3：

编译时优化
Tree-shaking 支持
更小的打包体积

// Vue3 按需导入
import { ref, onMounted } from 'vue'

3. 新特性对比

3.1 Fragment

Vue2：模板必须有一个根节点

<!-- Vue2 -->
<template>
  <div>
    <h1>标题</h1>
    <p>内容</p>
  </div>
</template>

Vue3：支持多个根节点

<!-- Vue3 -->
<template>
  <h1>标题</h1>
  <p>内容</p>
</template>

3.2 Teleport

Vue2：需要第三方库实现

Vue3：内置支持

<!-- Vue3 Teleport -->
<teleport to="body">
  <modal-component />
</teleport>

3.3 Suspense

Vue2：不支持

Vue3：内置支持异步组件

<!-- Vue3 Suspense -->
<Suspense>
  <template #default>
    <async-component />
  </template>
  <template #fallback>
    <loading-component />
  </template>
</Suspense>

4. API 差异

4.1 生命周期钩子

Vue2：

// Vue2 生命周期
export default {
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
}

Vue3：

// Vue3 生命周期
import { 
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  setup() {
    onBeforeMount(() => {})
    onMounted(() => {})
    onBeforeUpdate(() => {})
    onUpdated(() => {})
    onBeforeUnmount(() => {})
    onUnmounted(() => {})
  }
}

4.2 全局 API

Vue2：直接在 Vue 构造函数上挂载

// Vue2
Vue.component('my-component', {})
Vue.directive('my-directive', {})
Vue.mixin({})

Vue3：使用应用实例

// Vue3
const app = createApp({})
app.component('my-component', {})
app.directive('my-directive', {})
app.mixin({})

5. TypeScript 支持

5.1 类型系统

Vue2：

需要额外的装饰器支持
类型推导有限

// Vue2 with TypeScript
@Component
export default class MyComponent extends Vue {
  message: string = 'Hello'
}

Vue3：

原生支持 TypeScript
更好的类型推导

// Vue3 with TypeScript
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const message = ref<string>('Hello')
    return { message }
  }
})

6. 其他重要变化

6.1 v-model 变化

Vue2：

<!-- Vue2 -->
<custom-input
  v-model="value"
  @input="value = $event"
/>

Vue3：

<!-- Vue3 -->
<custom-input
  v-model:modelValue="value"
  @update:modelValue="value = $event"
/>

6.2 自定义指令

Vue2：

// Vue2 自定义指令
Vue.directive('my-directive', {
  bind(el, binding) {},
  inserted(el, binding) {},
  update(el, binding) {},
  componentUpdated(el, binding) {},
  unbind(el, binding) {}
})

Vue3：

// Vue3 自定义指令
app.directive('my-directive', {
  beforeMount(el, binding) {},
  mounted(el, binding) {},
  beforeUpdate(el, binding) {},
  updated(el, binding) {},
  beforeUnmount(el, binding) {},
  unmounted(el, binding) {}
})

7. 最佳实践建议

7.1 Vue3 推荐做法

使用组合式 API 管理复杂逻辑
利用 TypeScript 增强类型安全
使用新的内置组件（Fragment、Teleport、Suspense）
采用按需导入优化打包体积

7.2 迁移策略

渐进式迁移，可以同时使用选项式 API 和组合式 API
优先更新核心功能和性能瓶颈
使用官方迁移工具辅助迁移
关注废弃的特性和 Breaking Changes
简述：

Vue 3 vs Vue 2 主要区别

1. 响应式系统

Vue 2：使用 Object.defineProperty() 来实现数据的响应式。
Vue 3：使用 Proxy 对象进行数据响应式处理。相比 Vue 2，Proxy 具有更好的性能和更强的功能，支持更多的数据操作。

2. Composition API

Vue 2：采用 Options API 进行组件组织，使用 data、methods、computed 等选项来定义组件的状态和行为。
Vue 3：引入了 Composition API，通过 setup() 函数来组织组件的逻辑，使得逻辑更加灵活且易于复用。你可以使用 ref、reactive、computed 等 API 来管理状态和副作用。

3. 性能提升

Vue 2：性能相对较低，尤其在复杂的组件树和大量数据绑定时。
Vue 3：引入了虚拟 DOM 重写和优化，使得性能显著提升。Vue 3 的渲染机制更高效，尤其在大规模应用中，性能提升非常明显。

4. 生命周期钩子

Vue 2：生命周期钩子包括 created、mounted、updated、destroyed 等。
Vue 3：增加了新的生命周期钩子，主要有：
- onBeforeMount
- onMounted
- onBeforeUpdate
- onUpdated
- onBeforeUnmount
- onUnmounted
这些钩子可以在 Composition API 中使用。

5. TypeScript 支持

Vue 2：Vue 2 对 TypeScript 的支持较为有限，虽然有类型声明，但开发体验并不完全。
Vue 3：Vue 3 对 TypeScript 的支持非常好，几乎所有的 Vue 核心 API 都可以直接通过 TypeScript 进行类型推导，提升了开发体验和类型安全性。

6. Fragment 支持

Vue 2：组件只能有一个根元素（必须是一个包裹元素）。
Vue 3：引入了 Fragment 组件，允许组件有多个根元素，从而简化组件结构，避免不必要的 DOM 元素嵌套。

7. Teleport

Vue 2：需要借助第三方库或手动实现，才能将某个组件渲染到 DOM 的其他部分。
Vue 3：内置了 Teleport 组件，允许将子组件渲染到 DOM 的任意位置，非常适用于模态框、弹出层等需求。

8. Suspense

Vue 2：没有原生的 Suspense 机制，需要手动处理异步加载。
Vue 3：引入了 Suspense 组件，支持异步组件的加载和错误处理，提升了异步渲染的开发体验。

9. 动态组件

Vue 2：动态组件支持 v-bind 和 v-slot，通过 $set 动态更新组件内容。
Vue 3：支持 Suspense 和 v-is 动态组件选择，增强了动态组件的灵活性和易用性。

10. 其他 API 改进

Vue 2：$refs 和 $children 存在一些限制，特别是在动态组件中。
Vue 3：对 $refs 和 $children 的访问进行了优化，支持更灵活的组件引用管理。

11. 模板编译器

Vue 2：模板编译器的能力较为有限，模板的执行效率相对较低。
Vue 3：模板编译器进行了重写，支持静态树提升、编译时优化等，使得渲染更加高效。

12. 其他功能

Vue 2：支持 vue-router、vuex 等插件，但对 Vue 3 中的多个新特性（如 provide/inject）的支持不如 Vue 3。
Vue 3：除了原生支持 provide/inject，还通过 defineAsyncComponent 等增强了异步组件的功能，进一步提升了开发的灵活性。