vue3面试题1|[2024-11-12]

问题1:vue2与vue3的区别

1.vue2 和 vue3 双向绑定 方法不同

        vue2:Object.defineProperty()

                ***使用这种方法,对于后添加的属性是劫持不到的,所以就会出现数据更新了,

                    但是视图没有更新,所以vue2就需要使用$set来添加属性。

                    this.obj.c = 3;  // 这样会导致数据更新了视图没有更新

                    this.$set(this.obj, 'c', '3')   // 这样可以解决这个问题

        vue3:new Proxy()

                ***即使是后添加的也可以劫持到,所以也不需要$set

                ***还不需要循环

2.$set在vue3中没有,因为new Proxy不需要

3.关于写法

        vue2是选项式API

        vue3可以向下兼容(选项式API),也可以组合式API或者setup语法糖形式

4.v-if和v-for优先级不同

5.ref和¥children也不同

6.根节点不同

        vue2中必须要有根标签

        vue3中可以没有根标签

7.生命周期的变化

        

问题2:vue3如果使用setup写怎么组织代码

说明:hooks(就是函数式),主要让功能模块细化(提升项目的维护性)

        解决问题:<script setup>

                                // 代码  比较乱

                          <script> 

面试题:你们vue3写代码的方式 => setup形式

        解决:hooks

 问题3:vue3如果用setup写如何获取类似于vue2中的this

可以通过vue提供的方法来获取全局的东西:

1.首先打印出一个特定的对象

        console.log(getCurrentInstance())  --  这个对象中包含上下文等信息,可以从中找到所需的全局变量

2.创建一个全局插件并注册

// 1.在component文件夹中新建loading/index.js文件

   export default {
       install(app) {
           app.config.globalProperties.loading = "加载中";
       }
   };

// 2.在需要使用该全局插件的地方引入并注册

   import loading from './components/loading';
   const app = createApp(App);
   app.use(loading);
   app.mount('#app');

3.在组件中调用全局变量

// 在组件的setup函数中,通过以下方式调用全局变量
   import { getCurrentInstance } from 'vue';
   setup() {
       const instance = getCurrentInstance();
       const appContext = instance.appContext;
       console.log(appContext.config.globalProperties.loading);
       return {};
   }

 问题4:vue3常用的api有哪些

1.createApp  ---->   创建一个应用实例

        说明:等于vue2的====new Vue()

        使用场景:写插件(封装全局组件会使用) 

2.provide/inject  ---->  依赖注入

        说明:其实就是传值

        场景:某一个父组件传值到后代组件,如果层级过多传递会很麻烦,所以就可以使用

        缺点:不好维护和查询数据来源

3.directive

        说明:自定义指令

        场景:后台管理系统中的按钮权限控制(一个用户拥有某些权限,但是只能查看和修改,不能删除)

4.mixin

        说明:1--全局混入  2--局部混入

        场景:可以添加生命周期,在小程序的分享功能就会用到

        缺点:不好维护和查询数据来源

5.app.config.globalProperties

        说明:获取vue这个全局对象的属性和方法

        场景:自己封装插件的时候需要把方法添加到对象中

6.nextTick

        说明:等待下一次DOM更新刷新的工具方法:nextTick返回一个Promise,回调函数是放在Promise中的,所以是异步执行的

        场景:就是要把DOM更新,vue是数据驱动DOM,所以数据的赋值就要在nextTick进行

7.computed

        说明:计算属性

        场景:有缓存

8.reactive、ref

        说明:来定义数据的,和vue2的data类似

9.watch

        说明:监听(vue3不需要深度监听)

10.markRaw()

        说明:不被new Proxy代理,说白了就是静态的数据

11.defineProps()

        说明:父组件传递的值,子组件使用setup的形式,需要用defineProps接收

12.defineEmits()

        当前组件使用setup形式、自定义事件需要使用defineEmits

13.slot

        说明:分为 1:匿名插槽  2:具名插槽  3:作用域插槽

        场景:后台管理系统、左侧是固定菜单、右侧是不是固定内容、那么右侧就是slot

问题5:请介绍一下vue3常用的响应式数据类型

ref:基本类型

import { ref } from 'vue'
let sum = ref(10)
// 若是要修改他的值,需要.value
sum.value = 200

reactive:复杂类型

import {reactive} from 'vue'
// reactive用于定义复杂的数据
let obj = reactive({
    name:'张三',
    age: 18,
    sex:'男'
})

// 若要修改他的值,可直接修改
obj.name = '李四'

toRef:解构某一个值

