Vue 常见面试题(一)

目录

1、Vue 的最大的优势是什么?(必会)

2、Vue 和 jQuery 两者之间的区别是什么?(必会)

3、MVVM 和 MVC 区别是什么?哪些场景适合?(必会)

1、基本定义

2、使用场景

3、两者之间的区别

4、Vue 数据双向绑定的原理是什么?(必会)

5、Object.defineProperty 和 Proxy 的区别(必会)

6、Vue 生命周期总共分为几个阶段?(必会)

7、第一次加载页面会触发哪几个钩子函数?(必会)

8、请说下封装 Vue 组件的过程?(必会)

9、Vue 组件如何进行传值的? (必会)

10、组件中写 name 选项有什么作用?(必会)


1、Vue 的最大的优势是什么?(必会)

Vue 作为一款轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟
DOM、运行速度快,并且作者是中国人尤雨溪,对应的 API 文档对国内开发者优化,作为前端开
发人员的首选入门框架
Vue 的优势:
1、Vue.js 可以进行组件化开发,使代码编写量大大减少,读者更加易于理解。
2、Vue.js 最突出的优势在于可以对数据进行双向绑定。
3、使用 Vue.js 编写出来的界面效果本身就是响应式的,这使网页在各种设备上都能
显示出非常好看的效果。
4、相比传统的页面通过超链接实现页面的切换和跳转,Vue 使用路由不会刷新页面。
5、vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和 dom,
这样大大加快了访问速度和提升用户体验。
6、而且他的第三方 UI 组件库使用起来节省很多开发时间,从而提升开发效率。

2、Vue 和 jQuery 两者之间的区别是什么?(必会)

1、jQuery 介绍:
jQuery 曾经也是现在依然最流行的 web 前端 js 库,可是现在无论是国内还是国外他的使用
率正在渐渐被其他的 js 库所代替,随着浏览器厂商对 HTML5 规范统一遵循以及 ECMA6 在浏览器
端的实现,jQuery 的使用率将会越来越低
3、vue 和 jQuery 区别:
3.1)vue 和 jQuery 对比 jQuery 是使用选择器()选取 DOM 对象,对其进行赋值、取值、
事件绑定等操作,其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象,而数
据和界面是在一起的
3.2)比如需要获取 label 标签的内容:)选取 DOM 对象,对其进行赋值、取值、事件绑
定等操作,其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象,而数据和界
面是在一起的
3.3)比如需要获取 label 标签的内容:(“lable”).val();,它还是依赖 DOM 元素的值。 Vue
则是通过 Vue 对象将数据和 View 完全分离开来了 对数据进行操作不再需要引用相应的 DOM 对象,可以说数据和 View 是分离的,
他们通过 Vue 对象这个 vm 实现相互的绑定,这就是传说中的 MVVM

3、MVVM 和 MVC 区别是什么?哪些场景适合?(必会)

1、基本定义

1.1)MVVM 基本定义
MVVM 即 Model-View-ViewModel 的简写,即模型-视图-视图模型,模型(Model)指
的是后端传递的数据,视图(View)指的是所看到的页面,视图模型(ViewModel)是 mvvm 模式的核
心,它是连接 view 和 model 的桥梁。它有两个方向:
1.1.1)一是将模型(Model)转化成视图(View),即将后端传递的数据转化成所看到的
页面,实现的方式是:数据绑定,
1.1.2)二是将视图(View)转化成模型(Model),即将所看到的页面转化成后端的数据。
实现的方式是:DOM 事件监听,这两个方向都实现的,我们称之为数据的双向绑定
1.2)MVC 基本定义
MVC 是 Model-View- Controller 的简写。即模型-视图-控制器。M 和 V 指的意思和
MVVM 中的 M 和 V 意思一样。C 即 Controller 指的是页面业务逻辑,使用 MVC 的目的就是将 M
和 V 的代码分离。MVC 是单向通信。也就是 View 跟 Model,必须通过 Controller 来承上启下

2、使用场景

主要就是 MVC 中 Controller 演变成 MVVM 中的 viewModel,MVVM 主要解决了 MVC 中
大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验,vue 数据驱动,通过数
据来显示视图层而不是节点操作, 场景:数据操作比较多的场景,需要大量操作 DOM 元素时,
采用 MVVM 的开发方式,会更加便捷,让开发者更多的精力放在数据的变化上,解放繁琐的操
作 DOM 元素

3、两者之间的区别

MVC 和 MVVM 其实区别并不大,都是一种设计思想,MVC 和 MVVM 的区别并不是 VM
完全取代了 C,只是在 MVC 的基础上增加了一层 VM,只不过是弱化了 C 的概念,ViewModel
存在目的在于抽离 Controller 中展示的业务逻辑,而不是替代 Controller,其它视图操作业务等还
是应该放在 Controller 中实现,也就是说 MVVM 实现的是业务逻辑组件的重用,使开发更高效,
结构更清晰,增加代码的复用性

4、Vue 数据双向绑定的原理是什么?(必会)

