Vue

Vue面试题（常考点）

一.对于 Vue 是一套 构建用户界面 的 渐进式框架 的理解

对于“渐进式”这三个字的理解：Vue渐进式是先使用Vue的核心库，再根据你需要的功能再去逐渐增加相应的插件

二.vue.js的两个核心

数据驱动、组件系统

数据驱动：ViewModel，保证数据和视图的一致性。

组件系统：应用类UI可以看作全部是由组件树构成的。

三.对于MVVM的理解

MVVM是Model-View-ViewModel的缩写
Model：代表数据模型，数据和业务逻辑都在Model层中定义；
View：代表UI视图，负责数据的展示；
ViewModel：就是与界面(view)对应的Model

四.请问v-if和v-show有什么区别

相同点：
两者都是让元素不可见
不同点：
1.v-if 在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销比v-show大。

2.v-show控制的时元素的display属性，无论初始条件是否成立，都会渲染标签。而v-if是惰性的，只有在条件成立时才渲染为真实的标签，条件为假，不会去渲染标签。

五.Vue实现数据双向绑定的原理

vue数据双向绑定通过‘数据劫持’ + 订阅发布模式实现
简单来说：
v-bind:绑定响应式数据和触发oninput事件并传递数据

六.什么是vue生命周期？有什么作用？

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会，也同时让我们在控制整个Vue实例的过程时更容易形成好的逻辑。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。

七.DOM 渲染在 哪个周期中就已经完成？

mounted

八.什么叫组件？以及应用组件的好处

就是一个文件（其实就是以前的html只不过语法不同了）里面存放html、js、css。组件（Component）是vue最强大的功能之一，它是将一个大型网站划分成一个个更小的可控单元（一个个组件 里面放html、css、js）。

使用组件的好处：减少代码冗余，方便后期维护，因为它提出了一个概念，封装公共代码相互引用

九.Vue组件间的参数传递

1.父组件与子组件传值

父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数

2.非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

十.Vue 组件中 data 为什么必须是函数？

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。
如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

十一.vue等单页面应用及其优缺点

缺点：
不支持低版本的浏览器，最低只支持到IE9；
不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；
第一次加载首页耗时相对长一些；
不可以使用浏览器的导航按钮需要自行实现前进、后退。

优点：
无刷新体验,提升了用户体验；
前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
API 共享，同一套后端程序代码不用修改就可以用于Web界面、手机、平板等多种客户端
用户体验好、快，内容的改变不需要重新加载整个页面。

十二.完整的vue-router导航解析流程

1.导航被触发。
2.在失活的组件里调用离开守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫（2.2+）。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里面调用 beforeRouterEnter。
8.调用全局的 beforeResolve 守卫（2.5+）。
9.导航被确认。
10.调用全局的 afterEach钩子。
11.触发 DOM 更新。
12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

十三.vue-router 有哪几种导航钩子?

三种，
第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子
第三种：单独路由独享组件

十四.说明$route 和 $router 的区别

$router是VueRouter的实例，在script标签中想要导航到不同的URL，使用 $router.push方法。返回上一个历史history用 $router.to(-1)
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

十五.v-router路由的两种模式

hash模式：即地址栏 URL 中的 # 符号；
history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。

十六.vue-router的几种实例方法以及参数传递

name传递
to来传递
采用url传参

十七 .axios的作用

vue中的ajax，用于向后台发起请求
特点：
从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json数据
客户端支持防御XSRF

十八.使用vue如何解决跨域问题

详解: https://www.cnblogs.com/ldlx-mars/p/7816316.htmlt/.

十九 .vuex是什么？怎么使用？哪种功能场景使用它？

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

二十.vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

二十一.Vuex中属性的应用场景详解

vuex的State特性
A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

vuex的Getter特性
A、getters 可以对State进行计算操作，它就是Store的计算属性
B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
C、 如果一个状态只在一个组件内使用，是可以不用getters

vuex的Mutation特性
A、改变store中state状态的唯一方法就是提交mutation，就很类似事件。
B、每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。
C、我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。

vuex的Action特性
A、Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；
B、Action 可以包含任意异步操作，Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
Action 通过 store.dispatch 方法触发：
eg：
store.dispatch(‘increment’)

vuex的module特性
Module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块。
每个模块中拥有自己的state、mutation、action和getter