vue相关的一些面试题

Posted 2022-11-28 Lumbago～

文章目录

• • 一、什么是MVVM和MVC？
  • 二、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适用？
  • 三、vue的优点是什么？
  • 四、组件之间的传值？
  • 五、路由之间跳转
  • 六、vue.cli中怎样使用自定义组件？遇到过哪些问题？
  • 七、vue如何实现按需加载配合webpack设置
• 八、vuex面试相关
• • 九、axios的封装
  • 十、 如何让CSS只在当前组件中起作用
  • 十一、Vue中keep-alive的作用是什么?
  • 十二、Vue的双向数据绑定原理
  • 十三、Vue生命周期的执行过程
  • 十四、vue组件中data必须是一个函数
  • 十五、Vue 中 v-if 和 v-show 有什么区别？
  • 十六、Vue 中method， computed 和 watch 有什么区别？
  • 十七、$nextTick 是什么
  • 十八、v-for 中 key 的作用是什么？
  • 十九、vue数据更新页面不渲染解决方案
  • 二十、vue-router钩子函数和执行顺序
  • 二十一、v-if和v-for的优先级

---

一、什么是MVVM和MVC？

MVVM
概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
以vue为例：
view 对应 template，vm 对应 new Vue(…)，model 对应 data
1 . view 视图层

<p>Hello,  name !</p>          --View层 --VUE中的单向绑定
<input v-model="name">             --View层 --VUE中的双向绑定

2 . model数据层

data: 
            name: ''               --Model层
        

3 .VM层

 //VUE框架已封装好
new Vue(…)

MVC
1 . 即Model、View、Controller即数据模型、视图、控制器。
View：视图层；
Model：业务数据层；
Controller： 控制器。接收View层传递过来的指令，选取Model层对应的数据，进行相应操作。

2.举一个现实中的类似的例子，MVC如同一家商铺的运作模式，View层相当于是这家商铺的店面，Model层相当于这家商铺的仓库，Controller层相当于是这家商铺的执行部门。

特点：MVC有如下两种模式，不管哪种模式，MVC的通信都是单向的，由图也可以看出，View层会从Model层拿数据，因此MVC中的View层和Model层还是存在耦合的。

二、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适用？

mvc和mvvm其实区别并不大，都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多、频繁的场景，更加便捷。

三、vue的优点是什么？

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性。可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

四、组件之间的传值？

组件之间的传值

五、路由之间跳转

声明式（标签跳转）

编程式（ js跳转）

六、vue.cli中怎样使用自定义组件？遇到过哪些问题？

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

七、vue如何实现按需加载配合webpack设置

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。

页面不按需加载引入方式：import home from ‘…/…/common/home.vue’

const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

八、vuex面试相关

（1）vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store注入。新建一个目录store 。场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

（2）vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

（3） vuex的State特性

Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。

state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。

通过mapState把全局 state 和 getters 映射到当前组件的 computed 计算属性中。

（4）vuex的Getter特性

getters 可以对State进行计算操作，它就是Store的计算属性。

虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。

如果一个状态只在一个组件内使用，可以不用getters。

（5）vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

（6）不用Vuex会带来什么问题？

可维护性会下降，想修改数据要维护三个地方；

可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背。

九、axios的封装

下载 npm install axios --save
在main.js中引入
import axios from “axios”
Vuex.prototype.$http = axios

拦截器配置的话要将
main.js中引入的 import axios from “axios”
改成import axios from “@/request.js”
在request.js中

拦截器的一些配置

import axios from 'axios'
import store from "../store/index"
import router from '../router';
const Server = axios.create(
    // baseURL: "接口路径",
    timeout: 5000,
);
Server.interceptors.request.use(function(config) 
    // console.log(config)
    // Nprogress.start()
    if (store.state.token.length > 0) 
        config.headers['Authorization'] = store.state.token;
    
    return config
, function(error) 
    return Promise.reject(error);
)
Server.interceptors.response.use(function(response) 
    // Nprogress.start().done()
    return response.data
, function(error) 
    // console.log(error)
    router.push('error');
    return Promise.reject(error);
    // return error
)

export default Server

十、 如何让CSS只在当前组件中起作用

将当前组件的

十一、Vue中keep-alive的作用是什么?

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

十二、Vue的双向数据绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

具体步骤：

第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步： Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步： MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

十三、Vue生命周期的执行过程

总共分为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结构依然存在。destroyed阶段，组件销毁

配合图片更理解

十四、vue组件中data必须是一个函数

