浅谈vue2.0与vue3.0的区别（整理十六点）
目录
1. 实现数据响应式的原理不同
2. 生命周期不同
3. vue 2.0 采用了 option 选项式 API，vue 3.0 采用了 composition 组合式 API
4. 新特性编译宏
5. 父子组件间双向数据绑定 v-model 不同
6. v-for 和 v-if 优先级不同
7. 使用的 diff 算法不同
8. 兄弟组件间的通信 eventBus
9. vue 3.0 提供了 TypeScript 支持
10. 脚手架不同
11. 获取 DOM 的方法不同
12. vue-router 的使用细节
13. vuex 与 pinia
14. vue 3.0 废除了 filters 过滤器的使用
15. template 模版中根标签的问题
16. 语法细节的不同
写在最后：
1. 实现数据响应式的原理不同
① vue 2.0：
- 通过 es5 的语法 Object.defineProperty()，数据劫持的方式实现数据的响应式。
② vue 3.0：
- 通过 Proxy 代理对象的方式实现数据的响应式。
- 因此，又多了一些定义响应式数据的方法，如 ref、reactive、roRef、toRefs。
- ref：接收简单类型或者对象类型的数据传入并返回一个响应式的对象。（RefImpl）修改值，获取值的时候，需要.value。
- reactive：接受对象类型数据的参数传入并返回一个代理响应式的对象。（Proxy）
- toRef：转换响应式对象中某个属性为单独响应式数据，并且值是关联的。
- toRefs：转换响应式对象中所有属性为单独响应式数据，并且值是关联的。
2. 生命周期不同
① vue 2.0 一共 10 个生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated：keep-alive 组件缓存技术，激活
- deactivated：keep-alive 组件缓存技术，未激活
- beforeDestroy
- destroyed
② vue 3.0 一共 7 个生命周期
- setup
- onBeforeMount
- onMounted
- onBeforeUpdate
- onUpdated
- onBeforeUnmount
- onUnmounted
总结：
- 废弃了 activated、deactivated 生命周期函数。
- setup 函数是整个组件的起点，执行时机在 beforeCreate 之前，所以没有办法拿到当前组件实例 this。
- 但是 setup 函数里可以接收两个形参 props 和 context。
- props 为属性
- context 为当前组件实例，也是就相当于vue 2.0 中的 this。
- vue 3.0 中的生命周期函数使用函数调用的方式执行，所以可以多次调用执行。
3. vue 2.0 采用了 option 选项式 API，vue 3.0 采用了 composition 组合式 API
① option API
- 数据定义在 data 里，属性定义在 props 里，计算属性定义在 computed 里，方法定义在 methods 里。
- 相较于 vue 3.0 则更易于学习和使用。
② composition API
- 一个功能逻辑的代码组合在一起。
- 相较于 vue 2.0 更易于阅读和维护。
小插曲，谈一谈自己对于 vue 2.0 和 vue 3.0 的选项式 API 和组合式 API 的理解：
vue 3.0 是在 2020 年 10 月发布的。由于写 vue 2.0 的时间比较早，所以当时在转入 vue 3.0 的时候，并没有花太多时间。感受最深的一点就是，在 vue 3.0 中无法使用 this，前文已经谈过 this 的问题，在这里不再赘述。而 vue 3.0 也可以分为两个版本，vue 3.3 以下的版本，其实感觉还是 option API 的写法，因为在 setup 函数平级的节点中，依然可以定义 props 和 components 节点，只不过是把数据和方法定义在 setup 函数里，然后通过 return 出来使用。
在 vue 3.3 及 3.3 以上的版本中，引入了 <script setup> 语法糖。此时，props 和 components 这些节点就不存在了，setup 函数也没有 return 了，那么为了使用 props 和 context 等，又提供了一些新的编译宏。
4. 新特性编译宏
常用的编译宏如下：
- defineProps：定义属性
-
defineEmits：定义自定义的事件的触发
-
defineExpose：向外暴露组件的属性和方法
-
在非语法糖的写法中，通过 setup 函数的 return 出来了属性和方法，所以无须使用defineExpose
-
-
defineOptions：向外暴露组件的一些自定义属性，如 name
-
defineModel：vue 3.0 中父子组件间的双向数据绑定
-
const modelValue = defineModel()
-
5. 父子组件间双向数据绑定 v-model 不同
① vue 2.0：
- 父组件默认传递的属性是 value，子组件默认触发的自定义事件是 input
② vue 3.0：
- 父组件默认传递的属性是 modelValue，子组件默认触发的自定义事件是 update:modelValue
6. v-for 和 v-if 优先级不同
- vue 2.0 中 v-for 的优先级高
- vue 3.0 中 v-if 的优先级高
7. 使用的 diff 算法不同
① vue 2.0
- 同级比较，根元素变化，整个 dom 树删除重建
- 根元素未变
- 属性改变，更新属性
- 子元素内容改变
- 无 key 就地更新
- 有 key 按 key 比较
② vue 3.0
- 将静态节点与动态节点分离
- 通过高效标记和打补丁的方式，更新 dom
总结：
- 所以 vue 3.0 的渲染性能优于 vue 2.0
8. 兄弟组件间的通信 eventBus
- vue 2.0 中的 eventBus 是一个 vue 的实例对象
- vue 3.0 中的eventBus 是 mitt 库
9. vue 3.0 提供了 TypeScript 支持
10. 脚手架不同
- vue 2.0 的打包工具是 webpack
- vue 3.0 的打包工具是 vite
11. 获取 DOM 的方法不同
- vue 2.0 直接绑定 ref，使用 this.ref.属性名的方式直接获取
- vue 3.0 需要先定义 const box = ref(null)，再进行绑定
12. vue-router 的使用细节
① vue 2.0
- 通过 this.$router 和 this.$route 拿到全局的路由对象和当前的路由对象
- 路由前置守卫
- to: 即将要进入的目标 路由对象
- from:当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 放行路由跳转
- next(false)：拦截路由跳转
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})② vue 3.0
- 通过 const router = useRouter() 和 const route = useRoute() 拿到全局的路由对象和当前的路由对象
- 路由前置守卫
- 少了 next
- return false 拦截回 from 的地址页面
-
return undefined / true 直接放行
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})13. vuex 与 pinia
① vue 2.0 vuex
- state 定义数据
- mutations 执行同步代码，修改 state 中的数据必须通过 mutations，在组件中通过 commit 提交 mutation 的方式
- actions 执行异步操作，在组件中通过中通过 dispatch 派遣 action 的方式
- getters 类似于 computed 计算属性或者过滤器
- modules 模块化
② vue 3.0 pinia
- 将 mutations 和 actions 合二为一，不在区分同步和异步操作，去掉了 modules 模块化的概念，每一个 store 都是一个独立的模块
- 提供了丰富的插件配置及配置对象，如在实现数据本地持久化上，可以通过插件直接配置 persist: true就可以直接实现。
- 当时写 vue 2.0 的项目，记得是自己封装了一个 get、set 操作 localstorage 的方法去实现本地数据的持久化
14. vue 3.0 废除了 filters 过滤器的使用
15. template 模版中根标签的问题
- vue 2.0 中必须有一个根标签元素，vue 3.0 则不用
16. 语法细节的不同
- 此外就是一些语法上的使用细节，不做深入比较阐述了。
- 如：vue 3.0 一般是通过 Createxxx 创建实例
- CreateApp 创建 vue 实例
- CreateRouter 创建路由对象
- CreatePinia 创建 pinia
写在最后：
个人实际开发中，使用下来感受到的区别和不同点，欢迎大佬们修正与补充。借用人民日报今年的广告语，“请你努力，为了你自己。”