1. vue3 推荐的是组合式 API,而 vue2 写的是选项式 API

组合式 API 的话记得在 script 标签里价格 setup

<script setup>
</script>

组合式 API 其实 vue2.7 也是支持的. vue2.6 默认不支持,但是你可以通过引入插件的方式让老项目也能支持这个功能. 而且由此可以写组合式函数.

2. vue3 支持动态函数和动态参数,而 vue2 不可以

比如 vue3可以这么写

// 以下[]里的内容都可以是变量名,不用写死
<a :[attr]="attrValue"></a> // 动态参数
<div @[functionName]="">点我吧</div> //动态函数

3. 构建工具不一样.

vue2 一般都是用 webpack,vue3 默认推荐的是尤大自己写的 vite. 这几种主流的打包工具,可以按照抽象程度的不同进行分类,由高到低分别是:

vue-cli 这种抽象程度太高了,官方已经不默认推荐
而 vite 的抽象程度中等,性能大幅提高. vue 官方推荐的 vue3 打包工具
webpack,rollup 这种构建工具专注于打包 ,抽象程度低,自己还得写好多代码.

可以说 vite, 比较兼顾方便性和灵活性

4.script 里的语法多个地方不一样

比如 vue3申明响应式变量要用这几种类型.

申明直接类型用ref,
申明引用类型reactive

5. 状态管理工具不一样

vue2 的状态管理工具是 vuex, vue3 换成了兼容 vue2 和 vue3 的小菠萝Pinia

6. 生命周期不同和调用方式

1 是 vue3 的生命周期命名签名都有个 on
2 是多了 setup 这个函数 vue3 多了个 setup 函数和对应的生命周期,我们在 script 里写了 setup 的会被vue 编译的时候提取到 setup 函数里.

7. vue3 支持自定义指令

vue2 则不支持

8. 双向数据绑定的实现原理不一样

vue2 用的是 defineProperty. vue3 用的是 Proxy 比如vue3 的 reactive文件源码里的重要函数createReactiveObject 里最后几句代码是酱紫的

const proxy = new Proxy(
   target,
   targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)

  return proxy

9 vue3 支持### Fragments

vue3 因为支持 Fragments 所以可以在组件的外层写多个并元素比如vue2 只能这么写

<template>
    <div>
        content
    </div>
   
</template>

而 vue3 可以这样

<template>
    <div>
        
    </div>
   <div>
   </div>
</template>

10 其他不同

比如 vue2 子组件接收父组件传过来的数据用的是props, vue3的话是用的 defineProps.

vue2 和 vue3 比的十大不同