vue2和vue3的区别详解

vue2 VS vue3

对比vue2vue3
配置脚手架cmd命令行可视化方式创建脚⼿架
组件通信props、$emit、provide、$arrts、EventBus等props、$emit、provide、inject、arrts等
数据监听watch,computedwatch,watchEffect,computed
双向绑定Object.definePropertyProxyAPI
⽣命周期四个阶段beforeCreatecreated—>setup
api选项式Options API组合式Composition API

双向数据绑定原理

vue2 的双向数据绑定是通过ES5的⼀个API,Object.defineProperty()对数据进⾏劫持,结合发布订阅模式的⽅式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;

其核心是 Object.defineProperty()方法,给Vue中的数据绑定get和set方法,当获取数据的时候,调用get方法,修改data中的数据的时候调用set方法,通过watcher监听器去更新视图,完成数据的双向绑定。

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

相对于Object.definePropery()有以几个优点:1.Proxy直接代理整个对象而非对象属性,这样只需要做一层代理就可以监听同级结构下的所有属性变化, 包括新增属性和删除属性。 2.Proxy可以监听数组的变化。

生命周期对比

vue2生命周期vue3生命周期描述
beforeCreate()已去掉setup代替

创建阶段

Created()已去掉setup代替
beforeMount()onBeforeMount

挂载阶段

mounted()onMounted
beforeUpdateonBeforeUpdate更新阶段
updated onUpdated
beforeDestroyonBeforeUnmount

销毁阶段

destrovedonUnmounted

建立数据发生了变化

        vue2把数据放在data中,vue3把数据放在setup中。

是否支持碎片化

        vue2.0只允许有一个根标签,vue3.0支持碎片化,可以拥有多个根节点。

Vue2
<template><div><header></header><main></main><footer></footer></div>
</template>
Vue3
<template><header></header><main></main><footer></footer>
</template>