V ue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持
各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
1、需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter,
这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化
2、compile 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每
个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视
3、Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁,主要做的事情是:
3.1)在自身实例化时往属性订阅器(dep)里面添加自己
3.3)待属性变动 dep.notice()通知时,能调用自身的 update()方法,并触发 Compile 中
绑定的回调,则功成身退。
4、MVVM 作为数据绑定的入口,整合 Observer、Compile 和 Watcher 三者,通 Observer 来监
听自己的 model 数据变化,通过 Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer
和 Compile 之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据 model
变更的双向绑定效果

5、Object.defineProperty 和 Proxy 的区别(必会)

Object.defineProperty 和 Proxy 的区别如下:
1、Proxy 可以直接监听对象而非属性;
2、Proxy 可以直接监听数组的变化;
3、Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是
Object.defineProperty 不具备的
4、Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而
Object.defineProperty 只能遍历对象属性直接修改
5、Proxy 作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的
性能红利
6 Object.defineProperty 兼容性好,支持 IE9,而 Proxy 的存在浏览器兼容性问题,而且
无法用 polyfill 磨平,因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写

6、Vue 生命周期总共分为几个阶段?(必会)

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模
板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
1、beforeCreate
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
2、created
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data
observer)属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不
可见
3、beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用
4、mounted
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子,如果 root 实例挂载了一
个文档内元素,当 mounted 被调用时 vm.$el 也在文档内
5、beforeUpdate
数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,
比如手动移除已添加的事件监听器,该钩子在服务器端渲染期间不被调用,因为只有初次渲染会
在服务端进行
6、updated
北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com
第 222 页 共 348 页 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子
7、activated
keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用
8、deactivated
keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用
9、beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被
调用
10、destroyed
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监
听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用
11、errorCaptured(2.5.0+ 新增)
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生
错误的组件实例以及一个包含错误来源信息的字符串,此钩子可以返回 false 以阻止该错误继续
向上传播

7、第一次加载页面会触发哪几个钩子函数?(必会)

当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函

8、请说下封装 Vue 组件的过程?(必会)

首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决
了我们传统项目开发:效率低、难维护、复用性等问题
1、分析需求:确定业务需求,把页面中可以服用的结构,样式以及功能,单独抽离成一个
文件,实现复用
2、具体步骤:使用 Vue.extend 方法创建一个组件,然后使用 Vue.component 方法注册组件,
子组件需要数据,可以在 props 中接受定义,而子组件修改好数据后,想把数据传递给父组件,
可以采用$emit 方法

9、Vue 组件如何进行传值的? (必会)

1、父组件向子组件传递数据
父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据
绑定在自定义属性上,在子组件添加参数 props 接收即可
2、子组件向父组件传递数据
子组件通过 vue 实例方法$emit 进行触发并且可以携带参数,父组件监听使用@(v-on)
进行监听,然后进行方法处理
3、非父子组件之间传递数据
3.2)在组件中 created 中订阅方法 eventBus.$on("自定义事件名",methods 中的方法名)
3.3) 在另一个兄弟组件中的 methods 中写函数,在函数中发布 eventBus 订阅的方法
eventBus.$emit("自定义事件名”)
3.4) 在组件的 template 中绑定事件(比如 click)

10、组件中写 name 选项有什么作用?(必会)

1、项目使用 keep-alive 时,可搭配组件 name 进行缓存过滤
2、DOM 做递归组件时需要调用自身 name
3、vue-devtools 调试工具里显示的组见名称是由 vue 中组件 name 决定的

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

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

相关文章

索尼下一代游戏主机PS5将于11月20日发售

索尼下一代游戏机PS5将于2020年11月20日发布。据悉,这款游戏机的售价可能会达到499美元(约合人民币3500元)。 我们知道游戏主机的价格低于游戏PC的价格。 既然PS5的主要硬件配置已经公开,那么现在配置一台同样配置的游戏PC需要多少…

WSL2的安装步骤

WSL2(Windows Subsystem for Linux 2)是微软公司开发的一项创新性技术,它在Windows操作系统上提供了一个完整的Linux内核,并允许用户在Windows环境中运行Linux发行版。之前想在Windows上使用Linux系统必须先安装VirtualBox或VMWar…

实战whisper语音识别第一天,部署服务器,可远程访问,实时语音转文字(全部代码和详细部署步骤)

