vue面试题,快看看

简介: vue面试题

vue优点

双向数据绑定:在数据操作方面更为简单;
组件化:组件的封装和复用,开发更高效;
虚拟DOM:不再使用原生dom操作节点,原生dom操作非常耗性能

MVVM的理解

Model是模型层
View 是视图层
ViewModel 介于View和Model之间,起桥梁作用,使视图和数据既能够分离又能通信,View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。

vue原理

双向数据绑定

通过数据劫持,结合发布订阅模式的方式实现,达到数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变。

虚拟DOM

用JavaScript对象来代替DOM节点

// 原始dom节点

<ul calss=‘myclass’>

  <li>初始文本</li>

</ul>

// 对象形式节点

let ul = {

  tag: ‘ul’,

  attrs: { class: ‘myclass’ },

  children: [

     tag: 'li',

     attrs: {},

     children: ['初始文本']

]

}

// 通过修改对象属性来修改视图

ul.children.children[0](‘修改后的文本’)

组件传值

父传子:
父组件中,用v-bind,绑定属性值,子组件通过props接收;
子传父:
子组件通过$emit传值,父组件通过v-on绑定的事件接收;
兄弟传值:
通过中间值,也是就在main.js文件里,new一个vue实例实现传值

Vuex的理解

是vue的状态管理器
State:存放数据
Getters:监听数据
Mutations:提交更改数据的方法,同步
Actions:像一个装饰器,包裹mutations,使之可以异步
Modules:模块化vuex
mapState、mapGetters、mapActions

生命周期

创建前/后,载入前/后,更新前/后,销毁前/后
beforeCreated 创建前
created 创建后
beforeMount 载入前
mounted 载入后
beforeUpdate 数据更新前
updated 数据更新后
beforeDestory 实例销毁前
destroyed 实例销毁后

父子组件的生命周期顺序

渲染过程:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
更新过程:
父beforeUpdate->子beforeUpdate->子updated->父updated

< keep-alive> < /keep-alive>的作用

是 vue内置组件,可以保留其包含的组件的状态,避免重新渲染

ref的作用

获取dom元素
获取子组件的data
调用子组件的方法

组件中key的作用

key是节点唯一标识,方便diff算法识别节点,高效更新虚拟dom

组件中name的作用

在dev-tools中使用,dev-tools中是以组件name进行显示的;
配合keep-alive对组件缓存做限制

组件中data为什么必须是一个函数

写成函数,复用组件时,都会返回一份新的data,相当于每个组件都有私有的数据空间,各自维护数据,不会造成混乱。而写成对象形式,相当于所有组件共用一个data,会牵一发而动全身。

$nextTick的使用

created() 钩子内进行的dom操作一定要放在vue.nextTick() 的回调函数中,created() 执行时dom实际并未渲染,此时进行dom操作是徒劳的,nextTick正好解决了这一问题。

路由的模式

hash模式:即地址栏url中的#符号
history模式:利用了 html5中window.history新增的 pushState() 、replaceState() 方法

路由的导航钩子

全局导航钩子:router.beforeEach(to,from,next),即路由守卫;
组件内的钩子:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

路由懒加载的实现方式

使用import,实现懒加载;
webpack提供的方法,实现懒加载

路由传参方式

path后添加id
使用路由name匹配路由,通过params传递参数;
使用path匹配路由,通过query传递参数;
第一种方式,页面刷新参数会丢失,而其他两种不会

v-show、v-if的区别

v-show本质是控制样式的显示和隐藏;
v-if是动态添加或者删除DOM元素,不停的销毁和创建更耗性能

less、scss申明变量方式

less用@符申明和使用变量
scss用$符申明和使用变量

相关文章
|
5月前
|
JavaScript 前端开发 应用服务中间件
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
这篇文章分析了Vue项目在服务器部署后出现404错误的原因,主要是由于history路由模式下服务器缺少对单页应用的支持,并提供了通过修改nginx配置使用`try_files`指令重定向所有请求到`index.html`的解决方案。
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
|
5月前
|
JavaScript
【Vue面试题十五】、说说你对slot的理解?slot使用场景有哪些?
这篇文章深入探讨了Vue中的`slot`概念,包括它的定义、使用场景和分类(默认插槽、具名插槽和作用域插槽),并通过代码示例展示了如何在组件中使用插槽来实现内容的分发和自定义。同时,文章还对插槽的工作原理进行了分析,解释了`renderSlot`函数和`$scopedSlots`对象的角色。
【Vue面试题十五】、说说你对slot的理解?slot使用场景有哪些?
|
5月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
5月前
|
JavaScript 前端开发 数据处理
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
这篇文章讨论了Vue中实现权限管理的策略,包括接口权限、路由权限、菜单权限和按钮权限的控制方法,并提供了不同的实现方案及代码示例,以确保用户只能访问被授权的资源。
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
|
5月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
4月前
|
缓存 JavaScript 前端开发
vue面试题
vue面试题
174 64
|
3月前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
48 0
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
|
5月前
|
JavaScript 安全 前端开发
【Vue面试题二十九】、Vue项目中你是如何解决跨域的呢?
这篇文章介绍了Vue项目中解决跨域问题的方法,包括使用CORS设置HTTP头、通过Proxy代理服务器进行请求转发,以及在vue.config.js中配置代理对象的策略。
【Vue面试题二十九】、Vue项目中你是如何解决跨域的呢?
|
5月前
|
JavaScript 前端开发 编译器
【Vue面试题三十二】、vue3有了解过吗?能说说跟vue2的区别吗?
这篇文章介绍了Vue 3相对于Vue 2的改进和新增特性,包括性能提升、体积减小、更易维护、更好的TypeScript支持、新的Composition API、新增的Teleport和createRenderer功能,以及Vue 3中的非兼容性变更和API的移除或重命名。
【Vue面试题三十二】、vue3有了解过吗?能说说跟vue2的区别吗?
|
5月前
|
JavaScript 前端开发 API
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?
这篇文章讨论了Vue项目中错误的处理方式,包括后端接口错误和代码逻辑错误的处理策略。文章详细介绍了如何使用axios的拦截器处理后端接口错误,以及Vue提供的全局错误处理函数`errorHandler`和生命周期钩子`errorCaptured`来处理代码中的逻辑错误。此外,还分析了Vue错误处理的源码,解释了`handleError`、`globalHandleError`、`invokeWithErrorHandling`和`logError`函数的作用和处理流程。
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?

热门文章

最新文章