组件通信

  • props通信
    • vu3 父传子                  
    • vue2父传子
      1.定义数据 
      data(){return{goodsList:[{id:1,name:'方便面',price:2.5,info:'好吃不贵'},{id:2,name:'火腿肠',price:2,info:'价钱合理'},{id:3,name:'鹌鹑蛋',price:4.5,info:'物美价廉'},]}},2.放到模板的子组件中
      <MyTest :item="goodsList[1]"></MyTest>3.子组件props接收export default {//接收数据props:['item']}

    • vue3子传父

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/14864.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

高中数学:概率-相关运算性质

文章目录 一、概率定义二、运算性质三、事件相互独立四、频率与概率五、练习 一、概率定义 二、运算性质 基本性质 互斥事件的性质 对立事件性质 包含事件的性质 有交集但不包含的事件性质 三、事件相互独立 注意&#xff1a; 四、频率与概率 五、练习

我要学kali-linux之shell脚本编程1

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…

概率密度与功率谱密度的理解与仿真

引言 概率密度&#xff08;Probability Density&#xff09;是统计学中十分重要的概念之一&#xff0c;其应用广泛&#xff1b;功率谱密度&#xff08;power spectral density, PSD&#xff09;则在电子电气行业用得比较多。 在基于雷达的目标检测中&#xff1a;概率密度和功率…

数据中台解决方案

文件是关于数据中台解决方案的详细介绍&#xff0c;内容涵盖了数据中台的定义、建设方案、实施步骤、以及在数字化转型中的作用。以下是对文件内容的分析和总结&#xff1a; 1. 数字化转型背景 国家政策支持&#xff1a;提到了《中华人民共和国国民经济和社会发展第十四个五年…

Spring Task详细讲解

✨Spring Task简介 Spring Task 是 Spring 提供的轻量级定时任务工具&#xff0c;也就意味着不需要再添加第三方依赖了&#xff0c;相比其他第三方类库更加方便易用。可以按照约定的时间自动执行某个代码逻辑。 使用场景&#xff1a; 信用卡每月还款提醒银行贷款每月还款提醒…

RabbitMQ运维

1. 单机多节点 1.1 搭建RabbitMQ ①安装RabbitMQ 略 ②确认RabbitMQ运⾏没问题 #查看RabbitMQ状态 rabbitmqctl status 节点名称: 端口号: 25672:Erlang分布式节点通信的默认端⼝, Erlang是RabbitMQ的底层通信协议.15672: Web管理界⾯的默认端⼝, 通过这个端⼝可以访问R…

AI 1.0公司的节节败退

商汤科技又裁员了&#xff0c;并不算行业新鲜事&#xff0c;新鲜的是&#xff0c;这次裁员发生在积极拥抱大模型之后。 成立于2014年的商汤科技&#xff0c;是2014—2015年的AI 1.0创业潮中拿到第一桶金的领头羊&#xff0c;并率先登陆资本市场&#xff0c;成为AI第一股。某种程…

图片识别为什么要将彩色图像灰度化?

为何在处理图像识别任务时&#xff0c;常需将彩色图像转换为灰度图像&#xff1f;在深入探讨此问题之前&#xff0c;我们首先需要明确“灰度化”的定义。 1、灰度化 灰度化处理&#xff0c;简而言之&#xff0c;是指将彩色图像转换成灰度图像的过程。 在电子显示设备&#xff…

NLP论文速读(微软出品)|使用GPT-4进行指令微调(Instruction Tuning with GPT-4)

论文速读|Instruction Tuning with GPT-4 论文信息&#xff1a; 简介&#xff1a; 这篇论文试图解决的问题是如何通过指令调优&#xff08;instruction-tuning&#xff09;提升大型语言模型&#xff08;LLMs&#xff09;在执行新任务时的零样本&#xff08;zero-shot&#xff0…

【金猿案例展】科技日报——大数据科技资讯服务平台

‍ 拓尔思数据要素案例 该数据要素项目案例由拓尔思投递并参与“数据猿年度金猿策划活动——2024数据要素产业年度创新服务企业榜单/奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 媒体行业企事业单位在数据要素领域得天独厚&#xff0c;日积月累的新闻报道、媒…

1、使用vscode+eide+stm32cubeMx开发stm32

步骤1&#xff1a;在vscode中安装如下的插件 步骤2&#xff1a;点击Embedded IDE&#xff0c;点击“新建项目”-----空项目-----Cortex-M项目。 步骤3&#xff1a;输入项目名&#xff0c;回车后会要制定保存路径&#xff0c;此时就是一个已项目名命名的文件夹。 步骤4&#xff…

〔 MySQL 〕数据类型

目录 1.数据类型分类 2 数值类型 2.1 tinyint类型 2.2 bit类型 2.3 小数类型 2.3.1 float 2.3.2 decimal 3 字符串类型 3.1 char 3.2 varchar 3.3 char和varchar比较 4 日期和时间类型 5 enum和set mysql表中建立属性列&#xff1a; 列名称&#xff0c;类型在后 n…

嵌入式Linux输入系统应用编程学习总结

嵌入式Linux输入系统应用编程学习总结 目录 嵌入式Linux输入系统应用编程学习总结1. 嵌入式Linux输入系统介绍2. Linux设备输入数据的几个结构体2.1 内核中表示一个输入设备的结构体2.2 APP从输入设备获取的数据类型结构体 3. 查看LCD设备信息和输入数据3.1 查看设备信息3.2 使…

解决SpringBoot3的Validated依赖实现自定义注解失效问题

我们引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency> Validated实现自定义注解 我们首先看看自定义注解里面&#xff0c;用到的注解的包 我们…

开箱即用的frp教程及脚本

废话不多说直接上干货 FRP官方&#xff1a;https://github.com/fatedier/frp FRP中文网站&#xff1a;https://gofrp.org/zh-cn/ 准备环境&#xff1a; 带公网的VPS内网Linux主机 一、在VPS上下载frp安装包 这里下载最新版的0.61.0 wget -P /frps https://github.com/fa…

程序员做自媒体,你所不了解的提词器,原来还有这么多大用处

程序猿的出路&#xff0c;不只是外卖员&#xff01; 你或许以为提词器只是个“背词神器”&#xff1f;实际上&#xff0c;它的应用范围早已超出你的想象。从直播到会议&#xff0c;从视频拍摄到户外采访&#xff0c;每一种场景都有对应的提词神器&#xff0c;帮你提升效率、避…

三种单例实现

1、不继承Mono的单例 实现 使用 注&#xff1a; 使用需要继承BaseManager 泛型填写自己本身 需要实现无参构造函数 2、挂载式的Mono单例 实现 使用 注&#xff1a; 使用需要继承SingletonMono 泛型填写自己本身 需要挂载在unity引擎面板 3、不用挂载式的单例 实现 使…

DAY112代码审计PHP开发框架POP链利用Yii反序列化POP利用链

一、pop1链的跟踪 1、路由关系 2、漏洞触发口unserialize(base64_decode($data)); 2、__destruct()&#xff0c;魔术法方法调用close函数方法 3、未找到利用链&#xff0c;尝试__call魔术方法 4、逆推找call_user_func 函数 第一部分 namespace yii\db; class BatchQueryResu…

移动硬盘需要格式化才能打开?详解原因与数据恢复方案

描述移动硬盘需要格式化才能打开 当我们尝试访问移动硬盘时&#xff0c;有时会遇到系统提示“需要格式化才能打开”的情况。这种提示通常意味着硬盘上的文件系统已损坏或无法被系统正常识别。一旦遇到这种情况&#xff0c;很多用户会感到焦虑&#xff0c;因为硬盘中可能存储了…

Java项目实战II基于微信小程序的移动学习平台的设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着城市化…