vue常见面试题总结大全(上）
vue.js
vue.js的两个核心：数据驱动、组件系统
1.什么是MVVM？
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型， 也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模 型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互， Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中， 而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑， 不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
2. mvvm和mvc区别
都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。 mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢， 影响用户体验。vue数据驱动，通过数据来显示视图层而不是节点操作。
3. vue的优点是什么？
低耦合，可重用性，独立开发，渐进式，也称块间联系。指软件系统结构中各模块间相互联系紧密程度的一种度量。模块之间联系越紧密，其耦合性就越强，模块的独立性则越差。就是写一个组件在任何复杂的项目任何复杂的场景下都可以即拿即用这就是低耦合视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上， 当View变化的时候Model可以不变，当Model变化的时候View也可以不变
你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
渐进式框架没有什么限制，可以在此框架上引用其他框架，不像angular1一样 想使用框架就得使用它的一套流程限制。
vuejs吸收了react和angular的优点，强调了react组件化的概念，吸收angular灵活的指令和页面操作的方法。
（1）只需关注model层的数据处理，无需处理复杂的view层更新，vue会在model改变时自动对view层进行更新；
（2）vue提供一系列的小工具帮助开发者处理数据绑定中得问题，比如computed可以提供计算的扩展，还有过滤器、排序等支持；
（3）代码简洁，分层清晰。html里进行数据绑定，js里只需处理数据以及后台交互；
（4）提供自定义组件功能，进一步规范前端架构。
4.vue指令有哪些，分别作用是什么？
v-html 绑定DOM元素并解析
v-text 绑定元素解析为文本
v-on:事件名=’方法名’ 绑定事件 等价于简写方式@click=’方法名’
v-show=’布尔值’ 控制节点的显示隐藏
v-if=’布尔值’ 控制节点的显示隐藏
v-model=’渲染的数据’ 数据的双向绑定，和表单元素配置使用
v-for DOM遍历 for = ‘item of arr’
v-once 让DOM中的数据只渲染一次，不能再改动
v-bind 绑定DOM属性 :简写方式
v-cloak 当数据真正渲染到DOM上之后才进行显示
v-pre 让DOM中的数据不进行解析
for循环写法繁杂 for..in遍历对象使用，不适合遍历数组forEach 不能和continue break return配合使用 for..of修正以上缺点
5.methods和computed的作用
methods方法调用时计算逻辑的过程，相当于js function结算逻辑的过程,computed直接拿到的结果，是一个值，相当于js函数中的return返回值
6.methods,computed和watch的区别
methods调用一次计算一次，使用计算好的返回值时没有computed性能高。computed计算好的结果会进行缓存，如果没有变动，重复使用时，直接取到缓存的结果拿来使用，不会再进行计算。监听属性配合表单使用，当表单中绑定的属性变化时，会触发监听属性下对应的方法进行操作，当使用固定返回值要使用computed代替watch和methods
深度监听：
arr:[{name:'李白'}] 对象类型的数据去触发watch下的方法，要在watch对应的对象下使用语句柄handler,使用deep:true开启深度监听。每当改变数据时，会把整个对象遍历一遍，查找变动的数据，然后去触发该对象对应的方法，传过来参数不是改动某一个值，而是把变动后的整个对象传过来，比较消耗性能，慎用。
7.V-if和v-show区别
v-if是把节点摧毁重建,初始化渲染较小，切换开销大，适合切换比较少的内容去使用
v-show是切换css样式,初始化渲染开销大，切换开销小,适合频繁切换的内容
8.v-for中的key
v-for的key值需要使用v-bind去绑定唯一的key，当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果需要dom记录自己的什么，当进行值变动时把DOM节点摧毁重建需要给他加上唯一的key值。建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
9.v-for和v-if
当v-for和v-if在同一层级时，v-for优先级始终大于v-if，先进行遍历，再进行判断，遍历完之后进行的判断不符合条件再进行隐藏，一般情况下不要v-for和v-if在同一行使用，filter
10.事件修饰符有哪些，分别的作用是什么？
stop 阻止冒泡的事件修饰符
prevent 阻止默认行为
once 事件只执行一次
self 只能在元素本身上触发方法
passive 阻止询问默认行为，提高性能
capture 把冒泡事件改成捕获事件
11.生命周期
VUE实例化或者组件创建到消亡的过程， beforeCreate 创建前的状态，初始化事件和生命周期，创建完毕状态Init (初始化) injections (依赖注入) & reactivity (开始响应)，beforeMount 挂载前状态， 是否有元素el，是否有模板，是否渲染到了函数内，是否作为模板进行了outerHTML渲染到了页面，向虚拟DOM上挂在的过程，并且还是把我们的‘#app’生成虚拟DOM，生成完毕后并渲染到view层，mounted 挂载结束状态，渲染到真正的DOM，beforeUpdate可以拿到Vue实例化改变前的状态，Updated拿到变动完成的状态，beforeDestroy消亡前的状态，destroyed实例化或组件被摧毁消亡。
12.生命周期的钩子函数有哪些，分别作用是什么？
答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
——————————————————————————————————————
beforeCreate：Function在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：Function在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：Function在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：Function el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate：Function 数据更新时调用，发生在虚拟DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
updated：Function 由于数据更改导致的虚拟DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy：Function 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
destroyed：Function Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
13.父级向子级中传值的方法怎么实现？子级向父级中传值的方法怎么实现？兄弟传值怎么实现？
父传子props 子传父$emit
先定义传值的桥梁空实例化Vue，在兄弟A定义的方法中使用桥梁
触发$emit(自定义的方法,要传的值)方法,在兄弟B中在mounted钩子函数中使用$on(‘自定义方法’,function(传过来参数))自动去监听兄弟A的自定义方法，回调函数中拿到传递过来的值
14.路由的配置流程：
下载脚手架时，直接下载好路由，在src文件夹下边找到router下的index.js配置路由，创建组件，引入需要配置的组件，在routes数组下配置对象，对象中某一个路径的path对应某一个组件，然后在App.vue下边配置router-link中to跳转的路径。
15.动态配置路由的方法
id,获取动态路由的值$route.params.id，
404在index.js routes下配置对象path对应 *,component创建对应的404组件。
在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id
16.配置子路由的方法
在需要子路由的主页面组件中和配置主路由一下，在路由对象下写入children,是一个数组，在数组中配置方法和主路由一样。
Redirect 进行路由的重定向，在router-link动态传递参数时需要使用v-bind绑定对象的方式，编程式导航也可以进行参数传递，编程式导航有 push replace go
17.路由导航守卫有哪些
（1）全局导航守卫：要写在main.js下，beforeEach 进行全局拦截，afterEach 当组件加载完成后会执行（没有很好的应用场景）
（2）路由独享守卫：要写在router index.js下的某一个路由中，beforeEnter 和全局前置守卫作用相同，但作用的范围不同，只作用于使用的这一个组件
（3）组件内守卫：
beforeRouteEnter 和全局前置守卫用法相同，但是该钩子函数中拿不到组件中的数据，需要在next参数中使用函数方法去获取当前组件的数据
beforeRouteUpdate 路由变更时执行该函数
beforeRouteLeave 当用户要离开时执行该函数，询问用户是否要离开
18.vue全家桶：
脚手架v-cli 路由router http请求模块->axios Vuex状态管理 UI框架
19.axios配置流程
先下载axios,在main.js中引入后把axios挂在到Vue的原型自定义属性下，使用this.axios.get(‘路径’) post(‘路径’,传递到后台的数据),一般情况成功后会返回内容，把请求的内容装在vue组件中的数据中，然后使用v-for进行遍历展示在页面上。
20.Axios请求的别名，除了get和post请求还有请他请求方式吗？
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
语义化的请求
21.vuex的作用是什么？会出现什么BUG？
状态管理,把组件中的公有拆离出来，让每个组件都可以公用这些属性。
vuex与click事件页面刷新就出现bug。
22.Vuex下边有哪几个模块，分别的作用是什么？
State:储存公有数据
Getters:相当于vue下计算属性，也有缓存，处理公有数据的计算
Mutations:相当于vue下methods，进行公有数据的方法操作，但是使用时要使用$store.commit去触发mutations中的方法
Actions:异步操作mutations，需要使用dispatch的方法去分发mutations里边的方法
Modules:可以把store中的各个模块进行拆分
23.ref的作用？
Vue在DOM行间绑定ref属性，可以在js操作中使用this.$refs的方法拿到真实的DOM，进行DOM操作。
24.在方法中怎么在真实DOM渲染之后再去拿到方法中变动之后的值？
this.$nextTick(()=>{拿到渲染之后的值})
25.插槽作用？
在父组件调用子组件时，在子组件调用处中写入内容，然后在子组件中使用v-slot进行分发内容，让分发的内容渲染到子组件的DOM，这就是插槽的作用。
26.具名插槽是什么？
使用插槽时给插槽取上名字，在父组件中使用v-slot指令去查找子组件中slot中name的属性，让DOM插入一一对应。
27.作用域插槽时什么？
在子组件中使用v-bind把数据传递给父组件，父组件中插槽处自定义属性可以拿到子组件传递过来的数据去使用。
