前端学习之路(4) vue2和vue3的区别

一. 根节点不同

  1. vue2中必须要有根标签
  2. vue3中可以没有根标签,会默认将多个根标签包裹在一个fragement虚拟标签中,有利于减少内存。

二. 组合式API和选项式API

  1. 在vue2中采用选项式API,将数据和函数集中起来处理,将功能点切割了当逻辑复杂的时候不利于代码阅读。
  2. 在vue3中采用组合式API,将同一个功能的代码集中起来处理,使得代码更加有序,有利于代码的书写和维护。

三. 生命周期的变化

创建前:beforeCreate -> 使用setup()

创建后:created -> 使用setup()

挂载前:beforeMount -> onBeforeMount

挂载后:mounted -> onMounted

更新前:beforeUpdate -> onBeforeUpdate

更新后:updated -> onUpdated

销毁前:beforeDestroy -> onBeforeUnmount

销毁后:destroyed -> onUnmounted

异常捕获:errorCaptured -> onErrorCaptured

被激活:onActivated 被包含在中的组件,会多出两个生命周期钩子函数。被激活时执行。

切换:onDeactivated 比如从 A 组件,切换到 B 组件,A 组件消失时执行

四. v-if和v-for的优先级

  1. 在vue2中v-for的优先级高于v-if,可以放在一起使用,但是不建议这么做,会带来性能上的浪费
  2. 在vue3中v-if的优先级高于v-for,一起使用会报错。可以通过在外部添加一个标签,将v-for移到外层

五. diff算法不同

  1. vue2中的diff算法
  • 遍历每一个虚拟节点,进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方。
  • 用patch记录的消息去更新dom
  • 缺点:比较每一个节点,而对于一些不参与更新的元素,进行比较是有点消耗性能的。
  • 特点:特别要提一下Vue的patch是即时的,并不是打包所有修改最后一起操作DOM,也就是在vue中边记录变更新。(React则是将更新放入队列后集中处理)。
  1. vue3中的diff算法
  • 在初始化的时候会给每一个虚拟节点添加一个patchFlags,是一种优化的标识。
  • 只会比较patchFlags发生变化的节点,进行识图更新。而对于patchFlags没有变化的元素作静态标记,在渲染的时候直接复用。

六. 响应式原理不同

  1. vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现,Object.definedProperty()会遍历每一个属性。
  2. vue3通过proxy代理的方式实现。
  3. proxy的优势:不需要像Object.definedProperty()的那样遍历每一个属性,有一定的性能提升proxy可以理解为在目标对象之前架设一层"拦截",外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。
  4. 当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历,会自动监听所有属性,有利于性能的提升

七. 插槽方式不同

  1. 在vue2中

匿名插槽

复制代码
子组件:
<div>
	<slot></slot>
</div>

父组件:
<child>
  <span>我是插槽插入的内容</span>
</child>

具名插槽

复制代码
子组件:
<div>
  <slot name="person"></slot>
</div>

父组件:
<child>
  <span slot="person">我是插槽插入的内容</span>
</child>

作用域插槽:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。不过,我们可以在父组件中使用slot-scope 特性从子组件获取数据

复制代码
<div>
  <slot :data="data"></slot>
</div>
父组件:
<child>
  <span slot-scope="data">我是插槽插入的内容</span>
</child>
  1. 在vue3中

匿名插槽:和在vue2中一样

具名插槽:

复制代码
子组件:
<div>
  <slot name="person"></slot>
</div>
父组件:
<child>
  <template v-slot:person>
    <span>我是插槽插入的内容</span>
  </template>
</child>

作用域插槽:

复制代码
子组件:
<div>
  <slot :data="data"></slot>
</div>
父组件:
<child>
  <span #data>我是插槽插入的内容</span>  === <span #default="{data}">我是插槽插入的内容</span>
</child>
  1. 总结:
  • 具名插槽使用方式不同:vue2使用slot='',vue3使用v-slot:''
  • 作用域插槽使用方式不同:vue2中在父组件中使用slot-scope="data"从子组件获取数据,vue3中在父组件中使用 #data 或者 #default="{data}"获取

八. 样式穿透

vue2中:

复制代码
/deep/ .类名{}
::v-deep .类名{}

vue3中:

复制代码
:deep (.类名{})
::v-deep(.类名{})
相关推荐
袁煦丞7 分钟前
低成本私有云存储方案Nas-Cab:cpolar实验室第508次成功挑战
前端·程序员·远程工作
小公主8 分钟前
「前端必备」Flex 布局全解析:从入门到深度计算,搞懂弹性盒子!
前端·css
江城开朗的豌豆24 分钟前
前端性能救星!用 requestAnimationFrame 丝滑渲染海量数据
前端·javascript·面试
江城开朗的豌豆25 分钟前
src和href:这对'双胞胎'属性,你用对了吗?
前端·javascript·面试
江城开朗的豌豆32 分钟前
forEach遇上await:你的异步代码真的在按顺序执行吗?
前端·javascript·面试
万少40 分钟前
HarmonyOS Next 弹窗系列教程(3)
前端·harmonyos·客户端
~Yogi2 小时前
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
学习·spring·缓存
七灵微2 小时前
【后端】单点登录
服务器·前端
Moonnnn.4 小时前
【单片机期末】单片机系统设计
笔记·单片机·嵌入式硬件·学习
行云流水剑6 小时前
【学习记录】使用 Kali Linux 与 Hashcat 进行 WiFi 安全分析:合法的安全测试指南
linux·学习·安全