vue3-Api和数据响应式的变化

news2024/11/27 6:18:32

问题1:为什么vue3中去掉了vue构造函数?

问题2:谈谈你对vue3数据响应式的理解

去掉了Vue构造函数

在过去,如果遇到一个页面有多个vue应用时,往往会遇到一些问题

<!-- vue2 -->
<div id="app1"></div>
<div id="app2"></div>
<script>
  Vue.use(...); // 此代码会影响所有的vue应用
  Vue.mixin(...); // 此代码会影响所有的vue应用
  Vue.component(...); // 此代码会影响所有的vue应用
                
	new Vue({
    // 配置
  }).$mount("#app1")
  
  new Vue({
    // 配置
  }).$mount("#app2")
</script>

vue3中,去掉了Vue构造函数,转而使用createApp创建vue应用

<!-- vue3 -->
<div id="app1"></div>
<div id="app2"></div>
<script>  
	createApp(根组件).use(...).mixin(...).component(...).mount("#app1")
  createApp(根组件).mount("#app2")
</script>

更多vue应用的api:https://v3.vuejs.org/api/application-api.html

组件实例中的API

vue3中,组件实例是一个Proxy,它仅提供了下列成员,功能和vue2一样

属性:https://v3.vuejs.org/api/instance-properties.html

方法:https://v3.vuejs.org/api/instance-methods.html

对比数据响应式

vue2和vue3均在相同的生命周期完成数据响应式,但做法不一样

1:为什么vue3中去掉了vue构造函数?

vue2的全局构造函数带来了诸多问题:
1. 调用构造函数的静态方法会对所有vue应用生效,不利于隔离不同应用
2. vue2的构造函数集成了太多功能,不利于tree shaking,vue3把这些功能使用普通函数导出,能够充分利用tree shaking优化打包体积
3. vue2没有把组件实例和vue应用两个概念区分开,在vue2中,通过new Vue创建的对象,既是一个vue应用,同时又是一个特殊的vue组件。vue3中,把两个概念区别开来,通过createApp创建的对象,是一个vue应用,它内部提供的方法是针对整个应用的,而不再是一个特殊的组件。

2:谈谈你对vue3数据响应式的理解

1. vue3不再使用Object.defineProperty(有几个数据就会遍历几个Object.defineProperty)的方式定义完成数据响应式,而是使用Proxy(里面有set()和get())。

除了Proxy本身效率比Object.defineProperty更高之外,由于不必递归遍历所有属性,而是直接得到一个Proxy(new Proxy)。所以在vue3中,对数据的访问是动态的,当访问某个属性的时候,再动态的获取和设置,这就极大的提升了在组件初始阶段的效率。

同时,由于Proxy可以监控到成员的新增和删除,因此,在vue3中新增成员、删除成员、索引访问等均可以触发重新渲染,而这些在vue2中是难以做到的。

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

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

相关文章

sketch如何在线打开?有没有什么软件可以辅助

Sketch 在线打开的方法有哪些&#xff1f;这个问题和我之前回答过的「Sketch 可以在线编辑吗&#xff1f;」是一样的答案&#xff0c;没有。很遗憾&#xff0c;Sketch 没有在线打开的方法&#xff0c;Sketch 也做不到可以在线编辑。那么&#xff0c;那些广告里出现的设计软件工…

基于Java+SpringBoot+vue前后端分离网上购物商城系统设计实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

【高阶数据结构】B树

文章目录 一、B-树1. 常见的搜索结构2. B树概念3. B-树的查找4. B-树的插入分析 二、B树和B*树1. B树2. B*树 三、B-树的应用1. 索引2. MySQL索引简介2.1 MyISAM2.2 InnoDB 一、B-树 1. 常见的搜索结构 种类数据格式时间复杂度顺序查找无要求O(N)二分查找有序O(log2N)二叉搜索…

体验文心千帆:开启智能大模型时代的新征程

目录 前言文心千帆的申请和使用感受1.1 注册流程简单1.2 试用初体验 二、文心千帆大模型平台功能介绍2.1 强大的对话式语言模型2.2 丰富的应用场景 三、如何使用 API3.1 API 列表ERNIE-BotERNIE-Bot-turboBLOOMZ-7BEmbedding-V1Prompt模板 3.2 API 调用基本流程3.2.1 创建智能云…

如何在armv6 armv7 armv8(aarch64)嵌入式板子上面安装nginx服务器,支持H265码流

如何在armv6 armv6 armv8 aarch64 嵌入式板子上面安装nginx服务器支持推送H265的视频流 开始吧 一&#xff0c;准备工作二&#xff0c;configure时遇到的出错问题1、checking for C compiler … found but is not working2&#xff0c;error: can not detect int size3&#xf…

