vue面试题整理(1.0)

一、对MVC,MVP,MVVM的理解

三者都是项目的架构模式(不是类的设计模式),即:一个项目的结构,如何分层,不同层负责不同的职责。

1.MVC

MVC的出现是用在后端(全栈时代)

M:model,模型:

主要完成业务功能,在数据库相关的项目中,数据库的增删改查属于模型。没有页面,是纯粹的逻辑。

V:view,视图:

主要负责数据的显示(HTML+CSS,动态网页(jsp,含有HTML的PHP文件))页面的展示和用户的交互。

C:controller,控制器:

主要负责每个业务的核心流程,在项目中体现在路由以及中间件上(nodeJs中的routes文件夹)

2.MVP

MVP是把MVC中的C改成了P。主要限制了M和V之间不能直接通信(互相调用,传递数据)。M和V之间的通信必须经过P。

P:Presenter,表示器

主要用于连接M层、V层,完成Model层与View层的交互,还可以进行业务逻辑的处理。

3.MVVM:

MVVM是把MVP中的P改成了VM。主要体现的是M和V之间的双向绑定。View的变动可以同步相应在Model,反之亦然。Vue就是一个MVVM的框架。准确来说,使用Vue框架完成项目时,使用的是MVVM模式。

VM:ViewModel

主要完成M和V的数据通信,并且是双向绑定。而View和Model之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM,不需要关注数据状态的同步问题,复杂的数据状态维护完全由MVVM来统一管理。

总结:所有的MV*的项目的架构模式:都是为了完成项目代码的职责分工。

二、v-if和v-show区别

相同点:都是用来控制Dom元素的显示和隐藏。

不同点:

1.原理上:

v-if是通过添加和删除Dom元素,来控制Dom元素的显示和隐藏。

v-show是通过控制Dom元素样式的display属性的值,来控制Dom元素的显示和隐藏。

2.性能损耗

v-if:性能损耗主要体现在频繁切换时

v-show:性能损耗主要体现在首次。

3.应用场景:

v-if:用于切换不频繁的场景

v-show:用于切换频繁的场景。

4.安全性:
v-if:安全性好。(如果Dom元素不显示时,在Elements里根本看不到)

v-show:安全性不好。(如果Dom元素不显示时,在elements里依然可以看到,那么,懂程序的人,既可以修改)

三、computed和watch的区别

1.相同点:

都可以监听数据

2.不同点:

(1)概念:

computed:是计算属性,依赖其他属性值,并且computed的值有缓存,当依赖的属性值发生改变时,才会重新计算computed的值,默认是只读的(相当于getter函数),它也可以设置getter和setter函数来完成读和写。

watch:监听器,更多的是观察的作用,每当监听的数据变化时都会执行回调进行后续操作,它只能设置getter。watch默认只监听一层,如果要深度监听,让deep属性为true。

(2)作用:

computed:为了显示而用,降低了模板上代码复杂度。

watch:属性变化的检测(相当于事件),当属性的值发生变化时,可以调用函数。主要处理异步以及开销比较大的操作。简单粗暴的理解为:一个函数的执行时机。

(3)依赖模板调用:

computed:只能在模板上使用。

watch:不能在模板上使用。

(4)是否异步:

computed:不能有异步,只能同步。

watch:可以有异步。

(5)立即执行:

computed:是立即执行。

watch:默认不是立即执行。如果要立即执行,增加属性:immediate。

补充:在写代码时,把函数定义和调用时机分开。

四、Vue2的响应式原理

响应式:当js中的数据发生变化时,模板上会对应的发生变化。

1.数据劫持:

目的:当数据发生变化时,Vue框架会感知到。

怎么做的:利用ES5的Object.defineProperty()。当实例化组件时,Vue框架内部会把定义在组件data里的所有数据(属性),进行遍历,给每个数据(属性)增加setter和getter函数(同时会做订阅)。当数据发生变化时,会调用setter函数。当获取数据时,会调用getter函数。

2.发布订阅者模式:

目的:当数据发生变化时(其实就是调用setter函数时),会发布给所有订阅者。

怎么做的:当Vue组件实例化时,Vue框架内部会扫描模板,让模板上使用Vue语法(指令,{{}}等)的Dom元素去订阅对应的数据的变化。然后,当数据变化时,会更新所有订阅该数据的模板。

五、Vue3的响应式原理:

1.数据劫持:用proxy替换了Object.defineProperty。Proxy不需要循环,速度比Object.defineProperty快10倍。同时也解决了数组的劫持。(Vue2中用下标的方式改变数组不是响应式的)

2.发布订阅者模式:

内部有个Track函数:相当于订阅。

内部有个Trigger函数:相当于发布。

六、双向绑定的原理

1.双向绑定:视图层发生变化时,模型层会变化。模型层变化时,视图层会变化。

2.原理:

(1)通过事件和属性完成。

事件完成的:视图层影响模型层。

属性完成的是:模型层影响视图层(背后就是响应式原理)

3.Vue针对官方标签使用v-model指令,v-model指令针对不同的官方标签使用不同事件和属性。