如果 data 是一个对象，当复用组件时，因为 data 都会指向同一个引用类型地址，其中一个组件的 data 一旦发生修改，则其他重用的组件中的 data 也会被一并修改。
如果 data 是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题。

十五、Vue 中 v-if 和 v-show 有什么区别？

v-if 在进行切换时，会直接对标签进行创建或销毁，不显示的标签不会加载在 DOM 树中。v-show 在进行切换时，会对标签的 display 属性进行切换，通过 display 不显示来隐藏元素。
一般来说，v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。（DOM元素是还存在的）

十六、Vue 中method， computed 和 watch 有什么区别？

method
调用方法时method中调用
不具有缓存
只用调用，就会执行

计算属性 computed：
具有缓存性，只有依赖数据发生变化时，才会重新进行计算函数；
计算属性内不支持异步操作；
计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；
计算属性是自动监听依赖值的变化，从而动态返回内容。

侦听属性 watch：
不支持缓存，只要数据发生变化，就会执行侦听函数；
可以利用他的特性做一些异步的操作

侦听属性内支持异步操作；
侦听属性的值可以是一个对象，接收 handler 回调，deep，immediate 三个属性；
监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。

十七、$nextTick 是什么

Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。

我们可以理解成，Vue 在更新 DOM
时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新

十八、v-for 中 key 的作用是什么？

1.key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

2.key 是 Vue 使用 v-for 渲染列表时的节点标识。使用了 key 之后，当列表项发生变化时，Vue 会基于 key 的变化而重新排列元素顺序，并且移除 key 不存在的元素，提升运行效率。

十九、vue数据更新页面不渲染解决方案

解决方案
Vue 不允许在已经创建的实例上动态添加新的响应式属性

若想实现数据与视图同步更新，可采取下面三种解决方案：
Vue.set()
Object.assign()
$forcecUpdated()

Vue.set()
Vue.set( target, propertyName/index, value )

参数：
target：要修改的对象或数组
propertyName/index：属性或下标
value：修改后的value值

this.$set(this.item, "newProperty", "新值");

vue源码：

function set (target: Array<any> | Object, key: any, val: any): any 
  ...
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val

这里无非再次调用defineReactive方法，实现新增属性的响应式
关于defineReactive方法，内部还是通过Object.defineProperty实现属性拦截
大致代码如下：

function defineReactive(obj, key, val) 
    Object.defineProperty(obj, key, 
        get() 
            console.log(`get $key:$val`);
            return val
        ,
        set(newVal) 
            if (newVal !== val) 
                console.log(`set $key:$newVal`);
                val = newVal
            
        
    )

Object.assign()
直接使用Object.assign()添加到对象的新属性不会触发更新
应创建一个新的对象，合并原对象和混入对象的属性

this.item = Object.assign(,this.item,newProperty:'新值')

this.$forceUpdate();

在进行页面强制渲染，如果遇到特殊情况 可以配合this.$nextTick 使用强制渲染

this.$nextTick(function()
					this.$forceUpdate();
				)

如果 在碰到更特殊的情况 ，比如在模板中的数据即使在本页强制渲染了，也无法生效，那就直接在模板页面的 触发函数里面调用

这个函数 就是在模板内部 触发父页面的 函数，触发后父页数据修改成功，但是模板页面 不会重新渲染，直接加上 这段代码 就可以实现强制渲染数据

二十、vue-router钩子函数和执行顺序

全局前置守卫
你可以使用 router.beforeEach 注册一个全局前置守卫;
全局解析守卫
在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
全局后置钩子
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
路由独享的守卫
你可以在路由配置上直接定义 beforeEnter 守卫
组件内的守卫
最后，你可以在路由组件内直接定义以下路由导航守卫：
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
完整的导航解析流程
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

二十一、v-if和v-for的优先级

在vue中，如果v-for和v-if出现在同一个标签中， v-for的优先级会比v-if更高。

例如：

这意味着 v-if 将分别重复运行于每个 v-for循环中。

<ul>
	<li v-for="(item,index) in list" :key="index" v-if="isShow"> item.title </li>		
</ul>

而写在父级标签上这种更优化些

<ul v-if="isShow">
	<li v-for="(item,index) in list" :key="index"> item.title </li>		
</ul>

当你想为数组中的一些符合条件项渲染节点时，这种优先级的机制会十分有用，如下：

<ul>
	<li v-for="(item,index) in list" :key="index" v-if="item.isShow"> item.title </li>		
</ul>