百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

分享一些前端面试题----Vue 常考基础知识点

bigegpt 2024-08-08 12:18 2 浏览

如果有帮助麻烦点个关注(我会互关的-_-)

对MVVM开发模式的理解

它是前端一个架构模式

? Model:代表数据模型,定义数据,

? View:代表UI视图,负责数据的展示

? ViewModel:负责监听Model中数据的改变并且监听视图的更新,处理用户交互操作

Model和View并无直接关系,而是通过ViewModel来进行联系的,Model和ViewModel直接用着双向数据绑定的联系,因此当Model中数据的改变会触发View视图层的更新,无需人为干涉,只要关注业务逻辑,不需要手动操作dom


v-show和v-if区别

? 如果一个元素需要频繁地切换的话,用v-show,因为v-show是给元素添加了css属性来切换隐藏显示的,这样的话从性能角度来讲更高,v-if是当条件满足的情况下,把元素创建出来


vue生命周期函数

实质就是回调函数,vue实例每到一个阶段会

组件创建期间的4个钩子函数

beforeCreate data和methods中的数据还没有被初始化

created 在created中,data和methods都已经初始化好了 如果要调用methods中的方法,或者操作data数据最早 在created中操作

             应用场景:发请求获取数据初始化data

beforeMount 模板已经在内存中编辑完成,但是没把模板渲染到页面,但尚未在挂载在页面中去.

mounted 实例创建周期最后一个生命周期函数 当执行完mounted,实例已经完全被创建好


            应用场景:需要操作或者dom元素的时候比如echarts的初始化方法

组件的运行

beforeUpdate 这2个事件会根据data数据的改变 触发0到N次

update 把最新的内存dom树更新之后会把最新的内存dom树更新到页面中去

beforeDestroy Vue实例就进入销毁阶段

destroy 组件已经被完全销毁


        应用场景:清除定时器,记录用户离开的时间等埋点操作。

注意

回答这个问题不需要把八个钩子死记硬背下来,知道有八个能说出几个常见的钩子的特点以及使用场景就行;


vue-router的两种模式以及实现原理

第一种模式:hash模式url带井号

? 1.onhashchange监听url中hash值的变化,

? 2.根据获取的hash的值,发送请求给后台

? 3.后台返回数据,浏览器就会渲染到路由对应的占位符

第二种模式:h5 之后 history模式,url不带井号

? 1.通过2个API pushState和replaceState可以改变url地址

? 2.以及popState监听url的变化,拿到最新的url地址,

? 3.根据url地址,发请求给后台,拿到我们需要的数据

? 4.后台返回的数据替换路由的占位符


组件中的传值

