vue面试题及答案

继续说面试题，这次主要是与vue有关的

vue生命周期

1.beforeCreate
创建前，此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得DOM节点。

2.created
创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。
可访问 data computed watch methods 上的方法和数据。
初始化完成时的事件写在这里，异步请求也适宜在这里调用（请求不宜过多，避免白屏时间太长）。
可以在这里结束loading事件，还做一些初始化，实现函数自执行。
未挂载DOM，若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。

3.beforeMount
挂载前 虽然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。
beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

4.mounted
挂载后，完成创建vm.$el，和双向绑定
完成挂载DOM和渲染，可在mounted钩子函数中对挂载的DOM进行操作。
可在这发起后端请求，拿回数据，配合路由钩子做一些事情。

5.beforeUpdate
数据更新前，数据驱动DOM。
在数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用。
可在更新前访问现有的DOM，如手动移出添加的事件监听器。

6.updated
数据更新后，完成虚拟DOM的重新渲染和打补丁。
组件DOM已完成更新，可执行依赖的DOM操作。
注意：不要在此函数中操作数据（修改属性），会陷入死循环。

7.beforeDestroy 销毁前
可做一些删除提示，如：您确定删除xx吗？

8.destroyed 销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。
这时组件已经没有了，无法操作里面的任何东西了。

MVVM 和MVC
MVC Model-View-Controller
控制器（Controller）- 负责转发请求，对请求进行处理。
视图（View） - 界面设计人员进行图形界面设计。
模型（Model） - 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。
【模型】（Model）指的是后端传递的数据。
【视图】（View）指的是所看到的页面。
【视图模型】（ViewModel）mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
这两个方向都实现的，我们称之为数据的双向绑定。

优点：解决controller过于臃肿、逻辑分离

vue-router
路由模块的本质 就是建立起url和页面之间的映射关系。
由于hash模式（路由默认模式）会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，

**active-class **
active-class属于vue-router的样式方法 当routerlink标签被点击时将会应用这个样式 使用有两种方法routerLink标签内使用

<router-link to='/'active-class="active">首页

首页的active有时会有bug，会一直被应用

为了解决上面的问题，还需加入一个属性exact,类似也有两种方式：

在router-link中写入exact

<router-link to='/'active-class="active"exact>首页

vue常见的指令,v-show和v-if
指令
v-bind 动态地绑定一个或多个特性，或一个组件 prop 到表达式。 缩写为 ：
v-on：用于监听指定元素的DOM事件 缩写为 @
v-model：实现表单输入和应用状态之间的双向绑定。
v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的。
v-html指令：绑定一些包含html代码的数据在视图上
v-once指令：只渲染一次，后面元素中的数据再更新变化，都不会重新渲染

v-show和v-if
相同点：v-show和v-if都能控制元素的显示和隐藏。
不同点：实现本质方法不同
v-show本质就是通过设置css中的display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素
编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
如果要频繁切换某节点时，使用v-show，如果不需要频繁切换某节点时，使用v-if

axios
特点：
1.Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
2.它可以拦截请求和响应
3.它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
4.安全性更高，客户端支持防御 XSRF

方法：

1. axios.get(url[, config]) //get请求用于列表和信息查询
2. axios.delete(url[, config]) //删除
3. axios.post(url[, data[, config]]) //post请求用于信息的添加
4. axios.put(url[, data[, config]]) //更新操作

组件传值
1.父传子：
子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

2.子传父
子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。

转载：https://www.cnblogs.com/daiwenru/p/6694530.html

3.兄弟组件
首先创建一个事件总线；
接着在发送方组件里面使用关键字$emit()定义一个自定义事件，并传入参数
然后接收方组件，只要使用this.bus.$on关键字就能够监听到发送方触发的事件，并在内部通过一个函数接收传入进来的参数，执行相关的动作，

注：this.bus为在main.js里定义好的一个中转站变量，即事件总线

vue的优点
组件化，数据绑定

vue组件样式隔离
在标签里面添加scoped

keep-alive
keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素
被包裹在keep-alive中的组件的状态将会被保留，
例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处

注：部分内容来源于网络，如有侵权，请留言
未完待续...