vue面试题

曾经终败给现在 2022-05-10 01:03 158阅读 0赞

### vue.js是什么？ ###

是一套构建用户界面的 渐进式框架

### vuex是什么？ ###

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

### 请谈谈Vue中的MVVM模式 ###

MVVM全称是Model-View-ViewModel

Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，DOMListeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；DataBindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。 ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上, 这个HTML元素可以是body，也可以是某个id所指代的元素。

mvvm和mvc区别？

> mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到View 。

vue的优点是什么？

> 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。  
> 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。  
> 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。  
> 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

### <keep-alive</keep-alive的作用是什么? ###

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'> <component>  </component> </keep-alive>

参数解释  
include - 字符串或正则表达式，只有名称匹配的组件会被缓存  
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存  
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。  
使用示例

<keep-alive include="a,b"> <component></component> </keep-alive>  <keep-alive :include="/a|b/"> <component></component> </keep-alive>  <keep-alive :include="['a', 'b']"> <component></component> </keep-alive>

大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive</keep-alive进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

### vue生命周期的理解？ ###

![在这里插入图片描述][70]  
总共分为8个阶段：

> beforeCreate----创建前 组件实例更被创建，组件属性计算之前，数据对象data都为undefined，未初始化。  
> created----创建后 组件实例创建完成，属性已经绑定，数据对象data已存在，但dom未生成，$ el未存在  
> beforeMount—挂载前 vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，data.message未替换  
> mounted-----挂载后 vue实例挂载完成，data.message成功渲染。  
> beforeUpdate----更新前 当data变化时，会触发beforeUpdate方法  
> updated----更新后 当data变化时，会触发updated方法  
> beforeDestory—销毁前 组件销毁之前调用  
> destoryed—销毁后 组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已解除dom监听和数据绑定，但dom结构依然存在

七.组件的使用和自己创建公用组件？  
第一步：在components目录新建你的组件文件（indexPage.vue），script一定要export default \{\}  
第二步：在需要用的页面（组件）中导入：  
import indexPage from ‘@/components/indexPage.vue’  
第三步：注入到vue的子组件的components属性上面,components:\{indexPage\}  
第四步：在template视图view中使用，  
问题有indexPage命名，使用的时候则index-page。

### 在Vue中使用插件的步骤 ###

1.导入：采用ES6的import … from …语法或CommonJS的require()方法引入插件  
2.使用：使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, \{ someOption: true \})

### 请列举出3个Vue中常用的生命周期钩子函数? ###

created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $ el属性目前还不可见  
mounted: el被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。  
activated: keep-alive组件激活时调用

### vue如何实现按需加载配合webpack设置? ###

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。  
不进行页面按需加载引入方式：  
import home from ‘…/…/common/home.vue’  
进行页面按需加载的引入方式：  
const home = r => require.ensure( \[\], () => r (require(’…/…/common/home.vue’)))

十一、vuex是什么？怎么使用？哪种功能场景使用它？  
vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车  
![在这里插入图片描述][70 1]  
上图可以很好的说明Vuex的组成,一个实例化的Vuex.Store由state, mutations和actions三个属性组成:  
state中保存着共有数据  
改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的  
如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改.

### vue生命周期的作用是什么？ ###

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

### 简单描述每个周期具体适合哪些场景？ ###

生命周期钩子的一些使用方法：  
beforecreate : 可以在这加个loading事件，在加载实例时触发  
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用  
mounted : 挂载元素，获取到DOM节点  
updated : 如果对数据统一处理，在这里写上相应函数  
beforeDestroy : 可以做一个确认停止事件的确认框  
nextTick : 更新数据后立即操作dom  
arguments是一个伪数组，没有遍历接口，不能遍历

### 第一次页面加载会触发哪几个钩子？ ###

会触发beforeCreate, created, beforeMount, mounted 。

### Vue实现数据双向绑定的原理Object.defineProperty() ###

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过\*\*Object.defineProperty（）\*\*来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 \{ \{msg\}\}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

## Vue组件间的参数传递 ##

1.父组件与子组件传值  
父组件传给子组件：子组件通过props方法接受数据;  
子组件传给父组件：$emit方法传递参数  
2.非父子组件间的数据传递，兄弟组件传值  
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

### Vue的路由实现：hash模式和history模式 ###

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

history模式  
history采用HTML5的新特性；如果你使用history的话，改变路由的时候，后台会给你响应；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState监听浏览器历史记录变化，但是pushState(),replaceState()不会触发该函数。

### Vue与Angular以及React的区别？ ###

1.与AngularJS的区别  
相同点：  
都支持指令：内置指令和自定义指令。  
都支持过滤器：内置过滤器和自定义过滤器。  
都支持双向数据绑定。  
都不支持低端浏览器。  
不同点：  
1.AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。  
2.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。  
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。 对于庞大的应用来说，这个优化差异还是比较明显的。

2.与React的区别  
相同点：  
1.React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。  
2.中心思想相同：一切都是组件，组件实例之间可以嵌套。  
3.都提供合理的钩子函数，可以让开发者定制化地去处理需求。  
4.都不内置AJAX，Route等功能到核心包，而是以插件的方式加载。 5.在组件开发中都支持mixins的特性。  
不同点：  
React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。  
Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。

二十一、vue路由的钩子函数  
第一种：全局导航钩子  
router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。  
第二种：组件内的钩子；  
beforeRouteEnter  
beforeRouteUpdate (2.2 新增)  
beforeRouteLeave  
第三种：单独路由独享组件。  
beforeEnter

> 每个钩子方法接收三个参数：  
> to: Route: 即将要进入的目标 路由对象  
> from: Route: 当前导航正要离开的路由  
> next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