? A或者B组件,跳转到B组件可以通过 编程式导航this.$router.push({path:'url,query:{属性名:参数}}) 来传递

? 如果是父子组件的话,

? 子组件通过pros属性来接收 父组件通过子组件prop定义的属性和值进行传递,

? 子组件传递父组件 通过自定义事件,this.$emit('事件名','参数') 传递 父组件通过事件接收

? 如果组件与组件中嵌套比较深的话可以通过vuex全局状态管理

父子通信

如果是父子组件的话,

?子组件通过pros属性来接收 父组件通过子组件prop定义的属性和值进行传递,

?子组件传递父组件 通过自定义事件,this.$emit('事件名','参数') 传递 父组件通过事件接收

兄弟组件通信

对于这种情况可以通过查找父组件中的子组件实现,也就是 this.$parent.$children,在 $children 中可以通过组件 name 查询到需要的组件实例,然后进行通信。

跨多层次组件通信

可以通过vuex全局状态管理


vuex是什么?

全局状态(数据)管理,专门用于管理Vue中的数据的,用于组件嵌套比较深层的传值或者到处都要使用到的数据储存

用来操作比较大的项目

new Vuex Store({})

state:{}状态 - 数据

getters{} 用来获取或者过滤数据

mutations{}同步操作state中的值 this.$store.commit('事件',值 )

actions{} 异步操作操作仓库中的数据但也要通过mutations来触发

module 当数据比较复杂时 可以定义模块化方式


vue中data对象数据的添加删除引发视图无法更新的问题

Vue不能检测到对象属性的添加或删除,自己添加的值,不属于响应式的数据,模型改变后不会更新,可以用vue.set来解决


computed 和 watch 区别

computed 是计算属性,依赖其他属性计算值,并且 computed 的值有缓存,只有当计算值变化才会返回内容。

watch 监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。

所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed,对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch


keep-alive 组件有什么作用

如果你需要在组件切换的时候,保存一些组件的状态防止多次渲染,就可以使用 keep-alive 组件包裹需要保存的组件。

对于 keep-alive 组件来说,它拥有两个独有的生命周期钩子函数,分别为 activateddeactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 actived 钩子函数。


v-show 与 v-if 区别

v-show 只是在 display: nonedisplay: block 之间切换。无论初始条件是什么都会被渲染出来,后面只需要切换 CSS,DOM 还是一直保留着的。所以总的来说 v-show 在初始渲染时有更高的开销,但是切换开销很小,更适合于频繁切换的场景。

v-if 的话就得说到 Vue 底层的编译了。当属性初始为 false 时,组件就不会被渲染,直到条件为 true,并且切换条件时会触发销毁/挂载组件,所以总的来说在切换时开销更高,更适合不经常切换的场景。

并且基于 v-if 的这种惰性渲染机制,可以在必要的时候才去渲染组件,减少整个页面的初始渲染开销。


组件中 data 为什么是一个函数而不是对象

这道题目其实更多考的是 JS 功底。

组件复用时所有组件实例都会共享 data,如果 data 是对象的话,就会造成一个组件修改 data 以后会影响到其他所有组件,所以需要将 data 写成函数,每次用到就调用一次函数获得新的数据。

当我们使用 new Vue() 的方式的时候,无论我们将 data 设置为对象还是函数都是可以的,因为 new Vue() 的方式是生成一个根组件,该组件不会复用,也就不存在共享 data 的情况了。


vue双向绑定数据原理

是通过object.defineproperty()来进行数据的劫持的,里面有2个属性为get,set()方法,可以控制一个对象属性的操作,比如读写等.vue就是通过Object.defineProperty( )对属性设置一个set函数, 当数据改变了就会来触发这个函数,所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了

设置一个监听器,Oberver,监听所有的属性.

实现一个订阅者Watcher,收到属性的变化通知响应的函数,从而更新视图

实习一个解析器compile 解析初始化对应的订阅器


你会封装vue组件吗

首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低难维护复用性等问题。

然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。

回答这种问题举例子最佳,说出封装思路

封装好的组件导出 以及在使用的页面导入就能用比如一个弹窗组件,首先要写好样式以及常规的功能逻辑,比较重要的是,假如用的时候需要动态传入弹窗提示语,那么在设计组件的时候就需要用到传值,假如用户在该组件还需要改变数据,此时可能还需要在改变数据的时候通过$emit触发函数传给父组件,总之具体的设计要根据具体需求。

相关推荐

【Docker 新手入门指南】第十章:Dockerfile

Dockerfile是Docker镜像构建的核心配置文件,通过预定义的指令集实现镜像的自动化构建。以下从核心概念、指令详解、最佳实践三方面展开说明,帮助你系统掌握Dockerfile的使用逻...

Windows下最简单的ESP8266_ROTS_ESP-IDF环境搭建与腾讯云SDK编译

前言其实也没啥可说的,只是我感觉ESP-IDF对新手来说很不友好,很容易踩坑,尤其是对业余DIY爱好者搭建环境非常困难,即使有官方文档,或者网上的其他文档,但是还是很容易踩坑,多研究,记住两点就行了,...

python虚拟环境迁移(python虚拟环境conda)

主机A的虚拟环境向主机B迁移。前提条件:主机A和主机B已经安装了virtualenv1.主机A操作如下虚拟环境目录:venv进入虚拟环境:sourcevenv/bin/active(1)记录虚拟环...

Python爬虫进阶教程(二):线程、协程

简介线程线程也叫轻量级进程,它是一个基本的CPU执行单元,也是程序执行过程中的最小单元,由线程ID、程序计数器、寄存器集合和堆栈共同组成。线程的引入减小了程序并发执行时的开销,提高了操作系统的并发性能...

基于网络安全的Docker逃逸(docker)

如何判断当前机器是否为Docker容器环境Metasploit中的checkcontainer模块、(判断是否为虚拟机,checkvm模块)搭配学习教程1.检查根目录下是否存在.dockerenv文...

Python编程语言被纳入浙江高考,小学生都开始学了

今年9月份开始的新学期,浙江省三到九年级信息技术课将同步替换新教材。其中,新初二将新增Python编程课程内容。新高一信息技术编程语言由VB替换为Python,大数据、人工智能、程序设计与算法按照教材...

CentOS 7下安装Python 3.10的完整过程

1.安装相应的编译工具yum-ygroupinstall"Developmenttools"yum-yinstallzlib-develbzip2-develope...

如何在Ubuntu 20.04上部署Odoo 14

Odoo是世界上最受欢迎的多合一商务软件。它提供了一系列业务应用程序,包括CRM,网站,电子商务,计费,会计,制造,仓库,项目管理,库存等等,所有这些都无缝集成在一起。Odoo可以通过几种不同的方式进...

Ubuntu 系统安装 PyTorch 全流程指南

当前环境:Ubuntu22.04,显卡为GeForceRTX3080Ti1、下载显卡驱动驱动网站:https://www.nvidia.com/en-us/drivers/根据自己的显卡型号和...

spark+python环境搭建(python 环境搭建)

最近项目需要用到spark大数据相关技术,周末有空spark环境搭起来...目标spark,python运行环境部署在linux服务器个人通过vscode开发通过远程python解释器执行代码准备...

centos7.9安装最新python-3.11.1(centos安装python环境)

centos7.9安装最新python-3.11.1centos7.9默认安装的是python-2.7.5版本,安全扫描时会有很多漏洞,比如:Python命令注入漏洞(CVE-2015-2010...

Linux系统下,五大步骤安装Python

一、下载Python包网上教程大多是通过官方地址进行下载Python的,但由于国内网络环境问题,会导致下载很慢,所以这里建议通过国内镜像进行下载例如:淘宝镜像http://npm.taobao.or...

centos7上安装python3(centos7安装python3.7.2一键脚本)

centos7上默认安装的是python2,要使用python3则需要自行下载源码编译安装。1.安装依赖yum-ygroupinstall"Developmenttools"...

利用本地数据通过微调方式训练 本地DeepSeek-R1 蒸馏模型

网络上相应的教程基本都基于LLaMA-Factory进行,本文章主要顺着相应的教程一步步实现大模型的微调和训练。训练环境:可自行定义,mac、linux或者window之类的均可以,本文以ma...

【法器篇】天啦噜,库崩了没备份(天啦噜是什么意思?)

背景数据库没有做备份,一天突然由于断电或其他原因导致无法启动了,且设置了innodb_force_recovery=6都无法启动,里面的数据怎么才能恢复出来?本例采用解析建表语句+表空间传输的方式进行...