精华内容
参与话题
问答
  • vue面试题

    千次阅读 多人点赞 2019-08-12 17:02:53
    vue面试题 1.Vue和react的相同与不同 相同点: 都支持服务器端渲染 都有virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范 数据驱动视图 都有支持native的方案,react native...

    vue面试题

    1.Vue和react的相同与不同
    相同点:

    • 都支持服务器端渲染
    • 都有virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
    • 数据驱动视图
    • 都有支持native的方案,react native,Vue的weex
    • 都有管理状态,react有redux,vue有自己的VueX

    不同点:

    • react严格上只针对MVC的view层,Vue则是MVVM模式

    • virtual DOM不一样,Vue会跟踪每一个组建的依赖关系,不需要重新渲染整个组件树。而对于react而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldcomponentUpdate这个生命周期函数方法来进行控制

    • 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;

    • .数据绑定: vue实现了数据的双向绑定,react数据流动是单向的

    • .state对象在react应用中不可变的,需要使用setState方法更新状态;
      在vue中,state对象不是必须的,数据由data属性在vue对象中管理;
      2.对于MVVM的理解
      MVVM是Model-view-View Model的缩写
      model代表数据模型,也可以在model中定义数据修改和操作的业务逻辑
      view代表UI组件,它负责数据模型转化成ui展现出来
      ViewModel 监听模型数据的改变和控制视图行为、处理数据交互,简单理解就是一个同步View和Model的对象,连接Model和View
      在MVVM架构下,view和model之间并没有直接的联系,而是通过view Model进行交互,model和view Model之间的交互是双向的,因此view数据的变化会同步到model中,而Model数据的变化也会立即反应到view上
      view Model通过双向数据绑定把view层和model层连接了起来,而view和Model之间的同步工作完全是自动的,无需人为干涉,因此开发者只需要关注业务逻辑,不需要手动操作DOM,不需要关注数据状态的同步问题,复杂的数据状态维护完全由MVVM来统一管理
      3.Vue的生命周期
      beforeCreate(创建前)在数据观测和初始化事件还未开始
      created(创建后)完成数据观测,属性和方法的运算,初始化事件,elbeforeMountrenderdatahtmlhtmlmountedelvm.el属性还没有显示出来 beforeMount(载入前)在挂载开始之前被调用,相关的render汉书首次调用,实例已完成以下的配置:编译模版,把data里面的数据和模版生成html注意此时还没有挂载html到页面上。 mounted(载入后) 在el 被新创建的 vm.el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
      beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
      updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
      beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。
      destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
      a. 什么是生命周期?
      vue实例从创建到销毁的过程,就是生命周期,从开始创建、初始化数据、编译模版、挂在DOm→渲染、更新→渲染、销毁等一系列过程,称之为vue的生命周期
      b. vue生命周期的作用是什么?
      vue的生命周期中有很多个事件钩子,让我们在控制整个vue实例的过程时更容易形成好的逻辑
      c. vue生命周期总共有几个阶段?
      分为8个阶段,创建前/创建后、载入前/载入后、更新前/更新后、销毁前/销毁后
      d. 第一次页面加载会触发哪几个钩子
      会触发beforeCreate、created、beforeMount、mounted
      e、DOM渲染在哪个周期中就已经完成?
      DOM渲染在mounted中就已经完成了
      4.Vue实现数据双向绑定的原理:Object.defineProperty()
      vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过object.defineProperty()来劫持各个属性的setter、getter、在数据变动时发布消息给订阅者,触发相应监听回调,当把一个普通javascript对象传给Vue实例来作为它的data选项时,vue将遍历它的属性,用object.defineProperty将他们转为getter/setter。用户看不到getter/setter,但是在内部它们让vue追踪依赖,在属性被访问和修改时通知变化。
      vue的数据双向绑定将MVVM作为数据绑定的入口,整合observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模版指令(vue中用来解析{{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化—>视图更新;视图交互变化(input)—>数据model变更双向绑定效果
      js实现简单的双向绑定:
      在这里插入图片描述
      5.Vue组件间的参数传递

      • 父组件与子组件传值
        父组件传给子组件:子组件通过props方法接受数据
        子组件传给父组件:$emit方法传递参数
      • 非父子组件间的数据传递,兄弟组件传值
        eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适、

    6. vue的路由vue-router
    vue-router是vue.js官方的路由管理器
    vue-router的使用:
    1.安装并引入vue-router
    安装:npm i vue-router --save-dev
    引入:import VueRouter from ‘vue-router’
    执行vuerouter:Vue.use(VueRouter)
    2.定义路由组件

    const Foo = { template:  '<div>foo</div>' }
    const Bar = { template:  '<div>bar</div>'}
    

    3.定义路由

    const routes = [
       {path: '/foo', component: Foo}
       {path: '/bar', component: Bar}
    ]
    

    4.创建路由实例,然后传routes配置

    const router = new VueRouter({
    	routes //相当于routes:routes
    })
    

    5.创建和挂载根实例

    const app = new Vue({
    	router
    }).$mount('#app')
    

    通过注入路由器,我们可以在任何组件内通过this.router访this.router访问路由器,也可以通过this.route访问当前路由

    7.vue-cli如何新增自定义指令

    ① 创建局部指令:
    var app = new Vue({
    	el: '#app',
    	data: {},
    	//创建指令
    	directives: {
    		// 指令名称
    			dir1: {
    				 inserted(el) {
    					 // 指令中第一个参数是当前使用指令的DOM
    				 	console.log(el)
    				 	//  对DOM进行操作
    				 	el.style.width = '200px'
    				 }
    			}
    	}
    })
    ② 创建全局指令
    Vue.directive('dir2', {
    	inserted(el) {
    		console.log(el)
    	}
    })
    ③  指令的使用
    <div>
    	<div  v-dir1></div>
    	<div  v-dir2></div>
    </div>
    

    8.vue路由的钩子函数
    首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

    beforeEach主要有3个参数to,from,next:

    to:route即将进入的目标路由对象,

    from:route当前导航正要离开的路由

    next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
    9.vue如何定义一个过滤器

    html代码:
    	<div id="app">
    	     <input type="text" v-model="msg" />
    	     {{msg | capitalize }}
    	</div>
    js代码
    	var vm=new Vue({
    	    el:"#app",
    	    data:{
    	        msg:''
    	    },
    	    filters: {
    	      capitalize: function (value) {
    	        if (!value) return ''
    	        value = value.toString()
    	        return value.charAt(0).toUpperCase() + value.slice(1)
    	      }
    	    }
    	})
    全局定义过滤器
    Vue.filter('capitalize', function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })
    

    10、一句话就能回答的面试题

    1.如何让css只在当前组件起作用
    	在style标签中写入scoped即可,例如<style scoped></style>
    2.vi-if 和v-show的区别
    	v-if按照条件是否渲染,v-show是display的block和none
    3.$route和$router的区别
    	$route是路由信息对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。而$router是路由实例,对象包含了路由的跳转方法,钩子函数等
    4.vue.js的两个核心是什么
    	数据驱动和组件系统
    5.什么是vue的计算属性
    	在模板中放入太多的逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采取计算属性的方式。好处:①使得数据处理结构清晰;②依赖于数据,数据更新,处理结果自动更新;③ 计算属性内部的this执行VM实例;④ 在template调用时,直接写计算属性名即可;⑤常用的是getter方法,获取数据,也可以使用set方法改变数据;⑥相较于methods,不管依赖的数据变不变,methods都会重新计算,但是依赖数据不变的时候computed从缓存中获取,不会重新计算
    6. vue等单页面应用及其优缺点
    	优点:vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好
    	缺点:不支持低版本浏览器,最低只支持到IE9;不利于SEO的优化(如果要支持SEO,建议通过服务器来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退
    11、怎么定义vue-router的动态路由,怎么获取传过来的值
    	在router目录下的index.js文件中,对path属性加上/:id,使用router对象的params.id获取
    

    11.VUX
    vueX:专门为vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的方式发生变化
    state
    Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。
    mutations
    mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
    getters
    类似vue的计算属性,主要用来过滤一些数据。
    action
    actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
    在这里插入图片描述

    展开全文
  • Vue面试题

    千次阅读 多人点赞 2019-09-19 23:22:09
    1、什么是MVVM? 答:MVVM是是Model-View-ViewModel的缩写,Model代表数据模型,定义数据操作的业务逻辑,View代表...2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答:在router目录下的index.js文...

    1、什么是MVVM?
    答:MVVM是是Model-View-ViewModel的缩写,Model代表数据模型,定义数据操作的业务逻辑,View代表视图层,负责将数据模型渲染到页面上,ViewModel通过双向绑定把View和Model进行同步交互,不需要手动操作DOM的一种设计思想
    2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
    答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id
    3.vue-router有哪几种导航钩子?
    答:三种,一种是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。第二种:组件内的钩子;第三种:单独路由独享组件
    4、vuex是什么?怎么使用?哪种功能场景使用它?
    答:vue框架中状态管理。在main.js引入store,注入。新建了一个目录store,…… export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车
    5、的作用是什么,如何使用?
    答:包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染;
    使用:简单页面时

    缓存: <keep-alive include=”组件名”></keep-alive>
    不缓存:<keep-alive exclude=”组件名”></keep-alive>
    

    6、v-show和v-if指令的共同点和不同点?
    v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏,
    v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果
    7、$ route和$ router的区别
    答:$ route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法,钩子函数等
    8、vue和react区别
    答:相同点:都鼓励组件化,都有’props’的概念,都有自己的构建工具,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。
    不同点:React:数据流单向,语法—JSX,在React中你需要使用setState()方法去更新状态。Vue:数据双向绑定,语法–HTML,state对象并不是必须的,数据由data属性在Vue对象中进行管理。适用于小型应用,但对于对于大型应用而言不太适合
    9.ajax和axios、fetch的区别?
    1.jQuery ajax

    $.ajax({
       type: 'POST',
       url: url,
       data: data,
       dataType: dataType,
       success: function () {},
       error: function () {}
    });
    

    传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。
    JQuery ajax 是对原生XHR的封装,除此以外还增添了对JSONP的支持,举出几个缺点,那可能只有:
    1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
    2.基于原生的XHR开发,XHR本身的架构不清晰。
    3.JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
    4.不符合关注分离(Separation of Concerns)的原则
    5.配置和调用方式非常混乱,而且基于事件的异步模型不友好
    2.axios

    axios({
        method: 'post',
        url: '/user/12345',
        data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
    

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:
    1.从浏览器中创建 XMLHttpRequest
    2.支持 Promise API
    3.客户端支持防止CSRF
    4.提供了一些并发请求的接口(重要,方便了很多的操作)
    5.从 node.js 创建 http 请求
    6.拦截请求和响应
    7.转换请求和响应数据
    8.取消请求
    9.自动转换JSON数据
    3.fetch

    try {
      let response = await fetch(url);
      let data = response.json();
      console.log(data);
    } catch(e) {
      console.log("Oops, error", e);
    }
    

    fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。
    fetch的优点:
    1.符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
    2.更好更方便的写法
    坦白说,上面的理由对我来说完全没有什么说服力,因为不管是Jquery还是Axios都已经帮我们把xhr封装的足够好,使用起来也足够方便,为什么我们还要花费大力气去学习fetch?
    我认为fetch的优势主要优势就是:

    1. 语法简洁,更加语义化
    2. 基于标准 Promise 实现,支持 async/await
    3. 同构方便,使用 isomorphic-fetch

    4.更加底层,提供的API丰富(request, response)
    5.脱离了XHR,是ES规范里新的实现方式
    最近在使用fetch的时候,也遇到了不少的问题:
    fetch是一个低层次的API,你可以把它考虑成原生的XHR,所以使用起来并不是那么舒服,需要进行封装。
    例如:

    1)fetch只对网络请求报错,对400,500都当做成功的请求,服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。
    2)fetch默认不会带cookie,需要添加配置项: fetch(url, {credentials: ‘include’})
    3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费
    4)fetch没有办法原生监测请求的进度,而XHR可以
    总结:axios既提供了并发的封装,也没有fetch的各种问题,而且体积也较小,当之无愧现在最应该选用的请求的方式。

    展开全文
  • Vue 面试题

    万次阅读 多人点赞 2018-11-30 14:49:12
    12

    Vue面试题

    1、Vue总结:

       vue的使用方式有两种
          方式一:像jQuery一样引入使用--vue的特性都可以使用,双向数据绑定
          方式二:跟node结合起来使用,使用的时候有点像java语言(面向对象)
    

    2、为什么要使用vue(使用Vue的好处是什么)?MVVM的框架那么多?MVVM跟MVC有什么区别?MVVM的框架你知道有哪些?

    在这里插入图片描述

    2.1、Vue好处:
    vue两大特点:响应式编程、组件化 
    vue的优势:轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快
    
    2.2、MVVM定义:

    MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。总结:在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

    2.3、MVC的定义:

    MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早,前端并不那么成熟,很多业务逻辑也是在后端实现,所以前端并没有真正意义上的MVC模式。而我们今天再次提起MVC,是因为大前端的来到,出现了MVVM模式的框架,我们需要了解一下MVVM这种设计模式是如何一步步演变过来的。2. 为什么会有MVVM框架?在过去的10年中,我们已经把很多传统的服务端代码放到了浏览器中,这样就产生了成千上万行的javascript代码,它们连接了各式各样的HTML 和CSS文件,但缺乏正规的组织形式,这也就是为什么越来越多的开发者使用javascript框架。比如:angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大,项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题,出现了很多类库,其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成,所以维护性和扩展性极差。综上两方面原因,才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定,极大了提高了开发效率。3. MVVM框架:VUE的介绍Vue就是基于MVVM模式实现的一套框架,在vue中:Model:指的是js中的数据,如对象,数组等等。View:指的是页面视图viewModel:指的是vue实例化对象为什么说VUE是一个渐进式的javascript框架, 渐进式是什么意思?1.如果你已经有一个现成的服务端应用,你可以将vue 作为该应用的一部分嵌入其中,带来更加丰富的交互体验;2.如果你希望将更多业务逻辑放到前端来实现,那么VUE的核心库及其生态系统也可以满足你的各式需求(core+vuex+vue-route)。和其它前端框架一样,VUE允许你将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。3.如果我们构建一个大型的应用,在这一点上,我们可能需要将东西分割成为各自的组件和文件,vue有一个命令行工具,使快速初始化一个真实的工程变得非常简单(vue init webpack my-project)。我们可以使用VUE的单文件组件,它包含了各自的HTML、JAVASCRIPT以及带作用域的CSS或SCSS。以上这三个例子,是一步步递进的,也就是说对VUE的使用可大可小,它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。VUE最独特的特性:响应式系统VUE是响应式的(reactive),也就是说当我们的数据变更时,VUE会帮你更新所有网页中用到它的地方。

    3、Vue中有哪些钩子函数?作用是什么? Vue的生命周期

    在这里插入图片描述

    1 初始化前  --BeforeCreated
    
    2 初始化完成 ---***:发送ajax   --created    //比较常用
    
    3 双向数据绑定前 ---BeforeMount
    
    4 双向数据绑定完成 --Mounted
    
    5 更新前 --BeforeUpdate
    
    6 更新完成--updated
    
    7 销毁前--BeforeDestroyed
    
    8 销毁完成--Destroyed
    

    4、vue中做数据渲染的时候如何保证将数据原样输出?

     1. v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
     2. v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
     3. {{}}:插值表达式,可以直接获取Vue实例中定义的数据或函数,
     使用插值表达式的时候,值可能闪烁;而使用v-html、v-text不会闪烁,
     有值就显示,没值就隐藏
    

    5、vue中methods和computed有什么区别?应用场景如何?

    1.methods:方法,函数,绑定事件调用;不会使用缓存
    2.computed: 计算属性   本质是方法,使用时可以像属性一样使用,
    当操作的值没有发生改变时,会使用缓存,当值发生改变,才会改变;提高速度
    

    6、Vue中如何处理原生的DOM事件?

    答:6.1  DOM:HTML DOM 定义了访问和操作 HTML 文档的标准 方法。
    
             DOM 将 HTML 文档表达为树结构。我们可以通过DOM灵活的获取树节点,
             并且操作节点(重新设置值、重新设置属性、重新设置样式)
    
        6.2 DOM事件:
           onclick、onmouseover、onmouseout、onchange、onkeyup、onkeydown
    
        6.3 Vue是如何处理的:通过v-on,简写@的方式定义事件
          @click、@mouseover、@mouseout、@change、@keyup、@keydown...
                            并绑定函数
    

    7、什么是js的冒泡?Vue中如何阻止冒泡事件?

    js冒泡概念:当父元素内多级子元素绑定了同一个事件
    ,js会依次从内往外或者从外往内(?)执行每个元素的该事件,从而引发冒泡
        
        js解决冒泡:event.stopPropagation()
        vue解决冒泡: 事件.stop,例如:@click.stop="" ,@mouseover.stop=""
    

    8、什么是js的回调地狱?为什么会引发回调地狱?如何解决回调地狱问题

    js的回调地狱:根据外层ajax请求的结果,将结果作为参数继续发起ajax请求
         --->引起回调地狱
        getA().then(res=>{
            getB(res.data.a).then(res=>{
    	    getC(res.data.b).then(res=>{
                   //....回调地狱
                })	
    	})
        })
        
        Promise 对象就是为了解决这个问题而提出的。
        它不是新的语法功能,而是一种新的写法,允许将回调函数的嵌套,改成链式调用。 
    
      getA().then(res=>{
    		return   getB(res.data.a)
    }).then(res=>{
    	//.....链式调用
    })
    

    9、Vue中父子组件是如何传值的?

     9.1 父向子传值:子组件定义的时候,
    	 通过props:['num']定义父组件传值的参数名,
    	 当父组件调用子组件的时候就通过:num="a"的方式将值传给子组件
    

    在这里插入图片描述

     9.2 子向父传值:无法直接传值,只能通过子类调用父类的方法,使用方法的参数传值
          在子组件的方法中通过$.emit("outshow",num)传值,第一个参数是父组件中的方法名,第二个参数是父组件中该方法的参数
    

    在这里插入图片描述## 10、Vue中双向数据绑定是如何实现的?

    双向数据绑定只存在于form表单元素中
    首先双向数据的绑定需要通过 v-model 来将数据关联起来,
    其次在 data 中一定要定义好通过 v-model 关联的数据,
    Vue 在实现数据监听只能够监听到 data 中的数据,
    如果在 data 中没有定义该数据,那么将无法实现监听 ,
    同时也无法实现表单的双向数据绑定
    

    11.Vue中有哪些事件修饰符?各有什么作用

    vue中的事件:@click、@mouseover、@mouseout、@change、@keyup、@keydown
    
        vue中的事件修饰符:.stop 阻止冒泡   .prevent:阻止默认事件
    
    

    12、vue中有哪些指令?

     答:v-if
        v-else
        v-for
        v-text
        v-html
        v-model
        v-on:简写@
        v-bind:简写:
    

    13、为什么要进行前后端分离?前后端分离的优势在哪里?劣势在哪里?

    答:前端专门负责前端页面和特效的编写
        后端专门负责后端业务逻辑的处理
        前端追求的是页面美观、页面流畅、页面兼容等
        后端追求的是三高(高并发、高可用、高性能)
        让他们各自负责各自的领域,让专业的人负责处理专业的事情
        提高开发效率
    
        缺点:1 当接口发生改变的时候,前后端都需要改变
              2 当发生异常的时候,前后端需要联调--联调是非常浪费时间的
    

    14、说说你对前后端分离的开发模式的理解

    1.前端静态化
    前端有且仅有静态内容,再明确些,只有HTML/CSS/JS. 
    其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装.
    前端内容的运行环境和引擎完全基于浏览器本身.
    
    2.后端数据化
    
    后端可以用任何语言,技术和平台实现,但它们必须遵循一个原则
         :只提供数据,不提供任何和界面表现有关的内容.
    
    3.平台无关化
    
    前端3大技术本身就是平台无关的,而后台连接部分的本质是实现合适的Restful接口和交互Json数据,就这2者而言,
    任何技术和平台都可以实现.
    
    4.构架分离化
    
    后端构架几乎可以基于任何语言和平台的任何解决方案,
    大型构架方面, RestTful Api可以考虑负载均衡;而数据,
    业务实现等可以考虑数据库优化和分布式 
    但总而言之,前后端的分离 也实现了 前后端构架的分离.
    
     
    

    扶贫!! 帮助一下孩子吧。感谢♥:

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue面试题总汇

    千次阅读 多人点赞 2019-02-22 15:26:53
    vue面试题总汇 vue的底层原理? vue组件之间的通信? JS中判断数据类型的方法有几种? 最常见的判断方法:typeof 判断已知对象类型的方法: instanceof 根据对象的constructor判断: constructor 无敌万能的...

    vue面试题总汇

    vue的底层原理?

    vue组件之间的通信?

    JS中判断数据类型的方法有几种?

    最常见的判断方法:typeof

    判断已知对象类型的方法: instanceof

    根据对象的constructor判断: constructor

    无敌万能的方法:jquery.type()

    vue与angular的区别?

    1.vue仅仅是mvvm中的view层,只是一个如jquery般的工具库,而不是框架,而angular而是mvvm框架。
    2.vue的双向邦定是基于ES5 中的 3.getter/setter来实现的,而angular而是由自己实现一套模版编译规则,需要进行所谓的“脏”检查,vue则不需要。因此,vue在性能上更高效,但是代价是对于ie9以下的浏览器无法支持。
    4.vue需要提供一个el对象进行实例化,后续的所有作用范围也是在el对象之下,而angular而是整个html页面。一个页面,可以有多个vue实例,而angular好像不是这么玩的。
    5.vue真的很容易上手,学习成本相对低,不过可以参考的资料不是很丰富,官方文档比较简单,缺少全面的使用案例。高级的用法,需要自己去研究源码,至少目前是这样。

    说说你对angular脏检查理解?

    在angular中你无法判断你的数据是否做了更改,所以它设置了一些条件,当你触发这些条件之后,它就执行一个检测来遍历所有的数据,对比你更改的地方,然后执行变化。
    这个检查很不科学。而且效率不高,有很多多余的地方,所以官方称为 脏检查。

    active-class是哪个组件的属性?

    vue-router模块的router-link组件。

    嵌套路由怎么定义?

    在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。
    index.html,只有一个路由出口

    <div id="app">  
        <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->  
        <router-view></router-view>  
    </div>复制代码

    main.js,路由的重定向,就会在页面一加载的时候,就会将home组件显示出来,因为重定向指向了home组件,redirect的指向与path的必须一致。children里面是子路由,当然子路由里面还可以继续嵌套子路由。

    import Vue from 'vue'  
    import VueRouter from 'vue-router'  
    Vue.use(VueRouter)  
    
    //引入两个组件 
    
    import home from "./home.vue"  
    import game from "./game.vue"  
    //定义路由  
    const routes = [  
        { path: "/", redirect: "/home" },//重定向,指向了home组件  
        {  
            path: "/home", component: home,  
            children: [  
                { path: "/home/game", component: game }  
            ]  
        }  
    ]  
    //创建路由实例  
    const router = new VueRouter({routes})  
    
    new Vue({  
        el: '#app',  
        data: {  
        },  
        methods: {  
        },  
        router  
    })复制代码

    home.vue,点击显示就会将子路由显示在出来,子路由的出口必须在父路由里面,否则子路由无法显示。

    <template>  
        <div>  
            <h3>首页</h3>  
            <router-link to="/home/game">  
                <button>显示<tton>  
            </router-link>  
            <router-view></router-view>  
        </div>  
    </template>复制代码

    game.vue

     <template>  
        <h3>游戏</h3>  
    </template>复制代码

    怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

    在router目录下的index.js文件中,对path属性加上/:id。
    使用router对象的params.id。

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

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

    scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

    css的预编译。

    使用步骤:

    第一步:用npm 下三个loader(sass-loader、css-loader、node-sass)

    第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss

    第三步:还是在同一个文件,配置一个module属性

    第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss”

    有哪几大特性:

    1、可以用变量,例如($变量名称=值);
    2、可以用混合器,例如()
    3、可以嵌套

    mint-ui是什么?怎么使用?说出至少三个组件使用方法?

    基于vue的前端组件库。npm安装,然后import样式和js,vue.use(mintUi)全局引入。在单个组件局部引入:import {Toast} from ‘mint-ui’。
    组件一:Toast(‘登录成功’);
    组件二:mint-header;
    组件三:mint-swiper

    v-model是什么?怎么使用? vue中标签怎么绑定事件?

    可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:<input @click=doLog()/>

    iframe的优缺点?

    iframe也称作嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入在现有的网页中。

    优点:

    1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
    2. Security sandbox
    3. 并行加载脚本
    4. 方便制作导航栏

    缺点:

    1. iframe会阻塞主页面的Onload事件
    2. 即时内容为空,加载也需要时间
    3. 没有语意

    简述一下Sass、Less,且说明区别?

    他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
    变量符不一样,less是@,而Sass是$;
    Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持;
    Sass是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器

    axios是什么?怎么使用?描述使用它实现登录功能的流程?

    请求后台资源的模块。npm install axios -S装好,然后发送的是跨域,需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中

    axios+tp5进阶中,调用axios.post(‘api/user’)是进行的什么操作?axios.put(‘api/user/8′)呢?

    跨域,添加用户操作,更新操作。

    vuex是什么?怎么使用?哪种功能场景使用它?

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

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

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

    区别:vue数据驱动,通过数据来显示视图层而不是节点操作。

    场景:数据操作比较多的场景,更加便捷

    自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?

    全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives

    钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)

    钩子函数参数:el、binding

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

    v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定

    vue-router是什么?它有哪些组件?

    vue用来写路由一个插件。router-link、router-view

    导航钩子有哪些?它们有哪些参数?

    导航钩子有:

    a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

    参数:

    有to(去的那个路由)、from(离开的路由)、next(一定要用这个函数才能去到下一个路由,如果不用就拦截)最常用就这几种

    Vue的双向数据绑定原理是什么?

    vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

    具体步骤:

    第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
    这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化

    第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

    第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
    1、在自身实例化时往属性订阅器(dep)里面添加自己
    2、自身必须有一个update()方法
    3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

    第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

    请详细说下你对vue生命周期的理解?

    总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后

    创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。
    
    载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
    
    更新前/后:当data变化时,会触发beforeUpdate和updated方法。
    
    销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在复制代码

    请说下封装 vue 组件的过程?

    首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。

    然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。

    你是怎么认识vuex的?

    vuex可以理解为一种开发模式或框架。比如PHP有thinkphp,java有spring等。
    通过状态(数据源)集中管理驱动组件的变化(好比spring的IOC容器对bean进行集中管理)。

    应用级的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。

    vue-loader是什么?使用它的用途有哪些?

    解析.vue文件的一个加载器,跟template/js/style转换成js模块。

    用途:js可以写es6、style样式可以scss或less、template可以加jade等

    请说出vue.cli项目中src目录每个文件夹和文件的用法?

    assets文件夹是放静态资源;components是放组件;router是定义路由相关的配置;view视图;app.vue是一个应用主组件;main.js是入口文件

    vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?

    第一步:在components目录新建你的组件文件(smithButton.vue),script一定要export default {

    第二步:在需要用的页面(组件)中导入:import smithButton from ‘../components/smithButton.vue’

    第三步:注入到vue的子组件的components属性上面,components:{smithButton}

    第四步:在template视图view中使用,<smith-button> </smith-button>
    问题有:smithButton命名,使用的时候则smith-button。

    聊聊你对Vue.js的template编译的理解?

    简而言之,就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点)

    详情步骤:

    首先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式),compile是createCompiler的返回值,createCompiler是用以创建编译器的。另外compile还负责合并option。

    然后,AST会经过generate(将AST语法树转化成render funtion字符串的过程)得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名、子节点、文本等等)

    vue的历史记录

    history 记录中向前或者后退多少步

    vuejs与angularjs以及react的区别?

    1.与AngularJS的区别

    相同点:

    都支持指令:内置指令和自定义指令。

    都支持过滤器:内置过滤器和自定义过滤器。

    都支持双向数据绑定。

    都不支持低端浏览器。

    不同点:

    1.AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

    2.在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。

    Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

    对于庞大的应用来说,这个优化差异还是比较明显的。

    2.与React的区别

    相同点:

    React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。

    中心思想相同:一切都是组件,组件实例之间可以嵌套。

    都提供合理的钩子函数,可以让开发者定制化地去处理需求。

    都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

    在组件开发中都支持mixins的特性。

    不同点:

    React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

    Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。

    vue生命周期面试题

    什么是vue生命周期?

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

    vue生命周期的作用是什么?

    它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

    vue生命周期总共有几个阶段?

    它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后

    第一次页面加载会触发哪几个钩子?

    第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

    DOM 渲染在 哪个周期中就已经完成?

    DOM 渲染在 mounted 中就已经完成了

    简单描述每个周期具体适合哪些场景?

    生命周期钩子的一些使用方法: beforecreate : 可以在这加个loading事件,在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用 mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

    arguments是一个伪数组,没有遍历接口,不能遍历

    cancas和SVG的是什么以及区别

    SVG

    SVG 是一种使用 XML 描述 2D 图形的语言。
    SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
    在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

    Canvas

    Canvas 通过 JavaScript 来绘制 2D 图形。
    Canvas 是逐像素进行渲染的。
    在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

    Canvas 与 SVG 的比较

    Canvas

    依赖分辨率
    不支持事件处理器
    弱的文本渲染能力
    能够以 .png 或 .jpg 格式保存结果图像
    最适合图像密集型的游戏,其中的许多对象会被频繁重绘复制代码

    SVG

    不依赖分辨率
    支持事件处理器
    最适合带有大型渲染区域的应用程序(比如谷歌地图)
    复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
    不适合游戏应用
    展开全文
  • vue面试题之三:vue常见面试题①

    千次阅读 2019-09-20 17:26:25
    3. vue常见面试题 1. vue的优缺点 优点:性能好,简单易用,前后端分离,双向数据绑定,单页面应用用户体验好。 缺点:不利于SEO优化。 2. keep-alive的作用是什么? <keep-alive>是Vue的内置组件,能在...
  • vue 面试题

    千次阅读 2020-09-12 17:55:42
    1.什么是 mvvm? MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,...
  • 出场率100%的Vue面试题

    千次阅读 多人点赞 2019-11-06 17:26:57
    出场率100%的Vue面试题 前言 注意本次用cdn形式引入js学习,有node.js的玩家可以用node.js。CDN下载地址:https://vuejs.org/js/vue.min.js以及Node.js:Vue系列: windows下npm安装vue 有一个强大的地基才能写出...
  • VUE 面试题

    2019-04-25 19:23:05
    VUE 面试题 一、对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件,它负责将数据模型转化成UI 展现出来。 ViewModel ...
  • 2020年Vue面试题汇总

    万次阅读 多人点赞 2020-02-03 16:46:20
    2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识——理论篇 1、对于Vue是一套渐进式框架的理解 渐进式代表的含义是:主张最少。 Vue可能有些方面是不如React,不如Angular,...

空空如也

1 2 3 4 5 ... 20
收藏数 4,100
精华内容 1,640
关键字:

vue面试题

vue 订阅