浅谈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

写在最后：

个人实际开发中，使用下来感受到的区别和不同点，欢迎大佬们修正与补充。借用人民日报今年的广告语，“请你努力，为了你自己。”