vue.js初级面试题(必备)

根据自己的亲身经验总结出了10道与vue相关的面试题,不是最全的,但一定是最常见的 。(GitHub地址: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



转载于:https://juejin.im/post/5b8c92f56fb9a019b7120bfe

你可能感兴趣的:(vue.js初级面试题(必备))