【VUE3】vue3 面试知识点

1. Vue 3 相比 Vue 2 的主要改进

  • Composition API:引入了一套基于函数的 API,允许以更灵活和可复用的方式组织组件逻辑。
  • 性能提升:通过改进虚拟 DOM 的算法和底层架构,实现了更快的渲染速度和更低的内存使用率。
  • TypeScript 支持:对 TypeScript 的支持更加完善,提供了更好的类型检查和代码提示。
  • 响应式系统重构:使用 Proxy 代替了 Object.defineProperty,解决了 Vue 2 中响应式系统的一些限制,如无法监听数组的变化等。
  • Fragment 和 Teleport:允许组件有多个根节点,并支持将子组件渲染到 DOM 中的任何位置。

2. Composition API

  • setup 函数:是 Composition API 的入口点,用于初始化状态、计算属性和方法,并返回在模板中使用的响应式引用。
  • ref 和 reactive:用于创建响应式引用和对象。ref 通常用于基本数据类型,而 reactive 用于复杂数据类型如数组和对象。
  • computed 和 watch/watchEffect:computed 用于定义计算属性,watch 和 watchEffect 用于监听响应式数据的变化并执行回调函数。

3. 生命周期钩子

  • Vue 3 对生命周期钩子进行了一些调整和优化,如将 beforeDestroy 和 destroyed 重命名为 beforeUnmount 和 unmounted
  • 新增了 setup 钩子函数,以及 onBeforeMountonMountedonBeforeUpdateonUpdatedonBeforeUnmount 和 onUnmounted 等生命周期钩子函数。

4. 响应式系统

  • Vue 3 的响应式系统通过 ES6 的 Proxy 对象来实现,可以监听到对象的所有属性,包括新增和删除操作。
  • 当使用 reactive 或 ref 函数时,Vue 会创建一个 Proxy 对象来包裹原始数据,拦截对原始数据的访问和修改,从而追踪数据的变化。

5. 组件通信

  • Props 和 Events:用于父子组件之间的通信。
  • Provide 和 Inject:允许在祖先组件和后代组件之间传递数据,而不需要通过 props 和 events 进行逐层传递。
  • Vuex 和 Vue Router:Vuex 用于管理全局状态,Vue Router 用于管理路由。

6. 插槽(Slots)

  • Vue 3 支持具名插槽和默认插槽的混合使用,使得插槽的使用更加灵活。
  • 引入了作用域插槽(Scoped Slots),允许在插槽中访问子组件的数据和方法。

7. 异步组件和 Suspense

  • Vue 3 支持异步组件,允许延迟加载组件,直到需要时才加载,从而优化性能。
  • Suspense 组件允许指定一个加载中的状态(fallback)和一个加载失败的状态(fallback slot),用于处理异步组件的加载状态。

8. TypeScript 集成

  • Vue 3 内部已经使用 TypeScript 进行编写,因此与 TypeScript 的集成非常顺畅。
  • 开发者可以直接在 Vue 组件中使用 TypeScript 的类型声明和接口,以提供更严格的类型检查和更好的代码提示。

9. 性能优化

  • 使用 v-show 代替 v-if 来频繁切换元素,因为 v-show 只是切换元素的 CSS 属性。
  • 使用 key 来优化列表渲染的性能。
  • 使用 computed 和 watch 来减少不必要的计算和渲染。
  • 使用 v-memo 来缓存组件的渲染结果。

10. 其他知识点

  • 自定义指令:Vue 3 中的自定义指令可以使用 app.directive() 方法或组件的 directives 选项来定义。
  • 路由和 Vue Router 4:Vue Router 4 与 Vue 3 一起发布,支持 Vue 3 的 Composition API,并引入了一些新的功能和 API。
  • 服务器端渲染(SSR):Vue 3 支持服务器端渲染,可以使用 Nuxt.js 等框架来实现。

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

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

相关文章

【秋招笔试题】小明的美食

