vue3相较于vue2有哪些修改？解决了哪些问题？

Vue3 改进与特性详解

1. 性能提升

1.1 全新的响应式系统

Vue3使用Proxy替代了Vue2中的Object.defineProperty，解决了以下问题：

• 无法检测对象属性的添加/删除
• 无法检测数组索引和长度的变更
• 更好的性能表现

// Vue2 使用 Object.defineProperty
const obj = {}
Object.defineProperty(obj, 'count', {
  get() {
    return value
  },
  set(newValue) {
    value = newValue
    // 触发更新
  }
})

// Vue3 使用 Proxy
const obj = reactive({
  count: 0
})
// Proxy 可以监听整个对象，包括：
// - 属性的添加和删除
// - 数组索引和长度的变更
// - Map、Set、WeakMap、WeakSet 的操作

1.2 虚拟DOM重写

• 优化了diff算法
• 提升了渲染性能
• 更好的静态树提升

// 编译前
<div>
  <div>静态内容</div>
  <div>{{ dynamic }}</div>
</div>

// 编译后
const hoisted = createVNode('div', null, '静态内容')

function render() {
  return createVNode('div', null, [
    hoisted,  // 静态节点被提升
    createVNode('div', null, ctx.dynamic)
  ])
}

2. 组合式API (Composition API)

2.1 代码组织改进

// 功能模块化
// useCounter.js
import { ref, computed } from 'vue'

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

// 组件中使用
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, doubleCount, increment } = useCounter()
    return { count, doubleCount, increment }
  }
}

3. 新的组件特性

3.1 Teleport

<template>
  <teleport to="#modal">
    <div class="modal">
      <slot></slot>
    </div>
  </teleport>
</template>

3.2 Suspense

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

4. 生命周期钩子变化

4.1 完整对比

// Vue2 生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

// Vue3 生命周期
setup() // 替代 beforeCreate 和 created
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount  // 改名
onUnmounted      // 改名
onErrorCaptured
onRenderTracked   // 新增
onRenderTriggered // 新增

5. 全局API变化

5.1 详细对比

// Vue2
Vue.use(router)
Vue.mixin({})
Vue.component('comp', {})

// Vue3
const app = createApp(App)
app.use(router)
app.mixin({})
app.component('comp', {})

6. 模板语法增强

6.1 多v-model支持

<template>
  <CustomInput
    v-model:title="title"
    v-model:content="content"
  />
</template>

6.2 动态组件改进

<template>
  <component :is="currentComponent" />
</template>

7. 自定义指令API改进

7.1 详细对比

// Vue2
Vue.directive('focus', {
  bind(el, binding, vnode) {},
  inserted(el, binding, vnode) {},
  update(el, binding, vnode, oldVnode) {},
  componentUpdated(el, binding, vnode, oldVnode) {},
  unbind(el, binding, vnode) {}
})

// Vue3
const app = createApp({})
app.directive('focus', {
  beforeMount(el, binding, vnode) {},
  mounted(el, binding, vnode) {},
  beforeUpdate(el, binding, vnode, prevVnode) {},
  updated(el, binding, vnode, prevVnode) {},
  beforeUnmount(el, binding, vnode) {},
  unmounted(el, binding, vnode) {}
})

8. TypeScript支持

8.1 类型推导示例

import { ref } from 'vue'

const count = ref(0) // 类型被推导为 Ref<number>
const message = ref('') // 类型被推导为 Ref<string>

// 组件Props类型
interface Props {
  title: string
  count?: number
}

defineProps<Props>()

9. 性能优化

9.1 包体积优化

• 核心库从 ~20KB 减少到 ~10KB
• 更好的tree-shaking支持
• 按需引入功能

9.2 编译优化

• 静态节点提升
• 补丁标记
• 块树跟踪

10. 适用场景

Vue3特别适合以下场景：

1. 大型企业级应用
2. 需要良好TypeScript支持的项目
3. 对性能要求较高的应用
4. 需要良好代码组织的团队项目

11. 主要优势总结

1. 更好的代码组织和复用
2. 更强的类型支持
3. 更高的性能
4. 更小的包体积
5. 更现代的开发体验