vue2和vue3什么区别

2025-06-05 132 阅读2分钟

在使用上

用组合式API替换选项式API,方便逻辑更加的聚合
一些细节的使用点改变
1. 因为改成组合式API所以没有this
2. 生命周期没有create，setup等同于create
3. vue3的v-if优先级高于v-for
4. 根实例的创建从new App变成了createApp方法
5. 一些全局注册，比如mixin，注册全局组件，use改成了用app实例调用，而不是用vue类调用
6. 新增了传送门teleport组件
7. template模板可以不包在一个根div里

原理方面

响应式原理使用了proxy，解决了数组无法通过下标修改，无法监听到对象属性的新增和删除问题，也提升了响应式的效率
- vue3并不是完全抛弃了defineProperty,通过reactive定义的响应式数据通过proxy包装出来，而ref定义基本数据类型还是用的defineProperty去给一个空对象，定义了一个value属性来做的响应式
组合式API的写法下，源码改成了函数式编程，方便按需引入，因为tree-shaking功能必须配合按需引入写法，所以vue3更好的配合tree-shaking能让打包体积更小
diff性能优化，增加了静态节点标记，不会对静态节点进行比对，从而增加了效率；具体标记策略：使用{{}}变量的标记1，class定义了变量的标记为2

进阶操作方面

vue3不推荐使用mixin进行复用逻辑提取，而是推荐写成hook；因为mixin的逻辑容易和组价自身逻辑相冲突，写法更贴合于选项式API，无法和组合式API配合
v-model应用于组件时,监听的事件和传递的值改变；vue2传递value，监听的change/input；vue3传递的modelValue，监听update:modelValue事件

//vue2中
<!-- 父组件 -->
<ChildComponent v-model="message" />

<!-- 等价于 -->
<ChildComponent :value="message" @input="message = $event" />

//子组件实现
<template>
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['value']
}
</script>

//vue3中
<!-- 父组件 -->
<ChildComponent v-model="message" />

<!-- 等价于 -->
<ChildComponent 
  :modelValue="message"
  @update:modelValue="message = $event"
/>

//子组件实现
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['modelValue']
}
</script>

ts更好的配合