解析&#xff1a;思维题。由于需要互不相同&#xff0c;每次操作取重复的值与最大值相加即可&#xff0c;这样即可保证相加后不会新增重复的值。因此统计重复值即可。 #include <iostream> #include <algorithm>using namespace std; const int maxn 1e5 5; int…

大模型算法面试题(十一)

本系列收纳各种大模型面试题及答案。 1、说一下目前主流或前沿的预训练模型&#xff0c;包括nlp&#xff08;百度ERNIE3.0&#xff0c;华为NEZHA&#xff0c;openAI gpt-3&#xff0c;nvidia MegatronLM&#xff0c;macrosoft T5&#xff09;和cv&#xff08;我只知道CLIP&…

wordpress主题Typecho仿百度响应式主题Xaink

wordpress主题Typecho仿百度响应式主题Xaink 新闻类型博客主题&#xff0c;简洁好看&#xff0c;适合资讯类、快讯类、新闻类博客建站&#xff0c;响应式设计&#xff0c;支持明亮和黑暗模式 直接下载 zip 源码->解压后移动到 Typecho 主题目录->改名为xaink->启用

内衣洗衣机和手洗哪个干净?推荐五款品质优良精品

在日常生活中&#xff0c;内衣洗衣机已成为现代家庭必备的重要家电之一。选择一款耐用、质量优秀的内衣洗衣机&#xff0c;不仅可以减少洗衣负担&#xff0c;还能提供高效的洗涤效果。然而&#xff0c;市场上众多内衣洗衣机品牌琳琅满目&#xff0c;让我们往往难以选择。那么&a…

实时捕获数据库变更

1.CDC概述 CDC 的全称是 Change Data Capture &#xff0c;在广义的概念上&#xff0c;只要能捕获数据变更的技术&#xff0c;我们都可以称为 CDC 。我们目前通常描述的CDC 技术主要面向数据库的变更&#xff0c;是一种用于捕获数据库中数据变更的技术&#xff0c;CDC 技术应用…

pytorch backbone

1 简介 在PyTorch深度学习中&#xff0c;预训练backbone&#xff08;骨干网络&#xff09;是一个常见的做法&#xff0c;特别是在处理图像识别、目标检测、图像分割等任务时。预训练backbone通常是指在大型数据集&#xff08;如ImageNet&#xff09;上预先训练好的卷积神经网络…

基于Flink SQL CDC的实时数据同步

基于Flink SQL CDC&#xff08;Change Data Capture&#xff09;的实时数据同步是一种高效的数据处理方案&#xff0c;它允许用户实时捕获数据库中的变更操作&#xff0c;并将这些变更以流的形式进行处理和同步到其他系统或数据库中。以下是关于基于Flink SQL CDC的实时数据同步…

Linux嵌入式学习——数据结构——队列

一、概念 1&#xff09;定义 是只允许在一端进行插入操作&#xff0c;而在另一端进行删除操作的线性表 队列 是一种 先进先出&#xff08;First In First Out&#xff09; 的线性表 线性表有顺序存储和链式存储&#xff0c;栈是线性表&#xff0c;所以有这两种存储方式 同样…

【在开发小程序的时候如何排查问题】

在开发小程序的时候如何排查问题 在最近开发小程序的时候&#xff0c;经常出现本地在浏览器中调试没有问题&#xff0c;但是一发布到预发环境就出现各种个样的问题 手机兼用性问题 有时候会出现苹果&#x1f34e;手机键盘弹出&#xff0c;导致ui界面高度出现异常边界问题&#…

使用PageHelper插件来分页查询

目录 一.什么是PageHelper&#xff1f; 二.PageHelper的实战操作&#xff1a; 1.导入PageHelper的相关依赖&#xff1a; 2.配置代码展示&#xff1a; 3.分页查询代码解析&#xff1a; 另外&#xff0c;肯定读者会好奇为什么能够自动动态拼接&#xff1f; 一.什么是PageH…

关于Static 误用问题,总是记不住

