前端必备面试题之vue.js - 好文

根据自己的亲身经验总结出了10道与vue相关的面试题，不是最全的，但一定是最常见的。（GitHub地址：
https://github.com/OmegaMibai <https://github.com/OmegaMibai>）

1. mvvm和其它框架（jquery）的区别是什么？哪些场景适合？

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

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

2. 说出至少4种vue当中的指令和它的用法？

答： v-if：判断是否隐藏；

v-for：数据循环出来；

v-bind:class：绑定一个属性；

v-model：实现双向绑定。

3. vue的优点是什么？

答：低耦合、可重用、性独立开发、可测试。

4. vue的生命周期

答：vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue
的生命周期。（简略描述）

总共分为8个阶段：（详细描述）

beforeCreate----创建前

组件实例更被创建，组件属性计算之前，数据对象data都为undefined，未初始化。

created----创建后

组件实例创建完成，属性已经绑定，数据对象data已存在，但dom未生成，$el未存在

beforeMount---挂载前

vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，data.message未替换

mounted-----挂载后

vue实例挂载完成，data.message成功渲染。

beforeUpdate----更新前

当data变化时，会触发beforeUpdate方法

updated----更新后

当data变化时，会触发updated方法

beforeDestory---销毁前

组件销毁之前调用

destoryed---销毁后

组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已解除事件监听和dom绑定，但dom结构依然存在

5.组件之间的传值通信？

答：父组件向子组件传值：
1）子组件在props中创建一个属性，用来接收父组件传过来的值；
2）在父组件中注册子组件；
3）在子组件标签中添加子组件props中创建的属性；
4）把需要传给子组件的值赋给该属性
子组件向父组件传值：
1）子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
2）将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
3）在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

6.mvvm和mvc区别？

答：mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM
操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到View 。

7.什么是MVVM

答：即：Model View VM

Model 是数据, data;
View 是模板;
VM 是 vm = new Vue();

VM 用了连接数据和视图, 视图的输入框绑定了v-model, 用户输入后会改变data;
Model改变也会同步视图更新相关的依赖,
双向绑定就是vm起了作用。

8.组件之间跳转的方法

答：① 直接修改地址栏中的路由地址

② 通过router-link实现跳转：

<router-link to="/myRegister">注册</router-link>

③ 通过js的编程的方式：

jumpToLogin: function () {

this.$router.push('/myLogin');

}

9.vue中解决跨域问题

答： ① 后台更改header（最常见也是最常用的解决办法）：

header('Access-Control-Allow-Origin:*');//允许所有来源访问

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式　

② 使用JQuery提供的jsonp ：
methods: { getData () { var self = this $.ajax({ url:
'http://f.apiplus.cn/bj11x5.json', type: 'GET', dataType: 'JSONP', success:
function (res) { self.data = res.data.slice(0, 3) self.opencode =
res.data[0].opencode.split(',') } }) } }
③ 使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

10.es6常用语法（五条即可）

答：1. 变量声明const和let；

2. 模板字符串；

3. 箭头函数；

4. import导入模块、export导出模块；

5. promise

热门工具换一换