(1)、针对文本框(单行和多行):value属性和Input事件。如果加上修饰符lazy。事件就变成了Change事件。

(2)、针对radio:使用的checked属性和Change事件。同时,需要给radio加上value属性。

(3)、针对checkbox:使用的checked属性和change事件。

(3.1)、如果应用在多选时,需要给checkbox加上value属性。

(3.2)、如果应用在单选时,不需要加。

(4)、针对select:使用value属性和change事件。

七、单项数据流

1.单项数据流是什么:

单项数据流是指父组件可以修改子组件的数据,反之不行(子组件不能修改父组件的数据)。

2.Vue框架的单项数据流:

Vue框架的Props是单项数据流。即:父组件可以修改子组件的Props。子组件不能通过修改Props的方式来修改父组件的数据(data),否则:

(1)、造成数据混乱:如:一个父级组件的数据传递给多个子组件,某个子组件如果通过Props修改父组件的数据,父级组件再修改其他子组件,其他子组件就会莫名其妙的被修改,造成数据混乱。

(2)、框架会给程序员爆出一个警告(特指:父组件给子组件传递的Props来自父组件的数据)

3.当父级的数据更新时,子组件的Props也会随之更新。

八、keep-alive

keep-alive是Vue提供的组件。

它有三个特征:

(1)、组件作用:keep-alive可以缓存组件及其状态(数据),避免了组件的频繁创建和销毁所带来的性能损耗。一般结合路由和动态组件一起使用。

(2)组件属性:提供include和exclude属性。include表示只有名称匹配的组件会被缓存,exclude表示任何名称匹配的组件都不会被缓存,其中exclude的优先级比include高。两者都支持字符串或正则表达式。

(3)keep-alive会触发两个钩子函数:activated和deactivated,当组件被移除时,触发钩子函数deactivated。

九、SPA的理解:

(1)单页面应用的概念:

SPA:single page application,单页面应用

就是整个项目只有一个HTML页面(文件),首次加载时,把所有的HTML,css,js全部加载下来。通过操作Dom的删除和创建(添加)来完成页面的切换。

(2)单页面应用优缺点

优点:单页面应用相对服务器压力小【因为:首次、或者只要HTML,css和js加载完毕后,切换页面是不用再去服务器请求HTML,css和js,而是直接操作Dom】

2.局部刷新,所以,用户体验好。【通过删除,添加,修改Dom的方式】

3.前后端分离

4.页面效果比较炫酷(比如切换页面内容时的转场动画)

缺点:

不利于搜索引擎优化SEO(search engine optimization)。如:百度,360等搜索引擎搜索、

2.初次加载时耗时多(可以使用路由懒加载解决)

3.导航不可用,如果一定要导航需要自行实现前进、后退(Vue-Router做好了)。页面复杂度提高很多。

4.容易造成css命名冲突【用scoped或者BEM的方式解决】

十、请问怎么理解虚拟Dom和Diff算法

1.什么是虚拟Dom和Diff算法:

虚拟Dom:用JS对象模拟的真实Dom,该JS对象包含了真实Dom的所有属性和内容,

Diff算法:用来比较两个虚拟Dom的不同之处,并在旧的虚拟Dom树上打上标记。

2.虚拟Dom和Diff算法的作用:

虚拟Dom和Diff算法结合起来,用来提升性能。可以减少无效的Dom渲染,即:减少了无效的重排和重绘。

3.步骤(思路,流程)

(1)产生两个虚拟Dom树:newVDom,oldVDom

(2)oldVDom和真实Dom树保持一致

(3)数据变化时,影响的是newDom

(4)操作newVDom后,通过Diff算法对比newVDom和oldVDom的差异

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

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

相关文章

Kali 修改IP地址和DNS 开启SSH和远程桌面

一、修和IP和DNS 1、打开配置文件 vim /etc/network/interfaces# 加入 auto eth0 iface eth0 inet static address 10.3.0.231 netmask 255.255.255.0 gateway 10.3.0.12、清空网卡配置 ip addr flush dev eth0 3、配置DNS vim /etc/resolv.confnameserver 114.114.114.11…

爬虫-xpath篇

1.xpath的基础语法 表达式描述nodename选中该元素/从根节点选取、或者是元素和元素间的过渡//从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置.选取当前节点…选取当前节点的父节点选取属性text()选取文本 举例: 路径表达式结果html选择html元…

TLS协议握手流程

浅析 TLS(ECDHE)协议的握手流程(图解) - 知乎 前言 通过 wireshark 抓取 HTTPS 包,理解 TLS 1.2 安全通信协议的握手流程。 重点理解几个点: TLS 握手流程:通过 wireshark 抓取 HTTPS 包理解…

常用数据预处理方法 python

常用数据预处理方法 数据清洗缺失值处理示例删除缺失值插值法填充缺失值 异常值处理示例删除异常值替换异常值 数据类型转换示例数据类型转换在数据清洗过程中非常常见 重复值处理示例处理重复值是数据清洗的重要步骤 数据转换示例 数据集成示例数据集成是将多个数据源合并为一…

Linux CentOS搭建NGINX环境

