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) 瞬移新特性

相关文章
|
6天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
42 1
|
1月前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
123 3
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
64 8
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
55 1
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
60 1
|
26天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
127 1
|
5天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
31 8
|
6天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
35 1
|
2月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
106 58
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。