Whisper是OpenAI于2022年发布的一个开源深度学习模型,专门用于语音识别任务。它能够将音频转换成文字,支持多种语言的识别,包括但不限于英语、中文、西班牙语等。Whisper模型的特点是它在多种不同的音频条件下(如不同的背景噪声水…

聊聊功率器件(氮化镓,碳化硅)

氮化镓和碳化硅是两种具有独特性质和广泛应用的无机物。下面将尽可能详细地解释它们的定义、应用、研究热点以及对我们的价值。 1,氮化镓 氮化镓(GaN)是一种由氮和镓元素组成的化合物,具有直接能隙的半导体特性。其结构类似于纤…

多线程基础 -概念、创建、等待、分离、终止

文章目录 一、 线程概念1. 什么是线程2. 线程的优点3.线程的缺点4. 线程异常5. 线程用途 二、 Linux进程VS线程1. 进程和线程2. 进程和线程的地址空间3. 进程和线程的关系 三、Linux线程控制1. POSIX线程库2. 线程创建3. 线程ID及进程地址空间布局4. 线程终止5. 线程等待6. 线程…

故障诊断 | 一文解决,RBF径向基神经网络的故障诊断(Matlab)

文章目录 效果一览文章概述专栏介绍模型描述源码设计参考资料效果一览 文章概述

专业140+总分410+南京大学851信号与系统考研经验南大电子信息与通信集成,电通,真题,大纲,参考书。

今年分数出来还是有点小激动,专业851信号与系统140(感谢Jenny老师辅导和全程悉心指导,答疑),总分410,梦想的南大离自己越来越近,马上即将复试,心中慌的一p,闲暇之余&…

#Linux(权限管理)

(一)发行版:Ubuntu16.04.7 (二)记录: (1) (2)-开头代表普通文件 划分为三组: rw- rw- r-- rw-: 文件拥有…

蓝桥杯-体育健将-CPP-贪心

目录 一、题目描述: 二、整体思路: 三、代码: 一、题目描述: 二、整体思路: 要在k分钟内拿最多的金牌,就意味着要参加尽可能多的项目,因此就要选择耗时(比赛时间和休息时间)最少的项目先预处…

【隐私计算实训营003详解隐私计算框架及技术要点】

1. 隐语架构一览 1.1 隐语架构 隐语架构通常指的是一种面向隐私保护计算的软件框架或解决方案,它采用了密码学、可信执行环境(TEE)、多方安全计算(MPC)等多种隐私保护技术来实现在数据加密状态下进行计算,…

API调试管理工具Postman下载及操作介绍

1.下载安装postman地址:https://www.getpostman.com/downloads/ 2.创建项目 3.创建请求API 然后点击save保存api 4.用一个变量保存主域名,方便后续操作 就类似下面的baseurl 5.创建新环境 6.添加变量(如添加本地测试环境url——ba…

[综述笔记]A Survey on Deep Learning for Neuroimaging-Based Brain Disorder Analysis

论文网址:Frontiers | A Survey on Deep Learning for Neuroimaging-Based Brain Disorder Analysis (frontiersin.org) 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论…

随笔】Git -- 常用命令(四)

💌 所属专栏:【Git】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大…

JavaScript高级(十四)----prmise

异步请求的处理方式 回调函数 所谓的回调函数就是函数作为参数的传递,在一个函数内部调用另一个函数,调用的同时可以把内部函数的数据传递出来,他的使用场景就是异步操作,数据需要等待一段时间才能返回的情况下可以使用回调函数…

CrossOver 23 用户可以免费升级到 CrossOver24吗?CrossOver用户如何升级呢?

也就是上个月(2024年2月底)左右,CrossOver 刚刚更新了 24 版本,CrossOver更新的内容有哪些,大家可以参考这篇文章:CrossOver24.0新功能介绍,这篇文章详细介绍了CrossOver24有哪些新特点&#xf…

Echarts中手柄样式更改

代码: dataZoom: [{start: 0,end: 100,left: 100,bottom: 0,right: 140,backgroundColor: yellow,borderRadius: 15,borderColor: green,dataBackground: {lineStyle: {width: 0},areaStyle: {color: black,opacity: 1,}},selectedDataBackground: {lineStyle: {wi…

MySQL数据库操作学习(6)事务与pymysql

文章目录 1、视图2、索引3、存储引擎4、事务(重点)①介绍②事务隔离级别 5、pymysql(重点)①导入模块②链接数据库对象③隐式事务④显性事务 1、视图 视图(View)是一种虚拟的表,它是基于一个或多个实际表(或其他视图)…

搭建自己的博客-拾壹博客

写在前面 唠叨两句 作为一个技术开发人员,没有一个自己的博客,人生注定缺少点什么东西,是不是?最近研究了一些博客搭建,本文是使用开源项目”拾壹博客“进行搭建。 推荐等级 所需技术难度:4星 后续自定义…

数据类型转换篇(二)

文章目录 7.11 float()7.12 hex()7.13 int()7.14 list()7.15 oct()7.16 ord()7.17 repr()7.18 set()7.19 str()7.20 tuple() 7.11 float() float() 是 Python 的内置函数,用于将一个数值或数值表示的字符串转换成浮点数(floating point number&#xff…

全栈的自我修养 ———— uniapp中加密方法

直接按部就班一步一步来 一、首先创建一个js文件填入AES二、创建加密解密方法三、测试 一、首先创建一个js文件填入AES 直接复制以下内容 /* CryptoJS v3.1.2 code.google.com/p/crypto-js (c) 2009-2013 by Jeff Mott. All rights reserved. code.google.com/p/crypto-js/wi…