import { reactive,toRef } from 'vue'
let obj = reactive({
    name:'张三',
    age:18,
    sex:'男'
})
let name = toRef(obj,'name')

toRefs: 解构所有值

import { reactive, toRefs } from 'vue'
let obj = reactive({
    name:'张三',
    age:18,
    sex:'男'
})

let {name, age, sex} = toRefs(obj)

        解构之后,在组件中就可以直接使用 {{ name }}

问题6:请介绍一下teleport组件及其使用场景 

teleport组件就是一个传送门

假如自己写弹出框,需要在页面居中显示,不受当前组件的限制,可以把盒子传送到body中

<teleport to='body'>
    <div class='mo' v-if='show'>
</teleport>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python-24-一篇文章彻底掌握Python HTTP库Requests

python-24-一篇文章彻底掌握Python HTTP库Requests 一.简介 在 Python 中&#xff0c;Requests 是一个非常流行且易于使用的 Python HTTP 库&#xff0c;专门用于发送 HTTP/HTTPS 请求&#xff0c;获取请求响应&#xff1b; 可能觉得HTTP请求不是应该前端去做么&#xff1f;…

打造移动友好网站:UI设计的自适应技巧

随着移动互联网的快速发展&#xff0c;手机已成为人们获取信息的主要渠道之一。对于UI设计师而言&#xff0c;打造一个能够自适应手机屏幕的网站变得尤为重要。这不仅能够提升用户体验&#xff0c;还能在搜索引擎优化&#xff08;SEO&#xff09;中占据优势。以下是实现UI设计网…

Python →爬虫实践

爬取研究中心的书目 现在&#xff0c;想要把如下网站中的书目信息爬取出来。 案例一 耶鲁 Publications | Yale Law School 分析网页&#xff0c;如下图所示&#xff0c;需要爬取的页面&#xff0c;标签信息是“<p>”&#xff0c;所以用 itemssoup.find_all("p&…

STM32问题集

这里写目录标题 一、烧录1、 Can not connect to target!【ST-LINK烧录】 一、烧录 1、 Can not connect to target!【ST-LINK烧录】 烧录突然 If the target is in low power mode, please enable “Debug in Low Power mode” option from Target->settings menu 然后就&…

正点原子IMX6ULL--嵌入式Linux开发板学习中常用命令和笔记记录

学习路线图 传驱动文件 sudo cp chrdevbase.ko chrdevbaseApp /home/txj/linux/nfs/rootfs/lib/modules/4.1.15/ -f bootcmd setenv bootcmd tftp 80800000 zImage;tftp 83000000 imx6ull-alientek-emmc.dtb;bootz 80800000 - 83000000 setenv bootcmd tftp 80800000 zImag…

29.电影院售票系统(基于springboot和vue的Java项目)

目录 1.系统的受众说明 2 论文背景 2.1 国内研究现状&#xff1a; 2.2 国外研究现状&#xff1a; ​​​​​​​2.3 所用技术 3 系统需求分析 ​​​​​​​3.1 需求分析 ​​​​​​​3.2 可行性分析 3.2.1技术可行性分析 3.2.2市场可行性分析 3.2.3经济可…

(一)<江科大STM32>——软件环境搭建+新建工程步骤

一、软件环境搭建 &#xff08;1&#xff09;安装 Keil5 MDK 文件路径&#xff1a;江科大stm32入门教程资料/Keil5 MDK/MDK524a.EXE&#xff0c;安装即可&#xff0c;路径不能有中文。 &#xff08;2&#xff09;安装器件支持包 文件路径&#xff1a;江科大stm32入门教程资料…

热点更新场景,OceanBase如何实现性能优化

案例背景 这个案例来自一个保险行业的客户&#xff1a;他们的核心系统底层采用了OceanBase数据库作为存储解决方案&#xff0c;然而&#xff0c;在系统上线运行后&#xff0c;出现了一个异常情况&#xff0c;执行简单的主键更新语句时SQL执行时间出现了显著的波动。为了迅速定…

从0开始学习机器学习--Day24--核函数

核函数(Kernelsl function) 非线性数据的决策边界 对于非线性问题来说&#xff0c;决策边界在很多时候都是曲线&#xff0c;需要我们在假设函数中加入高阶多项式来拟合原始数据&#xff0c;这对于算法来说需要很长的运行时间去计算这些高阶多项式&#xff0c;那么有没有更高效…

Unity学习笔记(4):人物和基本组件

