vue2与vue3

vue	vue router	vuex	element
2.0	3	3	Element
3.0	4	4	Element Plus
区别	迁移	迁移

目录

vue2和vue3的区别 

响应式

v-model

Provide / Inject

template标签

attrs

生命周期

风格

Teleport组件 - 新增

Suspense组件 - 新增

---

vue2和vue3的区别 

响应式

vue2

使用的是Object.defineProperty()对data的属性进行拦截，但是无法对新增的属性进行拦截，也无法对删除的属性进行拦截

vue3

reactive是基于proxy实现的，它可以拦截新增及删除的属性，但是无法拦截该对象整个的替换；

ref 最外层封装了一个属性value，value外层依然是靠Object.defineProperty()的get与set完成的；对于复杂属性，value也是通过Proxy实现，可以拦截obj.value上整个对象的替换

v-model

vue2中，是 :input、@input的语法糖，放在自定义组件上也是
vue3中，放在组件上是:model-value、@update::model-value的语法糖

Provide / Inject

vue2中，对于简单的数据类型，需要使用provide函数提供数据，在能在子组件中动态响应；对于引用类型，会动态获取
vue3可以提供响应式的数据，子组件接受的数据也会被响应

template标签

vue2中template不能拥有key
vue3中template可以设置key，比如在子节点为for循环的时候

attrs

vue2中this.$attrs是对属性的接收，this.$listeners是对事件的接收(未被)
vue3中context.attrs接收属性和事件

生命周期

vue3没有beforCreate、created函数，进入setup()函数就相当于进入create周期

风格

1.vue3添加了组合式API，可以把相同逻辑的代码写到一起

2.vue3每个vue文件的模板下可以有多个根元素

Teleport组件 - 新增

Teleport，把代码片段发送到已存在的dom中

to: 1.CSS 选择器字符串 2.DOM 元素对象

Suspense组件 - 新增

作用：有了 组件后，我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层展示出加载中或加载失败的状态

该标签有三个事件

• fallback: fallback插槽内容显示时触发
• pending: 事件是在进入挂起状态时触发, 例如Promise对象在挂起状态时
• resolve: 异步操作获取新数据后

两个插槽

• #fallback 插槽: 挂起状态展示；
• #default：异步组件加载完成后显示默认插槽的内容

运用场景：可在多个异步组件外层运用，当组件没加载完成时，显示loading

//index.vue




//A.vue



//B.vue

更新中