vue2和vue3的区别

1. 响应式原理不同
  • vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的
  • vue3发生了改变,使用proxy替换Object.defineProerty,使用Proxy的优势:
  • 可直接监听数组类型的数据变化 性能的提升 监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升 可直接实现对象属性的新增/删除
javascript 复制代码
相比于vue2.x,使用proxy的优势如下
defineProperty只能监听某个属性,不能对全对象监听
可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化
2. 组合式API和选项式API

在vue2中采用选项式API,将数据和函数集中起来处理,将功能点切割了当逻辑复杂的时候不利于代码阅读。

在vue3中采用组合式API,将同一个功能的代码集中起来处理,使得代码更加有序,有利于代码的书写和维护。

3. 生命周期的变化

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

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

挂载前:beforeMount -> onBeforeMount

挂载后:mounted -> onMounted

更新前:beforeUpdate -> onBeforeUpdate

更新后:updated -> onUpdated

销毁前:beforeDestroy -> onBeforeUnmount

销毁后:destroyed -> onUnmounted

异常捕获:errorCaptured -> onErrorCaptured

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

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

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

在vue2中v-for的优先级高于v-if,可以放在一起使用,但是不建议这么做,会带来性能上的浪费

在vue3中v-if的优先级高于v-for,一起使用会报错。可以通过在外部添加一个标签,将v-for移到外层

5. diff算法不同

vue2中的diff算法

遍历每一个虚拟节点,进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方。

用patch记录的消息去更新dom

缺点:比较每一个节点,而对于一些不参与更新的元素,进行比较是有点消耗性能的。

特点:特别要提一下Vue的patch是即时的,并不是打包所有修改最后一起操作DOM,也就是在vue中边记录变更新。(React则是将更新放入队列后集中处理)。

vue3中的diff算法

在初始化的时候会给每一个虚拟节点添加一个patchFlags,是一种优化的标识。

只会比较patchFlags发生变化的节点,进行识图更新。而对于patchFlags没有变化的元素作静态标记,在渲染的时候直接复用。

6. 根节点不同
  • 在vue2中:必须要有根标签,一旦根节点有多个,vue会发出报错
  • 在vue3中:vue3中可以没有根标签,会默认将多个根标签包裹在一个fragement虚拟标签中,有利于减少内存。支持多根节点(减少了DOM元素的嵌套层级)
7. 插槽方式不同

在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>

在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>

总结:

具名插槽使用方式不同:vue2使用slot='',vue3使用v-slot:''

作用域插槽使用方式不同:vue2中在父组件中使用slot-scope="data"从子组件获取数据,vue3中在父组件中使用 #data 或者 #default="{data}"获取

8. 样式穿透

vue2中:

/deep/ .类名{}

css 复制代码
/deep/ .el-header {
  padding: 0px;
}
/deep/ .el-aside {
  width: 230px !important;
}

vue3中:

:deep (.类名{})

::v-deep(.类名{})

css 复制代码
::v-deep .el-input__inner {
	color: #ffffff;
}
css 复制代码
:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow-y: auto;
}
9. typescript支持
  • vue2中:默认是不支持typescript的。
  • vue3中:支持使用typescript,使用typescript在构建大型项目时,能够很好的提高项目开发的质量。
相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王2 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪3 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6415 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻5 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云5 小时前
npm淘宝镜像
前端·npm·node.js