Vue2和Vue3的区别和变化

简介: Vue2和Vue3的区别和变化

vue2和vue3数据双向绑定原理发生改变

vue2:vue2的数据双向绑定Q 原理使用的是es5的数据劫持obiect.defineProperty配合发布订阅模式来实现


优点:兼容性相对好


vue3 :通过proxy的api (Reflect) 实现


优点: 可以直接监听对象而非属性,可以直接监听数组的变化,有多达 13 种兰截方法,不限于apply、ownKeys、deleteProperty、has 等等是Object.defineProperty 不具备的:


vue3支持碎片化 (Fragment)

组件中有多个根节点


优点: 减少标签层级,减少内存占用


vue2和vue3选用api不同 (v2和v3最大的不同点)

vue2: 采用选项式 API(Options API),在 vue2x 项目中使用的就是 选项API 写法


代码风格: date选项写数据,methods选项写函数,一个功能逻辑的代码分散


优点: 易于学习和使用,写代码的位置已经约走好了


缺点: 代码组织性差,相似的逻辑代码不便于复用,逻辑复杂代码多了不好阅读虽然提供了 mixins (混入) 用来封装逻辑,但是出现数据函数覆盖的概率很大,不好维护


vue3: 组合式 API(Composition API)


在 vue3 中使用的就是 组合API 写法


代码风格: 一个功能逻辑的代码组织在一起,包括据,函数、


优点: 功能逻辑复杂繁多情况下,各个功能逻辑代码组织再一起,便于阅读和维护


缺点: 需要有良好的代码组织能力和拆分逻辑能力vue3支持选项式api和组合式api


建立数据的方式

vue2:数据放在data中


vue3:需要使用setup方法,使用该方法需要引入


生命周期函数不同

去掉了vue2.0中的 beforeCreate 和 created 两个阶段,同样的新增了一个 setup


beforeMount 挂载之前 改名 onBeforeMount,mounted 挂载之后 改名 onMounted


beforeUpdate 数据更新之前 改名 onBeforeUpdate,updated 数据更新之后 改名 onUpdated


beforeDestroy 销毁前 改名 onBeforeUnmount,可在此进行清除定时器,进行事件监听,发布订阅。


destoryed 销毁后 改名 onUnmounted,errorCaptured 报错 改名 onErrorCaptured


父子传参方式不同

vue2:父传子: props,子传父: $emit


vue3: setup(函数特性,vue3还给我们提供了provide和inject,我们可以在父组件中通过provide暴露属性或方法,子组件通过iniect接受,并且只要是父组件的后代,都可以通过iniect接收到父组件暴露的值


vue3新增了 (teleport) 瞬移新特性

相关文章
|
3天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
9 0
|
4天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
13 3
|
6天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
19 0
|
6天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
6天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
16 0
|
7天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
22 0
|
7天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
7天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
2天前
|
JavaScript Java 关系型数据库
基于SprinBoot+vue的租房管理系统2
基于SprinBoot+vue的租房管理系统2
9 0