Vue入门总结

Vue3 和 Vue2 的区别

1. 架构与性能

Vue 2：

基于 Options API，逻辑分散在 data、methods、computed 等选项中
使用 Flow 进行类型检查
性能优化有限，例如虚拟 DOM 的更新效率较低

Vue 3：

引入了 Composition API，允许将逻辑按功能组织，提升代码的可读性和复用性
使用 TypeScript 重写，提供了更好的类型支持
性能大幅提升：
- 虚拟 DOM 重写，优化了 diff 算法
- 支持 Tree Shaking，减小打包体积
- 更好的响应式系统（基于 Proxy）

2. 响应式系统

Vue 2：

使用 Object.defineProperty 实现响应式
无法检测到对象属性的新增或删除，需要通过 Vue.set 或 Vue.delete 处理
数组的某些操作（如通过索引修改元素）无法触发响应式更新

Vue 3：

使用 Proxy 实现响应式，解决了 Vue 2 中的限制
支持直接监听对象属性的新增和删除
数组操作更自然，无需特殊处理

3. Composition API

Vue 2：

使用 Options API，代码组织方式：

export default {
  data() { ... },
  methods: { ... },
  computed: { ... },
  watch: { ... }
}

Vue 3：

使用 Composition API，代码组织方式：

import { ref, computed, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    
    watch(count, (newValue) => {
      console.log('count changed:', newValue)
    })
    
    return { count, double }
  }
}

4. 生命周期

Vue 2：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

Vue 3：

setup (替代了 beforeCreate 和 created)
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted

5. 指令系统

Vue 2：

v-model 只能用于表单元素
自定义指令使用 Vue.directive 注册

Vue 3：

v-model 可以用于任何组件
支持多个 v-model 绑定
自定义指令支持更多生命周期钩子

6. 其他重要变化

TypeScript 支持：
- Vue 3 使用 TypeScript 重写
- 提供更好的类型推导
- 更好的 IDE 支持
新特性：
- Teleport 组件
- Suspense 组件
- 多根节点组件
- 更好的 Tree-shaking 支持
性能优化：
- 更小的包体积
- 更快的渲染速度
- 更好的内存使用

7. 迁移建议

渐进式迁移：
- 使用 @vue/composition-api 在 Vue 2 中尝试 Composition API
- 使用官方迁移构建版本
- 使用迁移助手工具
重点关注：
- 全局 API 的变化
- 生命周期钩子的变化
- 响应式系统的变化
- 模板语法的变化
最佳实践：
- 使用 TypeScript
- 采用 Composition API
- 利用新特性优化代码
- 注意性能优化

8. 总结

Vue 3 相比 Vue 2 有重大改进：

更好的性能
更好的 TypeScript 支持
更灵活的代码组织方式
更现代的开发体验

建议新项目直接使用 Vue 3，现有项目可以根据实际情况决定是否迁移。