共计 2769 个字符，预计需要花费 7 分钟才能阅读完成。
1、对 mvvm 模式的理解？
mvvm 是 model view viewModel 的缩写 model 是数据模型 定义数据修改和操作的业务逻辑 view 是 ui 组件 将数据模型转换成 Ui 展现出来 viewModel 监听模型数据的改变 控制视图行为 处理用户交互 通过双向数据绑定将 view 和 model 连接起来 view 和 model 之间的同步是自动的 无需人为干涉 所以开发者只需要关注业务逻辑而不需要操作 dom 更无须关注数据状态的同步问题 复杂的数据状态维护就交给 mvvm 统一管理。
2、vue 生命周期？
vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据，编译模板、挂载 DOM —渲染、更新—渲染、卸载等一系列过程，称为 Vue 的生命周期 分为 8 个阶段 创建前后 载入前后 更新前后 销毁前后。
BeforeCreate 组件实例刚刚被创建，获取不到 props 或者 data 中的数据，这些数据初始化都在 initState 中。
Created 实例已经被创建完成之后调用，可以访问到之前不能访问到的数据，但是组件还没有被挂载。
BeforeMount 挂载开始之前被调用。
Mounted dom 节点被渲染到文档内，一些需要 dom 的操作在此时才能正常进行。
BeforeUpdate 数据更新时调用，发生在虚拟 dom 重新渲染之前 在这个钩子中进一步地更改状态 不会触发附加的重渲染过程
Update 组件 DOM 已经更新，可以执行依赖于 DOM 的操作，但应该避免在此期间更改状态 有可能会导致更新无限循环。
BeforeDestory 实例销毁之前调用，实例仍然可以调用。
Destroyed 实例被销毁后调用 调用后 vue 实例指示的所有东西都会解绑，事件监听器会被移除，所有子实例也会被销毁，该钩子在服务器端渲染期间不被调用。
3、Vue 实现双向数据绑定的原理？
vue 数据双向绑定是通过数据劫持结合发布者 - 订阅者模式的方式来实现的，通过劫持 object.defineProperty()中的 set 和 get 属性。
4、Vue 组件间传递参数？
父组件给子组件：父组件通过子标签绑定的属性，子组件通过 props 接收
子组件给父组件：子组件通过 emit 将值传给父组件，父组件监听子组件触发的事件 兄弟通信：this.parent.children 在 children 中可以通过组件 name 查询到需要的组件实例，然后传值
5、React 和 Vue 的区别？
相同：都支持服务器端渲染，组件化开发通过 props 参数进行父子组件数据的传递，数据驱动视图，
不同：vue 是双向数据绑定，react 数据流动是单向的。Vue 渲染过程是跟踪每一个组件的依赖，更改了哪个组件渲染哪个，react 重新渲染全部组件
6、对 keep-alive 的了解？
是 Vue 的内置组件，可以使被包含的组件保留状态，避免重新渲染
拥有两个独有的生命周期钩子函数，activated 和 deactivated
被包裹在 keep-alive 中的组件的状态将会被保留，例如我们将某个列表类组件内容滑动到第 100 条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第 100 条列表处
7.<keep-alive></keep-alive> 的作用是什么?
<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例, 主要用于保留组件状态或避免重新渲染。
大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情 => 返回列表 => 打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用 <keep-alive></keep-alive> 进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染
8、route 和 router 的区别？
route 是路由信息对象，包括 path params query name 等路由信息参数 router 是路由实例对象，包括了路由的跳转方法，钩子函数等
query 和 params 的区别：query 相当于 get 请求，页面跳转的时候可以在地址栏看到请求参数，用 path 来引入；params 相当于 post，地址栏不显示参数 用 name 来引入
路由的钩子函数：beforEach
to: 即将要进入的目标 包括的属性（path params query name meta matched fullPath）
9、vue 常用的修饰符？
.prevent 阻止元素默认跳转 .stop 阻止单击事件冒泡 .capture 捕获 .once 只执行一次
10、怎么定义 vue-router 的动态路由以及如何获取传过来的动态参数？
在 router 目录下的 index.js 文件中，对 path 属性加上 /:id
使用 router 对象的 params.id
11、vue+axios 登录拦截
在定义路由的时候加上 requireAuth，判断该路由的访问是否需要登录 如果已经登录则顺利进入页面。定义完路由后利用 vue-router 提供的钩子函数 beforeEach()对路由进行判断 判断是否需要登录权限，判断是否存在 token
想要统一处理所有 http 请求和响应，用 axios 拦截器 通过配置 http response inteceptor , 当后端返回 401 时，则未授权 让用户重新登录
12、Vuex 是什么？怎么使用？哪种功能场景使用它？
只用来读取的状态集中放在 sotre 中，改变状态的方式是提交 mutations，这是个同步事物；异步逻辑应该封装在 action 中
组件渲染之后，与用户产生交互，触发一些行为 (dispatch —->action)，这些行为会提交一些修改数据的行为(commit —->mutations)，这些行为会主动修改状态(state) 中的数据，状态数据的改变会更新组件
13、vue 路由原理
只有 2 种实现方式 hash 模式和 history 模式
hash 模式：带 #号的，当# 后面的哈希值发生变化时，可以通过 hashchange 事件来监听到 URL 变化，进行页面跳转（简单，兼容性好）
history 模式：h5 新功能，使用 history.pushState 和 history.replaceState 改变 URL
14、computed 和 watch 区别
computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容
Watch 监听到值的变化就会执行回调，在回调中进行一些逻辑操作
一般需要依赖别的属性来动态获得值的时候可以使用 computed
对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch
15、v-if 和 v -show 的区别
v-show 只是通过设置 dom 元素的 display 控制显示隐藏
V-if 是动态的添加或删除 dom 元素
想学前端的小伙伴，可以关注 + 私信回复《资料》免费获取哦~
感谢您的阅读！喜欢的可以收藏转发哦~