在Linux CentOS 7.x系统安装NGINX 1.13.7版本,具体步骤如下 1、安装所需环境 //安装gcc yum install gcc-c//安装PCRE pcre-devel yum install -y pcre pcre-devel//安装zlib yum install -y zlib zlib-devel//安装Open SSL yum install -y openssl openssl-devel…

【网络协议】聊聊网络ReadTimeout和ConnectTimeout

在实际的开发中,网络超时是一个比较常见的问题,比如说针对支付系统,超时就需要进行和三方人员进行核对订单状态,是否人工介入处理。 但其实在设计网络框架的时候,一般都有两个超时参数 连接超时参数 ConnectTimeout&am…

目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】缺陷检测

目录 几个高频面试题目 深度学习工具在缺陷检测中是如何工作的? 深度学习是如何工作的? 深度学习缺陷检测技术

vue项目node-sass^4.14.1 python gyp 报错解决办法

npm i node-sass4.14.1 --sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass/参考链接:链接

LabVIEW在不同操作系统上使VI、可执行文件或安装程序

LabVIEW在不同操作系统上使VI、可执行文件或安装程序 LabVIEW可以在多个操作系统上运行,主要支持以下几种操作系统: Windows: LabVIEW在各个版本的Windows操作系统上都能运行,包括Windows 7、Windows 8和Windows10。LabVIEW为Wi…

elk:filebeat也是一个日志收集工具

filebeat是一个轻量级的日志收集工具,所使用的系统资源比logstash部署和启动使用的资源要小的多 filebeat可以允许在非java环境,他可以代替logstash在非java环境上收集日志 filebeat无法实现数据的过滤,一般是结合logstash的数据过滤功能一…

Safe and Practical GPU Computation in TrustZone论文阅读笔记

Safe and Practical GPU Computation in TrustZone 背景知识: youtube GR视频讲解链接:ASPLOS’22 - Session 2A - GPUReplay: A 50-KB GPU Stack for Client ML - YouTube GPU软件栈: 概念:"GPU软件栈"指的是与GPU硬件…

openssl生成ssl证书

x509证书一般会用到三类文,key,csr,crt。 Key 是私用密钥openssl格,通常是rsa算法。 Csr 是证书请求文件,用于申请证书。在制作csr文件的时,必须使用自己的私钥来签署申,还可以设定一个密钥。…

使用mybatis-plus框架:@Autowired报错Could not autowire. No beans of ‘XXX‘ type found

使用mybatis-plus框架,使用xxmapper报错: 解决办法是:在mapper中添加注解: Repository Mapper 也可以使用 AutowiredSysRoleMenuService sysRoleMenuService;替代 AutowiredSysRoleMenuMapper sysRoleMenuMapper;方法名不同,但…

处理和分析人类语言数据-NLTK安装和使用

简介:NLTK(Natural Language Toolkit)是一个强大的Python库,用于处理和分析人类语言数据,是一个开源的项目,包含:Python模块,数据集和教程,用于NLP的研究和开发&#xff…

Windows系统下Elasticsearch-7.15.2安装

一、环境 此次笔记使用的运行环境以及软件版本 系统:WIN10 JDK版本:1.8 Elasticsearch版本:7.15.2 elasticsearch-head版本:最新 IK分词器版本:7.15.2 Kibana版本:7.15.2 二、Elasticsearch基本知识 2.1 介绍…

java源码-类与对象

1、类与对象的初步认知 在了解类和对象之前我们先了解一下什么是面向过程和面向对象。 1)面向过程编程: C语言就是面向过程编程的,关注的是过程,分析出求解问题的步骤,通过函数调用逐步解决问题。 2)面向对…

【已解决】ModuleNotFoundError: No module named ‘PIL‘

问题描述 Traceback (most recent call last): File "train.py", line 75, in <module> import PILModuleNotFoundError: No module named PIL 解决办法 pip install pillow

第一类瑞利索末菲标量衍射模型的方孔衍射的空间像计算(附python计算代码)

记第一类瑞利索末菲标量衍射模型的方孔衍射的空间像计算(附python计算代码) RS type 1 衍射空间像计算傅里叶变换采样条件实际计算计算要求傅立叶变换法计算直接卷积方法计算代码傅立叶变换方法直接卷积https://zhuanlan.zhihu.com/p/624292239 Goodman, J. W. (2004). Intro…

rman SBT_TAPE NFS disk 模拟NBU带库 FRA

-----------------rman 将本地磁盘变成磁带----------------------------------- ##RAC 本地 /nfs----两个备份策略 clustern run { allocate channel ch00 device type SBT_TAPE PARMS"SBT_LIBRARYoracle.disksbt, ENV(BACKUP_DIR/nfs)"; backup recove…

蓝桥杯day04——查询后矩阵的和

1.题目 给你一个整数 n 和一个下标从 0 开始的 二维数组 queries &#xff0c;其中 queries[i] [typei, indexi, vali] 。 一开始&#xff0c;给你一个下标从 0 开始的 n x n 矩阵&#xff0c;所有元素均为 0 。每一个查询&#xff0c;你需要执行以下操作之一&#xff1a; …