精华内容
参与话题
问答
  • 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。
    在这里插入图片描述

    展开全文
  • 2020年Vue面试题汇总

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

     

    2020年Vue面试题

    Interview

    ●●●●

    作者:@烦恼会解决烦恼

     

     

     

    vue核心知识——理论篇

    1、对于Vue是一套渐进式框架的理解

    渐进式代表的含义是:主张最少。

    Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。 
    渐进式的含义,我的理解是:没有多做职责之外的事。

    2、vue.js的两个核心是什么?

    数据驱动和组件化。

    3.vue生命周期钩子函数有哪些?

    总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。具体执行流程查看下图。

    4.vue 的双向绑定的原理是什么?

        vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程:

        我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:

    1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

    2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。

    3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

    流程图如下:

     

     

    vue核心知识——语法篇

     

    1.请问 v-if 和 v-show 有什么区别?

        相同点: 两者都是在判断DOM节点是否要显示。

        不同点:

    a.实现方式: v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。  v-show只是在修改元素的css样式,也就是display的属性值,元素始终在Dom树上。

    b.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;  v-show只是简单的基于css切换;

    c.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素始终被保留;

    d.性能消耗:v-if有更高的切换消耗,不适合做频繁的切换;  v-show有更高的初始渲染消耗,适合做频繁的额切换;

    2、vue常用的修饰符

    a、按键修饰符

    如:.delete(捕获“删除”和”退格“键)      用法上和事件修饰符一样,挂载在v-on:后面,语法:v-on:keyup.xxx=’yyy’  <inputclass = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>

    b、系统修饰符

    可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

    • .ctrl

    • .alt

    • .shift

    • .meta

    c、鼠标按钮修饰符

    • .left

    • .right

    • .middle
      这些修饰符会限制处理函数仅响应特定的鼠标按钮。如:<button @click.middle ="onClick">A</button>  鼠标滚轮单击触发   Click默认是鼠标左键单击

    d、其他修饰符
    
    • .lazy
      在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ,我们可以添加 lazy 修饰符,从而转变为使用 change事件进行同步:

    <inputv-model.lazy="msg" >
    • .number
      如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 .number修饰符:

    <input v-model.number="age" type="number">

    这通常很有用,因为即使在type="number"时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()解析,则会返回原始的值。

    • .trim
      如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

    <inputv-model.trim="msg">

     

     

        同样前面都有空格加上.trim后 将前后空格都去掉了。

    3、v-on可以监听多个方法吗?

        可以

    4、vue中 key 值的作用

        使用key来给每个节点做一个唯一标识

        key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,

    否则vue只会替换其内部属性而不会触发过渡效果。

    5.Vue 组件中 data 为什么必须是函数?

        在 new Vue() 中,data 是可以作为一个对象进行操作的,然而在 component 中,data 只能以函数的形式存在,不能直接将对象赋值给它。

        当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个实例中的data不会相互影响,是独立的。

    6、v-for 与 v-if 的优先级

        v-for的优先级比v-if高。

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

        v-if(判断是否隐藏)

        v-for(把数据遍历出来)

        v-bind(绑定属性)

        v-model(实现双向绑定)

     

     

     

    vue核心知识——组件篇

     

    1.vue中子组件调用父组件的方法

        第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。

        第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

        第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法。

    2.vue中父组件调用子组件的方法

        父组件利用ref属性操作子组件方法。

    父:
    <child ref="childMethod"></child>
    子:
    method: {
      test() {
         alert(1)
      }
    }
    在父组件里调用test即 this.$refs.childMethod.test()

    3.vue组件之间传值

      (1)父组件给子组件传值:

    1.父组件调用子组件的时候动态绑定属性
     <parent :dataList='dataList'></parent>

    2.子组件定义props接收动态绑定的属性props: ['dataList']        

    3.子组件使用数据

      (2)子组件主动获取父子间的属性和方法:

        在子组件中使用this.$parent.属性/this.$parent.方法。

    (3)子组件给父组件传值:

    
     

    一、使用ref属性

    1.父组件调用子组件时绑定属性ref

      <parent :ref='parent'></parent>

    2.在父组件中使用this.$refs.parent.属性/this.$refs.parent.方法

    二、使用$emit方法

    1.子组件调用this.$emit('方法名‘,传值)

    2.父组件通过子组件绑定的'方法名'获取传值。

    (4)vue页面级组件之间传值

        1.使用vue-router通过跳转链接带参数传参。

        2.使用本地缓存localStorge。

        3.使用vuex数据管理传值。

    (5)说说vue的动态组件。

            多个组件通过同一个挂载点进行组件的切换,is的值是哪个组件的名称,那么页面就会显示哪个组件。

        主要考查面试这 component的 is属性。

     

    (6)keep-alive内置组件的作用

        可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中

        

     (7)递归组件的用法

        组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。

        首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出。那么,我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。

     

     

     

    vue核心知识——路由

    1.怎么定义vue-router的动态路由?怎么获取传过来的值?

    动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒号开头,如下:

    {

      path: '/details/:id'

      name: 'Details'

      components: Details

    }

    访问details目录下的所有文件,如果details/a,details/b等,都会映射到Details组件上。

     

    当匹配到/details下的路由时,参数值会被设置到this.$route.params下,所以通过这个属性可以获取动态参数

    this.$route.params.id

    2.vue-router有哪几种路由守卫?

    路由守卫为:
    全局守卫:beforeEach
    后置守卫:afterEach
    全局解析守卫:beforeResolve
    路由独享守卫:beforeEnter

     

    3.$route和 $router的区别是什么?

        $router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。

        $route 是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。

    4.vue-router响应路由参数的变化

    image.png

    • (1)用watch 检测

    • (2)组件内导航钩子函数

      image.png

    5. vue-router 传参

      (1)使用Params:

    • 只能使用name,不能使用path

    • 参数不会显示在路径上

    • 浏览器强制刷新参数会被清空

       image.png

    (2)使用Query:

    • 参数会显示在路径上,刷新不会被清空

    • name 可以使用path路径

        image.png

     

     

    vue核心知识——vuex

    不用Vuex会带来什么问题?

    一、可维护性会下降,你要想修改数据,你得维护三个地方

    二、可读性会下降,因为一个组件里的数据,你根本就看不出来是从哪来的

    三、增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背。

    1.vuex有哪几种属性?

        有五种,分别是 State、 Getter、Mutation 、Action、 Module。

    2、vuex的State特性是?
    答:
    一、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data
    二、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
    三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中


    3、vuex的Getter特性是?
    答:
    一、getters 可以对State进行计算操作,它就是Store的计算属性
    二、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
    三、 如果一个状态只在一个组件内使用,是可以不用getters


    4、vuex的Mutation特性是?
    答:
    一、Action 类似于 mutation,不同在于:
    二、Action 提交的是 mutation,而不是直接变更状态。
    三、Action 可以包含任意异步操作



    5、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
    答:
    一、如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
    二、如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便。



             长按识别关注公众号

     

    展开全文
  • Vue面试题

    2020-08-11 09:43:45
    vue面试题 一简述vue响应式原理 data的属性被转化为getter和setter并且记录相应的依赖,当它被改动的时候会通知相应的依赖 所有的组件实例会有它对应的watcger实例,而watcher实例会依赖相应的setter 当数据变化时...

    vue面试题 链接
    一简述vue响应式原理
    setter getter

    1. data的属性被转化为gettersetter并且记录相应的依赖,当它被改动的时候会通知相应的依赖
    2. 所有的组件实例会有它对应的watcger实例,而watcher实例会依赖相应的setter
    3. 当数据变化时 setter会被调用,setter会通知相应的watcher

    二、MVC 模式 连接

    MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式。这种模式用于应用程序的分层开发。

    Model(模型) - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑,在数据变化时更新控制器。
    View(视图)视图代表模型包含的数据的可视化。
    Controller(控制器) -控制器作用于模型和视图上。它控制数据流向模型对象,并在数据变化时更新视图。它使视图与模型分离开。

    **二、1 mvvm **链接

    model :数据模型,处理数据和业务逻辑
    view : ui视图,负责展示数据 v
    iewModel :就是view和model的连接器,view与model通过viewModel实现的双向数据绑定

    三、组件之前的传值 链接

    链接2
    1、父组件向子组件传值:

    //父级
    <child :name="name"></child>
    //子级
    props:{
    	name:string
    }
    

    2、子组件向父组件传值

    //子组件
    <div @click="childData()"></div>
    data:function(){
    return{
    name:"我是子组件的数据"
    }
    }
    childData(){
    this.$emit("data",this.name)
    }
    
    //父组件
    data:function(){
    return{
    getData:""
    }
    }
    <p v-on:pushData="getChildData"></p>
    getChildData(data){
    this.getDataa=data
    }
    

    3、子组件之间传值

    //一、eventBus
    //1.创建一个空的vue对象
    	import Vue from 'vue';
    	export default new Vue();
    	//A组件
    	click(){
    		eventBus.$emit("add","要传递的数据")
    	}
    	//B组件
    	getData(){
    		eventBus.$emit("add",(msg)=>{
    			console.log(msg)//传递过来的数据
    		})
    	}
    //二、vuex 创建store对象
    import Vue from "vue";
    import Vuex from "vuex";
    Vue.use(Vuex);
    var store = new Vuex.Store({
    	state:{ //储存状态
     		lists:[
                { name:'数学作业',isFinish:false },
                { name:'语文作业',isFinish:false },
                { name:'化学作业',isFinish:false },
                { name:'物理作业',isFinish:false }
            ]
    	},
    	mutation:{},//显示的更改state
    	getters:{},//过滤state的数据
    	actions:{},//异步操作
    });
    export default store;
    //在组件中引用并使用
    //A组件
    <button class="add" @click='addList'>增加</button>
    data(){
    	return{
    		todoList:""
    	}
    },
    store:store,
    methods:{
    addList(){
    	this.$store.state.lists.push(name:this.todoList,isFnish:false);
    }
    }
    
    //B组件
    computed:{
    	list(){
    		return this.$store.state.lists
    	}
    }
    

    四、active-class是哪个组件的属性

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

    五、vue生命周期 链接

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

    在这里插入图片描述
    六、computed 和 watch 的区别 链接

    1、compute可以监听v-model(data)中的值,只要值发生改变,他就会重新计算 (它必须有一个返回值)

      <div id="app">
            <input type="text" v-model="firstname">+
            <input type="text" v-model="lasttname">=
            <input type="text" v-model="fullname">
        </div>
        
          data: {
                    firstname: "",
                    lasttname: "",
                },
          computed: {
                    fullname: function () {
                    //计算属性computed 必须要返回一个值哦 通过return来返回的
                        return this.firstname + "-" + this.lasttname
                    }
    

    2、watch 除了可以监听data中值得变化,还可以监听路由的变化(它有两个参数,分别是新值和旧值)

    catch:{
    "$route.path":function(newvsl,oldval){
    	//watch的回调函数里面有两个参数,分别是newval和oldval。
    	}
    }
    

    七、vue几种常见指令textContent和innerText以及innerHTML的区别链接

    v-for,v-if,v-else,v-show,v-on,v-bind,
    v-text(更新DOM对象的 textContent)
    v-html(更新DOM对象的 innerHTML)
    

    八、$route和 $router区别

    $route 是路由信息对象 包含了 path,params,hash,name,query,fullPath,matched
    $router 是路由实例 , 对象包扣了路由跳转的方法,钩子函数等

    九、v-if 和 v-show 的区别

    v-if是条件渲染 v-show是display:block或node

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

    v-model用于表单的双向数据绑定。这个背后做了两个操作:
    1.v-bind绑定一个value属性
    2.v-on指令给当前元素绑定 input事件

    vue数据的单向绑定:所有的数据只有一份,一旦数据变化了就去更新页面(只有 data—>DOM,没有DOM ---->data),若用户在页面上更新了数据,就手动收集(双向绑定是自动收集的),合并到原有的数据中
    vue的双向数据绑定:指的是vue实例中的data与渲染的DOM元素内容保持一致,无论谁改变,另一方会相应的更新为相同的数据

    十一、axios介绍

    axios是一个基于promise的Http库。可以发送get,post请求,正由于Vue,React的出现,促使了axios轻量级库的出现

    特性:

    3.支持Promise所有的 API

    4.拦截请求和响应

    5.可以转换请求数据和响应数据,应对响应回来的内容自动转化JSON格式

    8.它的安全性更高,客户端支持防御XSRF攻击 XSRF介绍

    如何使用?

    npm install axios 或者 引入

    https://unpkg.com/axios@0.19.0/dist/axios.min.js

    十二、vue的好处

    1、响应式编程 2、组件化
    优势:轻量级框架,双向数据绑定,组件化,视图、数据和结构的分离,虚拟DOM,运行速度快

    十三、active-class是哪个组件的属性

    vue-router中的router-link组件

    十四、vue-router有哪几种导航钩子

    1、全局钩子

    //1.前置守卫
    //单独设置每个路由的属性:
    meta: { may: true }
    router.beforeEach((to, from, next) => {
        if (to.matched.some(item => item.meta.may)) {
            let id = window.localStorage.getItem("id")
            if (id) {
                next()
            } else {
                next({ name: "login" })
            }
        } else {
            next() //next 方法必须要调用,否则钩子函数无法 resolved
        }
    })
    //2.后置钩子
    router.afterEach((to,from) => {
    	if(to.meta && to.meta.title){
    		document.title = to.meta.title
    	}else{
    		document.title = "666"
    	}
    })
    
    

    2、组件内的钩子

    beforeRouteEnter(to, from, next) {
        // do someting
        // 在渲染该组件的对应路由被 confirm 前调用
    },
    beforeRouteUpdate(to, from, next) {
        // do someting
        // 在当前路由改变,但是依然渲染该组件是调用
    },
    beforeRouteLeave(to, from ,next) {
        // do someting
        // 导航离开该组件的对应路由时被调用
    }
    
    

    3.单独路由独享组件

    {
        path: '/home',
        name: 'home',
        component: Home,
        beforeEnter(to, from, next) {
            if (window.localStorage.getItem("id")) {
                next()
            } else {
                next({ name: "login" })
            }
        }
    }
    
    

    十五、什么是js冒泡?vue中如何解决冒泡的?
    当父元素内多了子元素绑定了用一个事件,js会依次从内向外或者从外向内执行每个元素的事件,从而引发冒泡

    js阻止冒泡 event.stopPropagation();
    vue 事件.stop=“btn()” 例如:@click.stop = “btn()”

    十六、vue中ref是什么 链接

    这里是引用

    十七、虚拟DOM的理解

    虚拟DOM主要是为了减少DOM操作,减少性能浪费,生成一个虚拟DOM节点树,然后使用这个虚拟节点树进行渲染 虚拟DOM实现了哪方面的性能优化
    1.减少了DOM操作
    2.提升了渲染速度

    减少DOM操作的方法
    1.angular采用了脏值检测而react和Vue引用的是虚拟DOM

    十八、vue面试题history和hash的模式区别

    hash浏览器中有#号,#以及#号后面的都是hash
    1.hash虽然在url中,但不会包含在http请求中
    2.hash不会重新加载页面,即使路由不能完全匹配到,也不会报404
    history无#号
    1.发送请求前端必须和后端定义的请求格式一模一样,
    例如:http://xxx.com/item/id,如果前端接口http://xxx.com/item/(缺少id字段)就会报错404,找不到页面

    展开全文
  • vue 面试题

    2020-08-13 18:17:53
    vue面试题 computed 和 watch computed 有缓存,原data数据不变,不会重新计算 watch 监听引用类型 拿不到oldvalue (监听string 和 对象的不同) 动态绑定class的方法 计算属性和 watch 的区别 怎样理解单向数据流 ...

    Vue面试题

    v-show 与 v-if 区别
    为何v-for 中要用key
    computed 和 watch
    动态绑定class的方法
    组件间通信/ue组件如何通信  自定义事件
    props  $emit   $ref 
    描述vue生命周期 (在父子组件的情况下)
    何时使用beforeDestroy 
    描述组件渲染和更新过程
    自定义v-model /自定义组件的语法糖 v-model 是怎样实现的
    $nextTick
    slot
    动态、异步组件/何时使用异步组件
    keep-alive/ 何时使用keep-alive
    mixin / 多个组件有相同逻辑 抽离出来如何抽离
    Vuex 中action 和 mutation 有什么区别
    如何设置动态路由
    如何实现路由懒加载/异步加载
    双向数据绑定v-model的实现原理
    vue-router 有哪几种导航钩子
    Vue.js 2.x 双向绑定原理
    什么是 MVVM,与 MVC 有什么区别
    vue的原理
    理解Vue中的Render渲染函数
    怎样理解单向数据流
    路由跳转
    请用一个vNode 描述一个Dom结构
    监听Data变化的核心api 是什么
    Vue如何监听数组变化
    请描述响应式原理
    为何组件data必须是一个函数
    diff算法的事件复杂度
    简述diff算法过程
    Vue 为何是异步渲染,$nextTick有何用
    VUe 常见性能优化
    ajax应该放在哪个生命周期
    如何将组件所有props 传递给子组件
    

    vue基础考点

    v-show 与 v-if 区别

    只不过v-show是改变元素的css属性display。当v-show表达式的值为false是,元素会隐藏,查看DOM结构看到元素上加载了内联样式display:none; (v-show 显示和隐藏)

    v-if是真正的条件渲染,它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false,则一开始元素/组件并不会渲染,只有当条件第一次变为真时才开始编译。(v-if 可用于刷新组件)(v-if 渲染和销毁)

    而v-show只是简单的css属性切换,无论条件真与否,都会被编译。相比之下,v-if更适合条件不经常改变的场景,因为它切换开销相对较大,而v-show适用于频繁切换条件。

    为何v-for 中要用key

    必须使用key 且不能是index和random (尽量不要使用index作为key的值)
    diff算法中通过tag和key来判断 是否是sanmeNode
    减少渲染次数 提升渲染性能

    在 v-for 块中,我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数,即当前项的索引

    <li v-for="(item,index) in students" :key="item.id" >
    	{{index}}:{{item.name}} - {{item.age}}
    </li>
    

    computed 和 watch

    通俗来讲,既能用computed 实现又可以用 watch 监听来实现的功能,推荐用 computed,重点在于 computed 的缓存功能

    computed计算属性是用来声明式的描述一个值依赖了其它的值,当所依赖的值或者变量改变时,计算属性也会跟着改变;
    有缓存,原data数据不变,不会重新计算 (computed的值可以不在data中定义)(提升性能)

    watch 监听的是已经在 data 中定义的变量,当该变量变化时,会触发 watch 中的方法;(监听引用类型 拿不到oldvalue )

     data:{
         a:1,
         b:{
             c:1
         }
     },
     watch:{
         a(val, oldVal){//普通的watch监听
             console.log("a: "+val, oldVal);
         },
         b:{//深度监听,可监听到对象、数组的变化
             handler(val, oldVal){
                 console.log("b.c: "+val.c, oldVal.c);//watch 监听引用类型 拿不到oldvalue 
             },
             deep:true //true 深度监听
         }
     }
    

    动态绑定class的方法

    参考:vue动态绑定class的常用几种方式

    • .绑定单个class
    • 绑定的数据对象
    • 绑定一个返回对象的计算属性
    • 单纯数组方法
    • 数组与三元运算符结合判断选择需要的class

    组件间通信/组件如何通信 自定义事件

    参考:vue采用EventBus实现跨组件通信及注意事项
    考点 :props $emit $ref eventBus
    vue本身具有自定义事件能力()
    取消事件订阅必须跟事件订阅成对出现,否则会重复订阅,对javascript性能造成不必要的浪费

    自定义事件
    event.noeventno eventoff event$emit

    props $emit $ref

    参考:vue 组件通信的几种方式解读

    子组件的props选项能够接收来自父组件数据。没错,仅仅只能接收,props是单向绑定的,即只能父组件向子组件传递,不能反向
    $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。

    如果ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过refrefDOM使DOMref可能获取到在子组件里定义的属性和方法。 如果ref在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,***通过ref可能获取到该DOM 的属性集合,访问到DOM元素***,

    prop和$ref之间的区别:
    prop 着重于数据的传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop。
    $ref 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且ref用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。

    总结:
    props 用于 父 -> 子 传值
    $emit 用于 子 -> 父传值
    $ref 用于 父 -> 子 传值

    描述vue生命周期 (在父子组件的情况下)

    create vue的实例 存在于js内存模型中,是内存中的一个变量 并没有开始渲染 vue组件初始化完成
    mounted 网页绘制、渲染完成

    创建 初始组件是由外到内 (父->子)
    渲染组件是由内到外的 (子->父)
    销毁组件是由内到外的 (子->父)

    子组件的数据更新,不会引起父组件的beforeUpdate和updated生命周期钩子
    11
    在这里插入图片描述

    何时使用beforeDestroy

    解绑自定义事件
    清楚定时器
    解绑自定义的DOM事件 如 window scroll (销毁子组件以及事件监听器 )

    解绑 evenbus 绑定事件或者自定义事件 (防止可能造成内存泄漏)(mounted 中添加eventbus 绑定的事件)

    描述组件渲染和更新过程

    vue 高级特性

    自定义v-model /自定义组件的语法糖 v-model 是怎样实现的

    input 元素的value = this.name
    绑定 input 事件 this.name = $event.target.value
    data 会触发 re-render

    $nextTick

    异步渲染 $nextTick 待dom完成后再回调
    页面渲染 会将data的修改数据整合 ,多次data修改只会渲染一次

    slot

    作用域插槽:
    使用时候子组件标签中要有标签,再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据,所以作用域插槽是一种子传父传参的方式,解决了普通slot在parent中无法访问child数据的去问题;

    具名插槽:

    动态、异步组件/何时使用异步组件

    何时使用异步组件:
    加载大组件
    路由异步加载

    动态组件:

    // currentTabComponent 组件名称
    <!--动态组件-->
    <component  :is="slotDemo"></component>
    
    
    <script>
      import slotDemo  from './slotDemo'
      import scopedSlotDemo  from './scopedSlotDemo'
      import nameSlot  from './nameSlot'
    
      export default {
        components:{
          slotDemo,scopedSlotDemo,nameSlot
        },
      }
    </script>
    

    异步组件:
    import 大函数
    按需加载,异步加载大组件

    
    <slotDemo  v-if="showSlotDemo">
    
    
    <script>
      export default {
        components:{
          slotDemo: () => import('./slotDemo') 
        },
      }
    </script>
    

    keep-alive/ 何时使用keep-alive

    何时使用keep-alive:
    缓存组件,不需要重复渲染
    多个静态tab页切换
    性能优化

    缓存组件
    频繁切换,不需要重新渲染
    vue常见性能优化

    // 如果没有<keep-alive>  下面三个组件切换时会销毁其他组件
    // 如果使用<keep-alive>    下面三个组件切换时不会销毁其他组件,只会切换显示隐藏
    <keep-alive>
    	<slotDemo  v-if="stat ===1 "/>	
    	<scopedSlotDemo  v-if="stat ===2 "  />	
    	<nameSlot  v-if="stat ===3 " />	
    </keep-alive>
    
    <script>
      import slotDemo  from './slotDemo'
      import scopedSlotDemo  from './scopedSlotDemo'
      import nameSlot  from './nameSlot'
    
      export default {
        components:{
          slotDemo,scopedSlotDemo,nameSlot
        },
      }
    </script>
    

    mixin / 多个组件有相同逻辑 抽离出来如何抽离

    多个组件有相同逻辑 抽离出来
    mixin 不是完美的解决方案 会有一些问题
    vue3 提出的Composition API旨在解决这些问题

    缺点:
    变量来源不明确,不利于阅读
    多mixin可能造成mixin命名冲突
    mixin和组件可能出现 多对对关系,复杂度较高

    vuex

    在这里插入图片描述

    基本概念

    state
    getter
    action
    mutation

    用于vue的组件
    dispatch
    commit
    mapState
    mapGetter
    mapAction
    mapMutation

    Vuex 中action 和 mutation 有什么区别

    action 中处理异步 mutation 不可以
    mutation 做原子操作
    action 可以整合 多个mutation

    vue-router

    路由模式 hash模式 H5 history模式
    H5 history模式 需要server段提供支持(why)

    路由设置 动态路由 懒加载

    如何设置动态路由

    const = {
    		// 获取参数 10 20
    		template: '<div> {{ }}</div>'
    }
    const router= new VueRouter({
    	router:[
    		// 动态路径参数  以冒号开头, 能命中 'user/10' 'user/20'  等格式的路由
    		{path: '/user/:id',component : User}
    	]
    })
    

    如何实现路由懒加载/异步加载

    {
          path: '/rank-list',
          name: 'RankList',
          meta: {
            title: '排行榜'
          },
          component: RankList
    }
    const RankList = () => import( /* webpackChunkName: "RankList" */ '@/components/RankList')
    

    vue 原理

    双向数据绑定v-model的实现原理

    vue-router 有哪几种导航钩子

    Vue.js 2.x 双向绑定原理

    什么是 MVVM,与 MVC 有什么区别

    vue的原理

    理解Vue中的Render渲染函数

    怎样理解单向数据流

    路由跳转

    请用一个vNode 描述一个Dom结构

    监听Data变化的核心api 是什么

    Object.defineProperty
    深度监听 监听数组
    有何缺点

    Vue如何监听数组变化

    Object.defineProperty 不能监听数组变化
    重新定义原型 重写push pop等写法 实现监听
    Proxy 可以原生支持监听数组变化

    请描述响应式原理

    监听data变化
    组件渲染 和更新的流程

    为何组件data必须是一个函数

    diff算法的事件复杂度

    O(n)
    在O(n^3) 基础上做了一些调整

    简述diff算法过程

    patdh(elem,vnode) 和 patch(vnode,newVnode)
    patchVnode 和 addVnodes 和 removeVnodes
    updateChildren (key的重要性)

    Vue 为何是异步渲染,$nextTick有何用

    $nextTick 是在DOM更新后 触发回调

    VUe 常见性能优化

    合理使用 v-show 和 v-if
    合理使用 computer
    v-for 时 加key 避免和v-if同时使用
    自定义事件 DOM事件及时销毁
    合理使用异步组件
    合理使用keep-alive
    data 层级不要太深
    使用vue-loader 在开发环境做模板变异(预编译)
    webpack 层面的优化
    前端通用的性能优化
    使用SSR

    ajax应该放在哪个生命周期

    应该放在 mounted 中
    js 是单线程的 ajax异步获取数据

    如何将组件所有props 传递给子组件

    props<Uservbind="props <User v-bind="props " />

    如何应对面试

    框架的使用(高级特性、周边插件)
    框架的原理(基本原理、热门技术的深度、全面性)
    框架的实际应用 设计能力(组件结构、数据结构)

    面试官考察

    技术追求 (考察原理)
    独立承担项目 (考察设计能力)

    熟悉基本使用,了解使用场景级项目结合的使用经验

    参考

    98道经典Vue面试题总结(长期更新)

    展开全文
  • VUE 面试题

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

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

空空如也

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

vue面试题

vue 订阅