【无标题】

简介: 【无标题】

vue经历从2.0到3.0更新之后,简⽽⾔之就是变得更轻,更快,使⽤起来更加⽅便,每⼀次的版本迭代都是对上⼀个版本的升级优化,不管 是对于我们开发者还是对于⽤户体验都是不断地在越来越⽅便,接下来我会着重于开发者来说⼀下两个不同版本的区别,

详解

1.vue2.0和3.0的初始化就存在着⼀定区别,⽐如vue3.0可以在安装脚⼿架同时提前安装好⼀些项⽬开发必备的插件,并且3.0提供了可视 化创建脚⼿架,可以更加⽅便的对插件和依赖进⾏管理和配置,同时两个版本的⽬录结构也是有些许差别的。

2.在开发过程中两个版本的使⽤⽅法虽然在表⾯上没有太⼤的⼀个区别,但是在他的底层⽅⾯去看的话区别还是很⼤的,其中就包括渲染⽅ 式,数据监听,双向绑定,⽣命周期,vue3更精准变更通知,

这⾥着重说⼀下关于双向绑定的更新,

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

vue3 中使⽤了 es6 的 ProxyAPI 对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从⽽ 实现对数据的监控。

这⾥是引相⽐于vue2版本,使⽤proxy的优势如下

1.defineProperty只能监听某个属性,不能对全对象监听

可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)

2.可以监听数组,不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作,完美⽀持对数组的监听。

复制代码

3.另外vue3还新增了⼀些内置组件和⽅法,⽐如vue3可以默认进⾏懒观察,使⽤Function-based API,setup函数,对与插件或对象的⼀ 个按需引⼊,Computed Value ,新加⼊了 TypeScript 以及 PWA 的⽀持等等… 这⾥着重说⼀下vue3的⼀个按需引⼊

Vue2.x中new出的实例对象,所有的东西都在这个vue对象上,这样其实⽆论你⽤到还是没⽤到,都会跑⼀遍,这样不仅提⾼了性能消耗,

也⽆疑增加了⽤户加载时间。

⽽vue3.0中可以⽤ES module imports按需引⼊,如:keep-alive内置组件、v-model指令,等等,不仅我们开发起来更加的便捷,减少 了内存消耗,也同时减少了⽤户加载时间,优化⽤户体验。

创建vue2和vue3项目的文件发生的变化

1.main.js中

 

核心代码:

createApp(App).mount('#app') = createApp(根组件).mount('public/index.html中的div容器')

1.vue2.0中是直接创建了一个vue实例

2.vue3.0中按需导出了一个createApp (ceateApp做了什么)

3.vue3中的app单文件不再强制要求必须有根元素 也就是说 在vue2.0中必须要有一个根元素,在vue3中没这个要求

<template>

<img alt="Vue logo" src="./assets/logo.png">

<HelloWorld msg="Welcome to Your Vue.js App"/>

</template>

复制代码

数据双向绑定原理

Vue2使⽤的是Object.defineProperty()进⾏数据劫持,结合发布订阅的⽅式实现。

Vue3使⽤的是Proxy代理,使⽤ref或者reactive将数据转化为响应式数据

数据和方法的定义

Vue2使⽤的是选项类型API(Options API),Vue3使⽤的是合成型API(Composition API)

Vue2:

data() { return {}; }, methods:{ }

复制代码

Vue3:

数据和⽅法都定义在setup中,并统⼀进⾏return{}

生命周期

获取props

vue2:console.log(‘props’,this.xxx)

vue3:setup(props,context){ console.log(‘props’,props) }

 

给父组件传值emit

vue2:this.$emit()

vue3:setup(props,context){context.emit()}

相关文章
|
SQL 安全 关系型数据库
SQL注入漏洞实战演习
SQL注入漏洞实战演习
326 0
|
XML 安全 Java
SpringSecurity系列(三) Spring Security 表单登录
SpringSecurity系列(三) Spring Security 表单登录
297 0
|
11月前
|
存储 索引
数组的特点
数组是一种线性数据结构,用于存储固定大小的顺序集合。每个元素在数组中都有一个唯一的索引,可以快速访问和修改。数组支持随机访问,但插入和删除操作较慢,因为需要移动后续元素。适用于需要频繁读取数据的场景。
|
资源调度 关系型数据库 API
一、next-auth 身份验证凭据-使用电子邮件和密码注册登录
本文是关于如何在Next.js应用中使用next-auth库实现基于电子邮件和密码的注册和登录功能的详细教程,包括环境配置、项目初始化、前后端页面开发、数据库交互以及用户状态管理等方面的步骤和代码示例。
一、next-auth 身份验证凭据-使用电子邮件和密码注册登录
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
12月前
|
Python
python推导式-列表,元组,字典,集合推导式
这篇文章介绍了Python中的推导式,包括列表推导式、元组推导式、字典推导式和集合推导式,提供了它们的基本格式和示例代码,并解释了推导式如何简化循环和条件判断的代码编写。
|
存储 测试技术 iOS开发
CocoaLumberjack的ios应用开发使用指南
CocoaLumberjack的ios应用开发使用指南
388 2
|
弹性计算 固态存储 大数据
2024年阿里云服务器租用费用_阿里云云服务器ECS价格表(2核2G - 8核64G)
阿里云服务器分为云服务器ECS和轻量应用服务器,云服务器s6公网带宽可选1M到5M,系统盘40G起可选高效云盘、SSD云盘或ESSD云盘,阿里云服务器租用费用,轻量应用服务器和云服务器ECS优惠价格表,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、ECS u1实例2核4G、5M固定带宽、80G ESSD Entry盘优惠价格199元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月、2核4G服务器30元3个月,幻兽帕鲁4核16G和8核32G服务器配置,云服务器ECS可以选择经济型e实例、通用算力u1实例、ECS计算型c7。
322 4
|
XML Java API
Spring Boot 整合 Quartz 实现 Java 定时任务的动态配置
Spring Boot 整合 Quartz 实现 Java 定时任务的动态配置
393 0