文章目录 前言开发环境新增角色添加组件RigidBody 2D全局项目设置Edit 给地图添加碰撞体 总结 前言 今天不加班&#xff0c;有空闲时间。争取一天学一课&#xff0c;养成习惯 开发环境 Unity 6windows 11vs studio 2022Unity2022.2 最新教程《勇士传说》入门到进阶&#xff…

【C++】字符串相乘

1.题目 2.代码 介绍一种比较简单的方法&#xff0c;就是先将字符串逆序&#xff0c;然后取出其中每一位的数相乘、相加。最后再考虑进位问题。 class Solution { public:string multiply(string num1, string num2) {//先排除边界情况&#xff0c;防止输出"00000...&quo…

Pycharm PyQt5 环境搭建创建第一个Hello程序

第一步: 创建Pycharm项目,下载包: pip install PyQt5 -i https://pypi.tuna.tsinghua.edu.cn/simple/pip install PyQt5-tools -i https://pypi.tuna.tsinghua.edu.cn/simple/下载好了之后,可以看到相应包: PyQt5:PyQt5是一套Python绑定Digia QT5应用的框架。Qt库是最…

新手小白学习docker第六弹------Docker常规安装(安装tomcat、mysql、redis)

目录 1 总体步骤2 安装tomcat2.1 搜索镜像2.2 拉取镜像2.3 查看镜像2.4 启动镜像2.5 访问猫首页 3 安装mysql3.1 搜索镜像3.2 拉取镜像3.3 启动镜像 4 安装redis4.1 拉取镜像4.2 启动镜像&#xff08;法1基础版&#xff09;4.3 配置文件4.3.1 在宿主机下新建目录 /app/redis4.3…

python基础大杂烩

命令提示符程序&#xff0c;输入python&#xff0c;运行python程序 代码通过解释器程序翻译给计算机去执行 命令提示符输入的python本质上就是调用D:/dev/python/python3.12.5/python.exe这个解释器程序 有python程序将输入的代码翻译成二进制的0和1&#xff0c;去向计算机去运…

【数字图像处理+MATLAB】对图片进行伽马校正(Gamma Correction):使用幂律变换公式进行伽马变换

引言 伽马校正&#xff08;Gamma Correction&#xff09;是一种用于图像处理的技术&#xff0c;主要用于调整图像的亮度或对比度。其基本原理是对图像的每一个像素应用一个非线性变换&#xff0c;以更好地适应人眼的视觉感知。在数字图像处理中&#xff0c;伽马校正通常用于调…

Golang | Leetcode Golang题解之第553题最优除法

题目&#xff1a; 题解&#xff1a; func optimalDivision(nums []int) string {n : len(nums)if n 1 {return strconv.Itoa(nums[0])}if n 2 {return fmt.Sprintf("%d/%d", nums[0], nums[1])}ans : &strings.Builder{}ans.WriteString(fmt.Sprintf("%d…

基于STM32的智能充电桩:集成RTOS、MQTT与SQLite的先进管理系统设计思路

一、项目概述 随着电动车的普及&#xff0c;充电桩作为关键基础设施&#xff0c;其智能化、网络化管理显得尤为重要。本项目旨在基于STM32微控制器开发一款智能充电桩&#xff0c;能够实现高效的充电监控与管理。项目通过物联网技术&#xff0c;提供实时数据监测、远程管理、用…

性能高于Transformer模型1.7-2倍,彩云科技发布基于DCFormer架构通用大模型云锦天章

2017年&#xff0c;谷歌发布《Attention Is All You Need》论文&#xff0c;首次提出Transformer架构&#xff0c;掀开了人工智能自然语言处理&#xff08;NLP&#xff09;领域发展的全新篇章。Transformer架构作为神经网络学习中最重要的架构&#xff0c;成为后来席卷全球的一…

黄仁勋:AI革命将创百万亿美元价值!近屿智能带你入局AIGC

11月13日&#xff0c;NVIDIA在日本成功举办了2024年AI峰会。一场关于人工智能驱动的新工业革命的讨论热烈展开。英伟达创始人兼CEO黄仁勋与软银主席兼CEO孙正义共同探讨了当前技术革命的独特之处及其深远影响。 黄仁勋在会上表示&#xff0c;AI革命将创造的价值不是以万亿美元计…

大数据面试题--kafka夺命连环问(后10问)

目录 16、kafka是如何做到高效读写&#xff1f; 17、Kafka集群中数据的存储是按照什么方式存储的&#xff1f; 18、kafka中是如何快速定位到一个offset的。 19、简述kafka中的数据清理策略。 20、消费者组和分区数之间的关系是怎样的&#xff1f; 21、kafka如何知道哪个消…