vue2.0和vue3.0区别

news2024/9/20 10:46:32

vue2.0和vue3.0区别

双向数据绑定的原理改变:‌

Vue2使用Object.defineProperty对数据进行劫持,‌结合发布订阅模式实现双向数据绑定,‌而Vue3则采用了ES6的Proxy API对数据进行代理,‌提供了更多的拦截操作,‌能够监听到属性的删除和新增,‌相比Vue2,‌Vue3的这种实现方式更加高效和灵活。‌Vue3中要用ref包装,通过返回值的 .value属性获取响应式的值 ,修改也需要对 .value进行修改,( 注意在js中要.value,在模板html中解析时会自动添加.value,不需要添加).

<template>
 <div>
<!-- 不需要.value -->
 {{ testOne }}
 {{ testTwo.directionD}}
 </div>
</template>
 
<script setup>
  const testOne= ref(0)
  
  const testTwo= ref({
    directionD: '',
    directionA: '',
    arr: []
  })
  
  const dataThree= ref({})
 
  // 使用需要.value
  console.log(testOne.value);
  console.log(dataThree.value);
  console.log(testTwo.value.directionD);
  console.log(testTwo.value.directionD);
 
</script>

支持碎片(Fragments):‌

Vue3支持在组件中拥有多个根节点,‌而Vue2则要求每个组件必须有一个单一的根节点。‌这一变化使得组件的结构设计更加灵活,‌减少了不必要的嵌套和复杂性。‌

引入Composition API:‌

Vue3引入了Composition API,‌这是一种新的API形式,‌允许开发者以函数的方式组织组件的逻辑,‌使得代码更加结构化和可重用。‌这与Vue2的Options API形成了鲜明的对比,‌后者通过对象的方式组织组件的选项。‌

语法和API的更新 :‌

Vue3在语法和API上做了一些调整,‌例如,‌样式穿透/deep/的选择器在Vue3中推荐使用()函数,‌而不是Vue2中的/deep/字符串。‌此外,‌Vue3还提供了更简洁和灵活的方式来绑定class和style,‌这些变化都是为了提升开发效率和代码的可读性。‌

 <style lang="less" scoped>
/* vue2写法 */
/deep/.change {
  color: red;
}
</style>
<style lang="less" scoped>
/* vue3写法 */
:deep(.change ){
  color: red;
}
</style>

去除this

    Vue3中没有this, 使用this报错 需要组件内的某个方法直接使用即可(注意使用的数据必须在调用前定义)

组件的生命周期:

指的是组件从创建->运行->销毁的整个过程,强调的是一个时间段。
大部分生命周期在vue2的周期前加 on 即可;vue3没有beforeCreate 和 created两个周期,那想在这两个周期中进行逻辑处理怎么办呢? setup中写好了调用即可👇
在这里插入图片描述

vue框架为组件内置了不同时刻的生命周期函数,生命周期函数会随着组件的运行而自动调用。如:①当组件在内存中被创建完毕之后,会自动调用created函数
②当组件被成功的渲染到页面上之后,会自动调用mounted函数
③当组件被销毁完毕之后,会自动调用unmounted函数

vue3中全部的生命周期函数:

在这里插入图片描述

数据共享的六种方法:

1.父子关系

①父->子 属性绑定

②子->父 事件绑定

③父<->子 组件上的v-model

2.兄弟关系

①eventBus

3.后代关系

①provide&&inject

4.全局数据共享

①vuex

自定义指令:

vue2中使用的是{bind,update},vue3中使用的是{mounted,updated}

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

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

相关文章

KBL406-ASEMI、AI智能专用整流桥KBL406

编辑&#xff1a;ll KBL406-ASEMI、AI智能专用整流桥KBL406 型号&#xff1a;KBL406 品牌&#xff1a;ASEMI 封装&#xff1a;KBL-4 批号&#xff1a;2024 现货&#xff1a;50000 正向电流&#xff08;Id&#xff09;&#xff1a;4A 反向耐压&#xff08;VRRM&#xff…