【python】使用difflib对比json差异

之前自己使用python写了方法进行对比json数据&#xff0c;这次使用difflib模块实现&#xff1a; 一个json数据存在text1.txt&#xff1a; 另一个json数据存在text2.txt&#xff1a; 1、导入difflib模块 import difflib 2、调用difflib中的HtmlDiff类&#xff0c;使用make_fi…

ShardingSphere分库分表实战之广播表

&#x1f680; ShardingSphere &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&…

多个springmvc项目共用同一个redis导致session冲突的问题 的解决方案

由于redis来做session的统一管理插件&#xff0c;如果多个项目使用同一个redis来管理session的话&#xff0c;那么session很有可能会出现冲突。 下图&#xff1a;默认session在redis中的key值是spring:session:sessions:sessionId&#xff0c;如果多个项目中出现了相同的sessi…

网络安全(黑客)自学的一些建议

1.选择方向 首先是选择方向的问题&#xff0c;网络安全是一个很宽泛的专业&#xff0c;包含的方向特别多。比如 web安全&#xff0c;系统安全&#xff0c;无线安全 &#xff0c;二进制安全&#xff0c;运维安全&#xff0c;渗透测试&#xff0c;软件安全&#xff0c;IOT安全&a…

docker-compose搭建RocketMq集群

集群架构&#xff1a;双主 机器&#xff1a;172.50.2.41 172.50.2.42 一、创建目录 mkdir -p /docker/alibaba/rocketmq/logs/nameserver mkdir -p /docker/alibaba/rocketmq/logs/broker mkdir -p /docker/alibaba/rocketmq/store/broker mkdir -p /docker/alibaba/rocket…

通过Appium和Accessibility Inspector获取iOS应用元素定位的方法

在 iOS 移动应用程序上使用选择器查找元素定位是我们在移动端 UI 自动化测试的先决条件。 但是&#xff0c;由于应用程序内容在原生 iOS 应用程序中的呈现方式&#xff0c;我们可以用来定位应用程序元素的选择器与 Web 浏览器元素有很大不同。 在本文中&#xff0c;我们将了解 …

Spring Boot 日志文件有什么用

目录 一、自定义打印日志 1.1 日志框架说明 1.2 实现自定义打印日志 1.3 日志的格式说明 2.1 日志的级别 2.2 设置日志级别的作用&#xff1a; 2.3 如何设置日志的级别 二、 日志的持久化 3.1 设置日志保存路径 &#xff08;在 .yml 配置文件中设置日志保存路径&…

一、二维前缀和算法

文章目录 前缀和模板724. 寻找数组的中心下标238. 除自身以外数组的乘积560. 和为 K 的子数组974. 和可被 K 整除的子数组525. 连续数组1314. 矩阵区域和 前缀和模板 一维前缀和&#xff1a; import java.util.*;public class Main {public static void main(String[] args) …

docker-compose启动minio

一、创建文件夹 mkdir -p /docker/stand-alone-minio/data mkdir -p /docker/stand-alone-minio/configchmod 777 -R /docker/stand-alone-minio/data chmod 777 -R /docker/stand-alone-minio/config 二、docker-compose.yml version: 3.9services:minio:image: minio/mini…

【Vue3基础】计算属性

一、需求 二、代码 1、创建项目 创建项目&#xff1a; 1、 npm init vuelatest 2、一路回车 3、输入项目名&#xff0c;不要大写&#xff0c;如vue3bilibili 4、 cd vue3bilibili 5、 npm install 6、npm run dev启动&#xff0c;可以获取网址 2、App.vue文件中&#xff1a;…

UNIX网络编程卷一 学习笔记 第二十五章 信号驱动式IO

信号驱动式IO指进程预先告知内核&#xff0c;当某个描述符上发生某事时&#xff0c;内核使用信号通知相关进程&#xff0c;它在历史上曾被称为异步IO&#xff0c;但信号驱动式IO不是真正的异步IO&#xff0c;真正的异步IO通常定义为进程执行IO系统调用告知内核启动某个IO操作&a…

Kafka-partition和消费者的关系

Kafka-partition 目录概述需求&#xff1a; 设计思路实现思路分析1.Kafka-partition2.消费者数量小于分区数量3. 拓展实现 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a…

五笔打字练习经验总结

背景 我之前对键盘不太熟悉&#xff0c;打字的速度我测了一下大概是在30/m的样子&#xff0c;于是想提高自己的打字速度&#xff0c;就练习了下&#xff0c;现在大概到了60/m。由于自己打字拼音打字错误率较高&#xff0c;因为手指键位练习不到位&#xff0c;已经很难纠正了。所…

LeetCode[148]排序链表

难度&#xff1a;Medium 题目&#xff1a; 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4]示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输出&…