vue2和vue3的区别(Vue3升级部分)

这篇具有很好参考价值的文章主要介绍了vue2和vue3的区别(Vue3升级部分)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

区别有两个目的:一面试说一下书面化的表达,二工作需要升级大白话说一下项目应用的区别。

双向数据绑定:

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.defineProperty()对数据进⾏劫持 结合 发布订阅(getter&setter)模式的⽅式来实现的。

vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理,使⽤ref或者reactive将数据转化为响应式数据,从⽽ 实现对数据的监控。

 应用就是:2中监听数据是单层的,有些数组,对象内部变化存在监听不到,对某些修改需要用$set强刷新赋值;3中不需要了类似可以实现内部监听。

实例化main.js:

2中new出的实例对象,所有的东西都在这个vue对象上,template里必须要有一个根元素,是否都会跑⼀遍,性能消耗大。

3按需导出了一个createApp 中,template里不要求只有一个根元素,可以⽤ES module imports按需引⼊,如:keep-alive内置组件、v-model指令,减少 了内存消耗。

生命周期:

beforeCreate -> setup()

created ->  setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

3中使用setup语法糖即可直接写,各个生命周期意思不做赘述

数据和方法的定义:

2使⽤的是选项类型API(Options API)【在代码中分割不同属性:data,computed,methods等】:data() { return {}; }, methods:{ }

3使⽤的是合成型API(Composition API):setup中定义函数和属性,统一return{}

父子间传参(props&emits):

2中this.props获取,this.$emit使用,

3中setup中setup(props,context){context.emit(),props}两个参数获取,setup语法糖如下

<script lang="ts" setup>
1...prop定义使用
//interface 定义
interface Props {
	show: boolean
	isUpdate: boolean
	title?: string
	width?: string
}
//withDefaults赋予初始数据
const props = withDefaults(defineProps<Props>(), {
	show: false,
	isUpdate: false,
	width: "800px"
})

2...子向父暴露可用函数
//子组件
defineExpose({函数名逗号隔开})
//父组件
<keep-alive>
	<component :is="part" v-show="part" :show="showRef" ref="componentRef"></component>
</keep-alive>
componentRef.value?.函数名()

3...子组件emit
//定义
const emits = defineEmits(["handle1", "handle2", ...])
//调用
emits("handle1",参数)

指令和插槽的使用不同

2中不建议将v-for和v-if写在一起使用,允许直接使用slot

3中将v-if当作v-for大的一个判断语句,不会相互冲突;移除keyCode作为v-on的修饰符,不支持config.keyCodes;移除v-on.native修饰符;移除过滤器filter;不允许直接使用slot,正确格式为 v-slot

其他使用区别继续更新,setup语法糖还是比较好用的,建议直接走项目学习比较好文章来源地址https://www.toymoban.com/news/detail-656507.html

到了这里,关于vue2和vue3的区别(Vue3升级部分)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何升级Vue的版本 vue2.9.6升级到vue3.0

    背景:电脑使用多年,一直使用vue 2.x版本,项目开发过程中由于一个模块涉及的集成模块过多,导致需要进行定义的变量越来越多,代码出现冗余,因此在同事的推动下,鉴于vue 3.x的优化,故对自己本来使用的vue 2.9.6升级到vue 3.0版本。那么如何升级呢,请查阅如下步骤:

    2023年04月08日
    浏览(44)
  • vue3和vue2区别

    在 Vue 2 中,使用了 Object.defineProperty 来实现数据的响应式。它通过逐个定义对象属性的方式来进行数据的劫持和监听。这种方式存在一些限制,例如无法监听新增的属性,需要使用 Vue 提供的 $set 方法来实现响应式。此外,由于需要逐个定义属性,对于大型对象或数组的性能

    2024年01月17日
    浏览(43)
  • 从Vue2到Vue3, 一键升级前端开发技能

    本文的目的,是为了让已经有 Vue2 开发经验的   人   ,快速掌握 Vue3 的写法。 因此,   本篇假定你已经掌握 Vue 的核心内容   ,只为你介绍编写 Vue3 代码,需要了解的内容。 首先,Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Composition API 。因此 Vue3 的  script  现在支

    2024年02月08日
    浏览(76)
  • vue2和vue3的区别

    Vue 2和Vue 3是Vue.js框架的两个不同版本,下面是它们之间的一些主要区别: 性能提升:Vue 3在底层进行了重写,使用了更高效的编译器,生成的代码更小,在运行时有更快的速度和更低的内存消耗。 Composition API:Vue 3引入了Composition API,它使得组件逻辑可以更容易地组织和复用

    2024年01月18日
    浏览(46)
  • vue2与vue3的区别

    引言:本文讲的是vue2与vue3的区别,其实这算是老生常谈了,vue3出的时间也很久了,在vue2的基础上使得整个框架更加的轻便,在企业中应用vue3的也不少,但是vue2作为经典且稳定版本也有很多项目在使用,接下来就讲讲vue2与vue3有哪些区别。 响应式作为vue关键的特性,vue3在

    2024年02月12日
    浏览(43)
  • vue2和vue3有啥区别,vue3的优点有哪些?

    Vue.js 是一种流行的 JavaScript 框架,用于开发现代 Web 应用程序。Vue.js 具有简单易用、高效和灵活等特点,能够极大地提高开发效率并改进用户体验。Vue.js 一直在不断更新和改进,它的最新版本是 Vue 3。 在本文中,我们将探讨 Vue 2 和 Vue 3 的区别,以及如何从 Vue 2 迁移到 Vu

    2024年02月06日
    浏览(44)
  • vue2+webpack升级vue3+vite,在vue3组合式编程中使用vuex

    同学们可以私信我加入学习群! 我的项目是从vue2+webpack升级为vue3+vite,这种升级工作,其实最重要的不是如何快速准确地把原有vue2项目全部重构为vue3项目,因为这是不现实的。 升级工作一定是一个长久的持续过程,所以如何保证旧的vue2项目与新的vue3模块之间互相兼容,才

    2024年01月18日
    浏览(55)
  • 关于前端框架vue2升级为vue3的相关说明

    一些框架需要升级 当前(202306) Vue 的最新稳定版本是 v3.3.4 。Vue 框架升级为最新的3.0版本,涉及的相关依赖变更有: 前提条件:已安装 16.0 或更高版本的Node.js(摘) 必须的变更:核心库vue@23、路由vue-router@34、状态管理vuex@34 构建工具链: Vue CLI Vite(摘) 状态管理: Vuex Pi

    2024年02月15日
    浏览(51)
  • vue2升级为vue3 vuedraggable 拖动组件报错

    升级组件 npm i -S vuedraggable@next 使用示例 2、Item slot must have only one child 官方GitHub - SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.js  官方demo https://sortablejs.github.io/vue.draggable.next/#/two-lists

    2024年02月16日
    浏览(41)
  • 盘点 Vue3 与 Vue2 的区别

    对于生命周期来说,整体上变化不大,只是大部分生命周期钩子名称上 + “on”,功能上是类似的。不过有一点需要注意,Vue3 在组合式API(Composition API,下面展开)中使用生命周期钩子时需要先引入,而 Vue2 在选项API(Options API)中可以直接调用生命周期钩子,如下所示。

    2024年02月03日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包