【智能流体力学】ANSYS Fluent流体仿真基础深度学习驱动的前期准备:CAX计算机辅助集成技术

目录 一、CAX计算机辅助集成技术二、计算机辅助工程(CAE)三、SCDM (Species Concentration Display Model) 显示和分析物质浓度分布的模型1. **SCDM概述**2. **主要功能**3. **功能特点**4. **使用步骤**5. **应用实例**6. **优点与限制**四、行业应用五、Fluent 软件功能1. …

net.sf.jsqlparser.statement.select.SelectItem

今天一启动项目&#xff0c;出现了这个错误&#xff0c;仔细想了想&#xff0c;应该是昨天合并代码&#xff0c;导致的mybatis-plus版本冲突&#xff0c;以及分页PageHelper版本不兼容 可以看见这个我是最下边的 Caused by 报错信息&#xff0c;这个地方提示我 net .s…

Java面试题--JVM大厂篇之实战解析:如何通过CMS GC优化大规模Java应用的响应时间

引言&#xff1a; 下午好&#xff0c;各位Java开发者&#xff01;在实际项目中&#xff0c;性能优化一直是我们关注的重点&#xff0c;特别是在面对大规模Java应用时&#xff0c;响应时间的优化更是至关重要。今天&#xff0c;我们将通过实战案例&#xff0c;深入解析如何利用C…

【JAVA多线程】JDK线程同步工具类:Semaphore、CountDownLatch、CyclicBarrier

目录 1.可能会遇到的线程协作场景 2.Semaphore 3.CountDownLatch 4.CyclicBarrier 1.可能会遇到的线程协作场景 在并发编程中&#xff0c;线程除了独自向前运行&#xff0c;还可能相互之间要进行协作&#xff0c;以保证完成最终总的目标。可能会遇到的几种任务之间的协作&…

『 C++ 』单例模式与IO流

文章目录 单例模式饿汉加载的单例模式实现懒汉加载的单例模式实现 IO流类型之间的转换 单例模式 单例模式是一种创建型设计模式; 确保一个类在应用程序的生命周期内仅有一个实例并提供一个全局访问点来访问该实例; 单例模式主要目的是为了控制某些类的实例化以避免产生多个实例…

Java面试--框架--Spring MVC

Spring MVC 目录 Spring MVC1.spring mvc简介2.spring mvc实现原理2.1核心组件2.2工作流程 3.RESTful 风格4.拦截器4.1过滤器、监听器、拦截器的对比4.2 拦截器基本概念4.3 拦截器的实现 1.spring mvc简介 Spring MVC是一款由Spring Framework 提供的 web组件&#xff0c;实现…

MySQL-MVCC举例说明

在数据库系统中&#xff0c;多版本并发控制&#xff08;MVCC, Multi-Version Concurrency Control&#xff09; 是一种用于提高并发性能的机制&#xff0c;它允许多个事务同时读取和写入数据&#xff0c;而不会产生锁等待和阻塞的问题。MySQL 的 InnoDB 存储引擎广泛使用了 MVC…

C#MVC返回DataTable到前端展示。

很久没写博客了&#xff0c;闭关太久&#xff0c;失踪人口回归&#xff0c;给诸位道友整点绝活。 交代下背景&#xff1a;要做一个行转列的汇总统计&#xff0c;而且&#xff0c;由于是行转列&#xff0c;列的数量不固定&#xff0c;所以&#xff0c;没法使用正常的SqlSugar框…

C++入门基础知识13

C 的关键字&#xff08;接上一篇博文&#xff09;&#xff01;&#xff01; 10. const_cast用法&#xff1a; 该运算符用来修改类型的 const 或 volatile 属性。除了 const 或 volatile 修饰之外&#xff0c; type_id 和 expression 的类型是一样的。常量指针被转化成非常量指针…

催收业务怎么提高接通率

