vue常见面试题

2023-12-27 23:10:14

1. Vue的最大优势是什么?

简单易学, 轻量级整个源码js文件不大, 双向数据绑定, 数据驱动视图, 组件化, 数据和视图分离,

vue负责关联视图和数据, 作者中国人(尤雨溪), 文档都是中文的, 入门教程非常多, 上手简单.

相比传统网页, vue是单页面可以只刷新某一部分

2. Vue和jQuery区别是什么?

jQuery应该算是一个插件, 里面封装了各种易用的方法, 方便你使用更少的代码来操作dom标签

Vue是一套框架, 有自己的规则和体系与语法, 特别是设计思想MVVM, 让数据和视频关联绑定, 省略了很多DOM操作. 然后指令还给标签注入了更多的功能

3. mvvm和mvc区别是什么?

MVC: 也是一种设计模式, 组织代码的结构, 是model数据模型, view视图, Controller控制器, 在控制器这层里编写js代码, 来控制数据和视图关联

MVVM: 即Model-View-ViewModel的简写。即模型-视图-视图模型, VM是这个设计模式的核心, 连接v和m的桥梁, 内部会监听DOM事件, 监听数据对象变化来影响对方. 我们称之为数据绑定

4. Vue常用修饰符有哪些?

.prevent: 提交事件不再重载页面;

.stop: 阻止单击事件冒泡;

.once: 只执行一次这个事件

5. Vue2.x兼容IE哪个版本以上

不支持ie8及以下,部分兼容ie9 ,完全兼容10以上, 因为vue的响应式原理是基于es5的Object.defineProperty(),而这个方法不支持ie8及以下。

6. 对Vue渐进式的理解

渐进式代表的含义是:主张最少, 自底向上, 增量开发, 组件集合, 便于复用

7. v-show和v-if的区别

v-show和v-if的区别? 分别说明其使用场景?

v-show 和v-if都是true的时候显示,false的时候隐藏

但是:false的情况下,

v-show是采用的display:none

v-if采用惰性加载

如果需要频繁切换显示隐藏需要使用v-show

8. 说出至少4个Vue指令及作用

v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签

v-show 显示内容

v-if 显示与隐藏

v-else 必须和v-if连用 不能单独使用 否则报错

v-bind 动态绑定 作用: 及时对页面的数据进行更改, 可以简写成:分号

v-on 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面

v-text 解析文本

v-html 解析html标签

9. 为什么避免v-for和v-if在一起使用

Vue 处理指令时,v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.

10. Vue 中怎么自定义过滤器

Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式

全局的用Vue.filter()

局部的用filters属性

11. Vue中:key作用, 为什么不能用索引

:key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化

因为v-for数据项的顺序改变,Vue 也不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素

:key如果是索引, 因为索引是连续的, 如果删除其中某一个, 会导致最后一个被删除

当我们再删除的时候, :key再根据数据来把新旧的dom对比时, 删除:key不存在的对应的标签(添加也是一样的插入到指定位置, 别的都不会动)

12. 数组更新有的时候v-for不渲染

因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()

13. 请说下封装 vue 组件的过程

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

  • 分析需求:确定业务需求,把页面中可以复用的结构,样式以及功能,单独抽离成一个组件,实现复用

  • 具体步骤:Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值,子组件修改好数据后,想把数据传递给父组件。可以采用$emit方法。

14. Vue组件如何进行传值的

父向子 -> props定义变量 -> 父在使用组件用属性给props变量传值

子向父 -> $emit触发父的事件 -> 父在使用组件用@自定义事件名=父的方法 (子把值带出来)

15. Vue 组件 data 为什么必须是函数

每个组件都是 Vue 的实例, 为了独立作用域, 不让变量污染别人的变量

16. 讲一下组件的命名规范

给组件命名有两种方式(在Vue.Component/components时),一种是使用链式命名"my-component",一种是使用大驼峰命名"MyComponent",

因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符),避免和当前以及未来的 HTML 元素相冲突

17、Vue 的 nextTick 的原理是什么? (高薪常问)

\1. 为什么需要 nextTick ,Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM,但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理,这时候就可以使用 Vue.nextTick(callback)这个 api 了。

\2. 理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;

\3. 理解 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码,会发现其中做了很多 isNative()的判断,因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑,对性能的良苦用心。

18、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**

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

7**)activated**

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

8**)deactivated**

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

9**)beforeDestroy**

实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

10**)destroyed**

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

11**)errorCaptured(2.5.0+ 新增)**

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

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

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

20. vue中solt的使用方式,以及solt作用域插槽的用法

使用方式:当组件当做标签进行使用的时候,用slot可以用来接受组件标签包裹的内容,当给solt标签添加name属性的 时候,可以调换响应的位置 (高级用法) 插槽作用域: 当传递的不是单一的标签, 例如需要循环时, 把要循环的标签传入, 组件内使用v-for在slot标签上, 内部可以v-bind:把值传出来, 再外面把值赋予进去, 看示例

<current-user>
 ?<template v-slot:default="slotProps">
 ?  {{ slotProps.user.firstName }}
 ?</template>
</current-user>
?
// current-user组件, user属性和值, 绑定给slotProps上
<span>
 ?<slot v-bind:user="user">
 ?  {{ user.lastName }}
 ?</slot>
</span>

扩展阅读: 插槽 — Vue.js (了解即可, 一般用不上)

21. 跟keep-alive有关的生命周期是哪些?(必会)

1**)前言:**在开发Vue项目的时候,大部分组件是没必要多次渲染的,所以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染,在开发Vue项目的时候,大部分组件是没必要多次渲染的,所以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染