### route和router的区别 ###

route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

二十三、vue.js的两个核心是什么？  
数据驱动  
组件系统

二十五、 vue常用的修饰符？  
.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

二十六、v-on可以绑定多个方法吗？  
可以

### vue中key值的作用？== ###

避免dom节点复用，让每一次数据改变都重新渲染dom节点  
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

### 什么是vue的计算属性？ ###

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

### vue等单页面应用（spa）及其优缺点 ###

优点： Vue的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好；即第一次就将所有的东西都加载完成，因此，不会导致页面卡顿。  
缺点： 不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

三十、vue-cli如何新增自定义指令？  
1.创建局部指令

2.全局指令

Vue.directive('dir2', { inserted(el) { console.log(el); } })

3.指令的使用

三十一、vue如何自定义一个过滤器？  
html代码：

<div id="app"> <input type="text" v-model="msg" /> { { msg| capitalize }} </div>

JS代码：

var vm=new Vue({ el:"#app", data:{ msg:'' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })

全局定义过滤器

Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })

过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数。

三十二、active-class是哪个组件的属性？嵌套路由怎么定义？  
答： vue-router模块的router-link组件的属性。  
**嵌套路由：**  
嵌套路由顾名思义就是路由的多层嵌套。  
重构router/index.js的路由配置，需要使用children数组来定义子路由 ，路由定义：

{ path: '/me', name: 'Me', component: Me, children: [ { path: 'collection', name: 'Collection', component: Collection }, { path: 'trace', name: 'Trace', component: Trace } ] }

以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;  
在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。  
在外层路由组件中，如下写法。

三十三、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？  
答：在router目录下的index.js文件中，对path属性加上/:id。 [使用router对象的params.id][router_params.id]

三十四、axios是什么？怎么使用？描述使用它实现登录功能的流程？  
答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

三十五、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？  
答：跨域，添加用户操作，更新操作。

三十六、什么是RESTful API？怎么使用?  
答：是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete

三十七、请说下封装 vue 组件的过程？

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

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

三十八、vue-loader是什么？使用它的用途有哪些？

答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。  
用途：js可以写es6、style样式可以scss或less、template可以加jade等

三十九、请说出vue.cli项目中src目录每个文件夹和文件的用法？  
答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

### 聊聊你对Vue.js的template编译的理解？== ###

答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）

详情步骤：  
首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

### vue-router实现原理？ ###

vue-router是通过 Vue.use的方法被注入进 Vue 实例中，在使用的时候我们需要全局用到 vue-router的router-view和router-link组件，以及this.router/router/route这样的实例对象。  
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式:  
1.在地址中加入\#以欺骗浏览器，地址的改变是由于正在进行页内导航  
2.使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。

### watch和computed区别 ###

区别一：  
watch 可以允许你没有返回值，对数据做一些处理，  
但是computed必须要有返回值，他才能根据返回值，知道你函数依赖的是谁，当哪个数据改变的时候，触发该方法。  
区别二：  
computed可以函数依赖很多值，但是watch只能依赖一个值。  
四十四、vuex有哪几种属性？  
答：有五种，分别是 State、 Getter、Mutation 、Action、 Module  
四十五、vuex的State特性是？  
答：一、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data  
二、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新  
三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中  
四十六、vuex的Getter特性是？  
答：一、getters 可以对State进行计算操作，它就是Store的计算属性  
二、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用  
三、 如果一个状态只在一个组件内使用，是可以不用getters  
四十七、vuex的Mutation特性是？  
答：一、Action 类似于 mutation，不同在于：  
二、Action 提交的是 mutation，而不是直接变更状态。  
三、Action 可以包含任意异步操作  
四十八、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？  
答：一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。  
二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。  
四十九、不用Vuex会带来什么问题？  
答：一、可维护性会下降，你要想修改数据，你得维护三个地方  
二、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的  
三、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。  
但兄弟组件有大量通信的，建议一定要用，不管大项目和小项目，因为这样会省很多事  
五十、mint-ui或其他前端组件库在vue中怎么使用  
基于vue的前端组件库通过npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import \{Toast\} from ‘mint-ui’。  
五十一、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？  
全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives  
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）  
钩子函数参数：el、binding

### pwa是什么？ ###

渐进式网页应用，PWA 应该具有一下特性：

> 1.  渐进式：能确保每个用户都能打开网页响应式：PC，手机，平板，不管哪种格式，网页格式都能完美适配  
>     2.离线应用：支持用户在没网的条件下也能打开网页，这里就需要 Service Worker 的帮助  
>     3.APP 化：能够像 APP 一样和用户进行交互  
>     4.常更新：一旦 Web 网页有什么改动，都能立即在用户端体现出来  
>     5.安全：安全第一，给自己的网站加上一把绿锁–HTTPS  
>     6.可搜索：能够被引擎搜索到  
>     7.推送：做到在不打开网页的前提下，推送新的消息  
>     8.可安装：能够将 Web 想 APP 一样添加到桌面  
>     9.可跳转：只要通过一个连接就可以跳转到你的 Web 页面

### vuejs 是什么? ###

### 单页面应用，怎么监听到url后面的路由发生了变化？ ###

window.onhashchange方法.

### v-show和v-if指令的共同点和不同点? ###

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏  
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

## 如何让CSS只在当前组件中起作用? ##

将当前组件的<style修改为<style scoped

[70]: /images/20220510/63141eba9a7d4326867d6b14cb6b27a5.png
[70 1]: /images/20220510/b8a3b348bdda4e5cae9ffbdac6cfc262.png
[router_params.id]: http://xn--routerparams-ov8ss11l264ektes46i.id