提高催收呼叫业务的接通率是一个综合性的任务&#xff0c;需要从多个方面进行优化。以下是一些具体的策略和建议&#xff1a; 一、优化呼叫时间与频次 1. 选择合适的呼叫时间&#xff1a;通过分析目标客户的活跃时段&#xff0c;选择他们最可能接听电话的时间进行呼叫…

iOS Object-C 创建类别(Category) 与使用

有时候使用系统给出类或者第三方的类,但是呢它们自带的属性和方法又太少,不够我们的业务使用,这时候就需要给“系统的类或者第三方类”创建一个类别(Category),把自己的想添加的属性和方法写进来. Category模式用于向已经存在的类添加方法从而达到扩展已有类的目的 一:创建Ca…

零碳工厂:我国工业转型升级的绿色引擎

面对全球气候变化的严峻挑战&#xff0c;我国提出了碳达峰和碳中和的宏伟目标。零碳工厂作为工业领域实现这一目标的重要途径&#xff0c;正成为推动我国工业转型升级的绿色引擎。本文将提供一站式零碳工厂服务指南&#xff0c;帮助企业迈向零碳排放&#xff0c;共同构建绿色低…

零售企业做好人事管理并不难!智能化人事管理平台解决企业三大痛点!

在零售行业的激烈竞争中&#xff0c;优秀的人事管理策略是企业成功的关键。然而&#xff0c;传统的人事管理模式常常面临人员分散、流程繁琐、跨部门协作困难等挑战。为了应对这些问题&#xff0c;一站式人事管理平台的出现&#xff0c;为企业提供了数字化的解决方案。本文将探…

[论文泛读]zkLLM: Zero Knowledge Proofs for Large Language models

文章目录 介绍实验数据实验数据1实验数据2实验数据3 介绍 这篇文章发在CCS2024&#xff0c;CCS是密码学领域的顶会。作者是来自加拿大的University of Waterloo。文章对大语言模型像GPT和LLM等大语言模型实现了零知识可验证执行&#xff0c;但不涉及零知识可验证训练。个人觉得…

PAT--1124.最近的斐波那契数

题目描述 算法分析 找到把n夹在中间的两个斐波那契数列的数字&#xff0c;比如输入的数字9&#xff0c;你需要找到数字8和13&#xff0c;然后再输出差值绝对值较小的那个数字&#xff0c;如果一样&#xff0c;输出较小的数字 完整代码 #include<iostream> using names…

npm install pnpm -g 报错的解决方法

npm install pnpm -g 报错的解决方法 npm error code ETIMEDOUT npm error errno ETIMEDOUT npm error network request to https://registry.npmjs.org/pnpm failed, reason: npm error network This is a problem related to network connectivity. npm error network In mo…

三防加固平板电脑定制:现代工业环境的最佳选择

在数字化转型的浪潮中&#xff0c;工业领域正经历着前所未有的变革。智能设备的引入&#xff0c;尤其是定制化的三防加固平板电脑&#xff0c;正在成为现代工业环境中的关键工具。这些设备不仅能够承受严苛的工作条件&#xff0c;还能提供高度定制化的功能&#xff0c;以满足特…

萌啦数据使用体验,萌啦数据ozon体验如何

在跨境电商的浩瀚星海中&#xff0c;Ozon作为俄罗斯及独联体地区领先的电商平台&#xff0c;正以其独特的魅力和无限潜力吸引着全球卖家的目光。而在这片蓝海中航行&#xff0c;精准的数据分析与洞察无疑是每位船长手中的罗盘。今天&#xff0c;我们就来深入探讨一款备受好评的…

刷题技巧:双指针法的核心思想总结+例题整合+力扣接雨水双指针c++实现

双指针法的核心思想是通过同时操作两个指针来遍历数据结构&#xff0c;通常是数组或链表&#xff0c;以达到优化算法性能的目的。具体来说&#xff0c;双指针法能够减少时间复杂度、空间复杂度&#xff0c;或者简化逻辑结构。以下是双指针法的几个核心思想&#xff1a; ps 下面…