美文网首页
初级vuejs面试题

初级vuejs面试题

作者: 武汉前端任金杰 | 来源:发表于2019-08-05 11:52 被阅读0次

    根据自己的亲身经验总结出了10道与vue相关的面试题,不是最全的,但一定是最常见的 !!!

    1.  mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?

     答:一个model+view+viewModel框架,数据模型model,viewModel连接两个。 

            区别: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-linkto="/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

    相关文章

      网友评论

          本文标题:初级vuejs面试题

          本文链接:https://www.haomeiwen.com/subject/wenpdctx.html