Vue2和Vue3的区别

1. 生命周期

vue2(左)和vue3(右)

创建前:BeforeCreate-----data和methods中的数据都没有初始化

创建后:Created-----实例创建完成                      (vue3将BeforeCreate和Created合并为setup

挂载前:BeforeMount() ----dom树已经生成,但还未挂载                           onbeforemount()

挂载后:Mounted----dom节点全部挂载完成                                                 onmounted()

更新前:BeforeUpdate()----数据更新前调用                                                 onbeforeupdate()

更新后:Updated()----数据已经更新,dom元素重新渲染                              onupdated()

销毁前:BeforeDestory()----实例摧毁前调用,清除定时器或取消事件监听 onbeforeunmount()

销毁后:Destroyed()----实例已经摧毁                                                           onunmount()

2.vue的响应式原理

通过数据劫持和发布者订阅者模式进行的,vue2中数据劫持是通过object.defineProperty(),而vue3中是通过Proxy

3.vue2和vue3最大的区别就是,vue3使用了Composition API (组合api)

4.vue的diff算法

通过旧的虚拟Dom树和新的Dom树进行比较,对有变化的dom节点进行更新。

  • 比较只会在同层级进行,不会跨层级比较
  • vue2是通过双向指针比较虚拟DOM,vue3通过最长递增子序列
  • vue2会对所有dom节点进行比较,Vue3只会对动态节点进行比较

5.父子传参的方式不同

5.1  Vue2中的父子组件传参:
父传子

props:在父组件中,给子组件绑定一个自定义属性,在子组件中,通过props进行接收

子传父

自定义事件:在父组件中,给子组件绑定一个自定义事件,绑定事件的值为接收参数的函数,在子组件中,通过$emit发送数据

5.2  Vue3中的父子组件传参:


vue3中,父组件中引入子组件后,不需要注册可直接使用。父传子时,子组件中通过defineProps方法接收,子传父时,子组件中通过defineEmits方法发送。
 

6.是否支持碎片化(Fragment)

也就是说vue3可以有多个根节点,而vue2只能必须只有一个根节点来包裹

相关推荐

  1. vue2vue3区别

    2024-01-09 20:38:05       55 阅读
  2. Vue3Vue2区别

    2024-01-09 20:38:05       50 阅读
  3. Vue2Vue3区别

    2024-01-09 20:38:05       61 阅读
  4. Vue2Vue3区别

    2024-01-09 20:38:05       48 阅读
  5. vue2vue3区别

    2024-01-09 20:38:05       51 阅读
  6. vue2vue3区别

    2024-01-09 20:38:05       46 阅读
  7. vue2vue3区别

    2024-01-09 20:38:05       43 阅读
  8. vue2vue3区别

    2024-01-09 20:38:05       33 阅读
  9. Vue3Vue2区别优化

    2024-01-09 20:38:05       51 阅读
  10. vue3vue2区别是什么

    2024-01-09 20:38:05       47 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-09 20:38:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-09 20:38:05       101 阅读
  3. 在Django里面运行非项目文件

    2024-01-09 20:38:05       82 阅读
  4. Python语言-面向对象

    2024-01-09 20:38:05       91 阅读

热门阅读

  1. DD小桔高级数分 2面挂

    2024-01-09 20:38:05       60 阅读
  2. Spring面试整理-Autowired和Resource关键字的区别

    2024-01-09 20:38:05       59 阅读
  3. beego框架编写食品溯源区块链后端

    2024-01-09 20:38:05       46 阅读
  4. 神经网络中的梯度爆炸

    2024-01-09 20:38:05       59 阅读
  5. Golang语言switch case

    2024-01-09 20:38:05       65 阅读
  6. 【XDOJ】C语言期末真题带练及思路分析

    2024-01-09 20:38:05       51 阅读
  7. mybatisplus Invalid bound statement (not found)

    2024-01-09 20:38:05       54 阅读
  8. docker 支持 gpu

    2024-01-09 20:38:05       64 阅读
  9. Vue使用vue-img-cropper实现图片裁剪

    2024-01-09 20:38:05       61 阅读
  10. 用python实现提取word中的所有图片

    2024-01-09 20:38:05       60 阅读