2**)生命周期函数:**在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deactivated。

1**、activated钩子:**在在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用。

2**、Activated钩子调用时机:** 第一次进入缓存路由/组件,在mounted后面,beforeRouteEnter守卫传给 next 的回调函数之前调用,并且给因为组件被缓存了,再次进入缓存路由、组件时,不会触发这些钩子函数,beforeCreate created beforeMount mounted 都不会触发

1**、deactivated钩子:**组件被停用(离开路由)时调用。

2**、deactivated钩子调用时机**:使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了,这个钩子可以看作beforeDestroy的替代,如果你缓存了组件,要在组件销毁的的时候做一些事情,可以放在这个钩子里,组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)

22. 自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?(必会)

全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives

钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)

钩子函数参数:el、binding

23. is这个特性你有用过吗?主要用在哪些方面?(高薪常问)

? 1**)动态组件**

<component :is="componentName"></component>, componentName可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制componentName改变时就可以动态切换选择组件。

? 2**)is的用法**

有些HTML元素,诸如 <ul>、<ol>、<table>和<select>,对于哪些元素可以出现在其内部是有严格限制的。

而有些HTML元素,诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部。

<ul>

<card-list></card-list>

</ul>

所以上面<card-list></card-list>会被作为无效的内容提升到外部,并导致最终渲染结果出错。应该这么写:

<ul>

<li is="cardList"></li>

</ul>

24. 路由之间是怎么跳转的?有哪些方式

1、<router-link to="需要跳转到页面的路径">

2、this.$router.push()跳转到指定的url,并在history中添加记录,点击回退返回到上一个页面

3、this.$router.replace()跳转到指定的url,但是history中不会添加记录,点击回退到上上个页面

4、this.$touter.go(n)向前或者后跳转n个页面,n可以是正数也可以是负数

25. vue-router怎么配置路由

在vue中配置路由分为5个步骤,分别是:

  1. 引入vue-router.js

  2. 配置路由path和组件, 和生成路由对象

  3. 把路由对象配置到new Vue中router选项下

  4. 页面使用<router-view></router-view> 承载路由

  5. <router-link to="要跳转的路径"></router-link> 设置路由导航(声明式导航方式/编程式跳转)

26. vue-router的钩子函数都有哪些

关于vue-router中的钩子函数主要分为3类

全局钩子函数要包含beforeEach

beforeEach函数有三个参数,分别是:

to:router即将进入的路由对象 ? from:当前导航即将离开的路由 ? next:function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的)否则为false,终止导航。

单独路由独享组件

beforeEnter,

组件内钩子

beforeRouterEnter, beforeRouterUpdate, beforeRouterLeave

27. 路由传值的方式有哪几种

Vue-router传参可以分为两大类,分别是编程式的导航 router.push和声明式的导航

router.push

字符串:直接传递路由地址,但是不能传递参数

this.$router.push("home")

对象:

命名路由 这种方式传递参数,目标页面刷新会报错 - name+params

this.$router.push({name:"news",params:{userId:123})

查询参数 和path配对的是query

this.$router.push({path:"/news',query:{uersId:123})

接收参数 this.$route.query

声明式导航

字符串 <router-link to:"news"></router-link>

命名路由 <router-link :to:"{name:'news',params:{userid:1111}}"></route-link>

还可以to="/path/值" - 需要提前在路由 规则里值 /path/:key

查询参数 <router-link :to="{path:'/news',query:{userId:1111}}"></router-link>

还可以to="/path?key=value

28. 怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

动态路由指的就是path路径上传智, 前提需要路由规则了提前配置/path/:key名, 可以写多个用/隔开, 获取使用$route.params.key名来提取对应用路径传过来的值

29. Vue的路由实现模式:hash模式和history模式(必会)

hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用 window.location.hash 读取。特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。

history模式:history采用HTML5的新特性;且提供了两个新方法: pushState(), replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更

30. 请说出路由配置项常用的属性及作用(必会)

路由配置参数:

path : 跳转路径 ? component : 路径相对于的组件 ? name:命名路由 ? children:子路由的配置参数(路由嵌套) ? props:路由解耦 ? redirect : 重定向路由

31. 编程式导航使用的方法以及常用的方法(必会)

路由跳转 : this.router.push() 路由替换 : this.router.replace() ? 后退: this.router.back() 前进 :this.router.forward()

32. Vue如何去除URL中的#(必会)

vue-router 默认使用 hash 模式,所以在路由加载的时候,项目中的 URL 会自带 “#”。如果不想使用 “#”, 可以使用 vue-router 的另一种模式 history:new Router ({ mode : 'history', routes: [ ]})

需要注意的是,当我们启用 history 模式的时候,由于我们的项目是一个单页面应用,所以在路由跳转的时候,就会出现访问不到静态资源而出现 “404” 的情况,这时候就需要服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 “index.html” 页面。

33. 说一下你在vue中踩过的坑(必会)

1、第一个是给对象添加属性的时候,直接通过给data里面的对象添加属性然后赋值,新添加的属性不是响应式的

【解决办法】通过Vue.set(对象,属性,值)这种方式就可以达到,对象新添加的属性是响应式的

2、 在created操作dom的时候,是报错的,获取不到dom,这个时候实例vue实例没有挂载

【解决办法】通过:Vue.nextTick(回调函数进行获取)

34. route和router的区别?

route是路由信息对象,包括‘path,hash,query,fullPath,matched,name’等路由信息参数; router是路由实例对象,包括了路由的跳转方法,实例对象等

文章来源:https://blog.csdn.net/lin85253788/article/details/135256711
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。