一、常规的 静态局部变量&#xff0c;静态成员变量和成员函数没啥疑问 二、全局变量问题。。。 * 如果在 C 文件中使用 static 修饰全局变量&#xff0c; * 它将限制变量的作用域在当前文件内。 * 这意味着其他文件无法直接访问或修改这个变量的值。 …

Arduino IDE界面和设置(基础知识)

Arduino IDE界面和设置&#xff08;基础知识&#xff09; 1-2 Arduino IDE界面和设置如何来正确选择Arduino开发板型号如何正确选择Arduino这个端口如何来保存一个Arduino程序Arduino ide 的界面功能按钮验证编译上传新建打开保存工作状态 1-2 Arduino IDE界面和设置 大家好这…

day00-系统重要文件

01.知识点回顾 1.resolv.conf dns的配置文件 [rootlinux ~]# vim /etc/resolv.conf [rootlinux ~]# nslookup www.baidu.com Server: 8.8.8.8 Address: 8.8.8.8#53Non-authoritative answer: www.baidu.com canonical name www.a.shifen.com. Name: www.a.shifen.com Addre…

MongoDB适合哪些人使用

MongoDB 是一款高性能、开源、无模式的文档型数据库&#xff0c;它使用 BSON&#xff08;Binary JSON&#xff09;作为其数据格式&#xff0c;这使得 MongoDB 非常适合于存储和查询复杂的数据结构。MongoDB 的灵活性、可扩展性和高性能特性吸引了多种类型的用户。以下是 MongoD…

如何穿透模糊,还原图片真实面貌

目录 图像清晰化的魔法棒&#xff1a;AI如何穿透模糊&#xff0c;还原图片真实面貌 前言 论文背景 论文思路 模型介绍 复现过程 演示视频 使用方式 本文所涉及所有资源均在传知代码平台可获取。 图像清晰化的魔法棒&#xff1a;AI如何穿透模糊&#xff0c;还原图片真实面貌 在我…

全网最最实用--模型高效推理:量化基础

文章目录 一、量化基础--计算机中数的表示1. 原码&#xff08;Sign-Magnitude&#xff09;2. 反码&#xff08;Ones Complement&#xff09;3. 补码&#xff08;Twos Complement&#xff09;4. 浮点数&#xff08;Floating Point&#xff09;a.常用的浮点数标准--IEEE 754(FP32…

状态机 XState 使用

状态机 一般指的是有限状态机&#xff08;Finite State Machine&#xff0c;FSM&#xff09;&#xff0c;又可以称为有限状态自动机&#xff08;Finite State Automation&#xff0c;FSA&#xff09;&#xff0c;简称状态机&#xff0c;它是一个数学模型&#xff0c;表示有限个…

【计算机网络】数据链路层实验

一&#xff1a;实验目的 1&#xff1a;学习WireShark软件的抓包操作&#xff0c;分析捕获的以太网的MAC帧结构。 2&#xff1a;学习网络中交换机互相连接、交换机连接计算机的拓扑结构&#xff0c;理解虚拟局域网&#xff08;WLAN&#xff09;的通信机制。 3&#xff1a;学习…

cas 和 synchronized 优化过程

cas 什么是CAS CAS:全称Compareandswap&#xff0c;字⾯意思:”⽐较并交换“&#xff0c;⼀个CAS涉及到以下操作&#xff1a; 我们假设内存中的原数据V&#xff0c;旧的预期值A&#xff0c;需要修改的新值B。 1. ⽐较A与V是否相等。&#xff08;⽐较&#xff09; 2. 如果⽐较…

半导体行业黑话-02

31. #Silicon Chef# - 硅厨师,指负责设计和制造芯片的工程师。 32. #Silicon Chefs Kitchen# - 硅厨师的厨房,指半导体设计和制造的实验室或工作区。 33. #Silicon Ghetto# - 硅贫民区,有时用来形容那些技术落后或条件较差的制造厂。 34. #Silicon Jungle# - 硅丛林,形容半…