精华内容
下载资源
问答
  • 2021-01-16 09:27:53

    考点一:vue 的响应式原理

           当创建 Vue 实例时,vue 会遍历 data 选项的属性,利用 Object.defineProperty 为属性添加 getter 和 setter 对数据的读取进行劫持(getter 用来依赖收集,setter 用来派发更新),并且在内部追踪依赖,在属性被访问和修改时通知变化。

    每个组件实例会有相应的 watcher 实例,会在组件渲染的过程中记录依赖的所有数据属性(进行依赖收集,还有 computed watcher,user watcher 实例),之后依赖项被改动时,setter 方法会通知依赖与此 data 的 watcher 实例重新计算(派发更新),从而使它关联的组件重新渲染。

    依赖的模式:

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

    考点二、compoter和watch的区别

           watch顾名思义,用于监听数据变化,其中可以监听的数据来源有三部分:props、data、computed内的数据;watch提供两个参数(newValue,oldValue),第一个参数是新值,第二个参数保存旧值;

           computed用于处理复杂的逻辑运算,主要和methods储存方法来进行区分;methods储存方法,,computed储存需要处理的数据值;methods每次都会调用,computed有缓存机制,只有改变时才执行,性能更佳;

    区别:

    计算属性computed : 

    1. 支持缓存,只有依赖数据发生改变,才会重新进行计算

    2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化

    3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过的数据通过计算得到的

    4. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed

    5.如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。

    侦听属性watch:

    1. 不支持缓存,数据变,直接会触发相应的操作;

    2.watch支持异步;

    3.监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;

    4. 当一个属性发生变化时,需要执行对应的操作;一对多;

    考点三、组件传值

    1、父传子:父组件中通过v-bind绑定一个属性,子组件中通过props接收父组件中的绑定的属性

    2、子传父:子组件通过广播的方式$emit将值传递给父组件,父组件中通过一个函数去接收子组件中传递过来的值

    3、兄弟间传值:可以通过中间媒介父组件进行传递值得中转

    4、使用vuex状态管理,可以实现数据的随意存储和获取

    考点四、生命周期函数

    生命周期和钩子函数

    钩子函数描述
    beforeCreate在实例初始化之后,数据观测(data observer)
    和 event/watch事件配置之前被调用
    created在实例创建完成后立即被调用,在这一步实例已经完成了:
    数据观测、属性和方法的运算和 event/watch事件的回调,
    但是$el属性目前不可见,还无法操作dom。
    beforeMount在挂载开始之前被调用
    mounted在挂载成功后被调用,el被新创建的vm.$el替换,已经可以操作dom
    beforeUpdate数据更新之前调用
    update数据更新完成时调用,组件dom已经更新
    activated组件被激活时调用
    deactivated组件被移除时调用
    beforeDestory组件销毁前调用
    destoryed组件销毁后调用

    考点五、vue实现数据双向绑定的原理

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

    考点六、简单介绍一下keep-alive

    keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
    在vue 2.1.0 版本之后,keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) 。

    使用方法

    <keep-alive include='include_components' exclude='exclude_components'>
      <component>
        <!-- 该组件是否缓存取决于include和exclude属性 -->
      </component>
    </keep-alive>

    参数解释
    include - 字符串或正则表达式,只有名称匹配的组件会被缓存
    exclude - 字符串或正则表达式,任何名称匹配的组件都不会被缓存
    include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“,”分隔字符串、正则表达式、数组。当使用正则或者是数组时,要记得使用v-bind 。

    考点七、vue的响应原理从2.x的 Object.defineProperty变为3.x的Proxy,有什么好处?

    Object.defineProperty 本身有一定的监控到数组下标变化的能力,但是在 Vue 中,从性能/体验的性价比考虑,弃用这个特性(Vue 为什么不能检测数组变动 )。为了解决这个问题,经过 vue 内部处理后可以使用以下几种方法来监听数组

    push();
    pop();
    shift();
    unshift();
    splice();
    sort();
    reverse();

    由于只针对了以上 7 种方法进行了 hack 处理,所以其他数组的属性也是检测不到的,还是具有一定的局限性。

    Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.x 里,是通过 递归 + 遍历 data 对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择。
    Proxy 可以劫持整个对象,并返回一个新的对象。Proxy 不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。

    考点八、vue中的key的作用是什么?

          当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。key的作用让每个item有一个唯一的识别身份,可以下标值index或者id, 主要是为了vue精准的追踪到每一个元素,高效的更新虚拟DOM

    考点九、Vue 组件 data 为什么必须是函数 ?

           new Vue()实例中,data 可以直接是一个对象,为什么在 vue 组件中,data 必须是一个函数呢?
    因为组件是可以复用的,JS 里对象是引用关系,如果组件 data 是一个对象,那么子组件中的 data 属性值会互相污染,产生副作用。

    所以一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。new Vue 的实例是不会被复用的,因此不存在以上问题。

    考点十、vue是如何检测数组的变化?

    Vue中检测数组变化核心有两点:

    • 首先,使用函数劫持的方式,重写了数组的方法

    • Vue 将 data 中的数组,进行了原型链重写。指向了自己定义的数组原型方法,这样当调用数组 api 时,就可以通知依赖更新。如果数组中包含着引用类型,会对数组中的引用类型再次进行观测。

     

     

    更多相关内容
  • 经典面试题: 2021Vue经典面试题总结(含答案).pdf
  • 2021vue面试题2021.pdf

    2021-12-14 17:32:30
    2021vue面试题2021.pdf
  • vue面试题2021及答案.pdf
  • vue面试题2021并附答案pdf.pdf
  • 2021年前端vue面试题大汇总(附答案).pdf
  • 前端面试题: 精选Vue面试题及答案.pdf
  • 【面试题】2021最新Vue面试题汇总

    万次阅读 多人点赞 2020-10-28 16:25:59
    面试题(2020)Vue面试题汇总 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 1、对于MVVM的理解 MVVM 是 Model-View-ViewModel 的...

    【面试题】2021最新Vue面试题汇总

    博客说明

    文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

    更新时间:2021.11.30

    文章目录

    1、对于MVVM的理解

    MVVM 是 Model-View-ViewModel 的缩写。

    Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。

    View 代表UI 组件,它负责将数据模型转化成UI 展现出来。

    ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。

    在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

    ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

    2、vue实现双向数据绑定

    vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过**Object.defineProperty()**来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应监听回调。

    当把一个普通 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变更双向绑定效果。

    3、Vue组件间的参数传递

    1.父组件与子组件传值

    父组件传给子组件:子组件通过props方法接受数据;

    子组件传给父组件:$emit方法传递参数

    2.非父子组件间的数据传递,兄弟组件传值

    eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。

    项目比较小时,用这个比较合适。

    4、v-show 与 v-if 区别

    1.v-show和v-if的区别:

    v-show是css切换,v-if是完整的销毁和重新创建。

    2.使用

    频繁切换时用v-show,运行时较少改变时用v-if

    v-if=‘false’ v-if是条件渲染,当false的时候不会渲染

    5、Vue的生命周期

    beforeCreate(创建前) 在数据观测和初始化事件还未开始。

    created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来

    beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。

    实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

    mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。

    实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

    beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。

    可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。

    updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。

    调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。

    该钩子在服务器端渲染期间不被调用。

    beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

    destroyed(销毁后) 在实例销毁之后调用。

    调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

    1.什么是vue生命周期?

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

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

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

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

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

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

    答:会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

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

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

    5、绑定 class 的数组用法

    1、对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"

    2、数组方法v-bind:class="[class1, class2]"

    3、行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"

    6、计算属性computed和 监听watch 的区别

    计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。
    所以区别来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用 watch,用反或混用虽然可行,但都是不正确的用法。

    1、computed 是一个对象时,它有哪些选项?

    有get和set两个选项

    2、computed 和 methods 有什么区别?

    methods是一个方法,它可以接受参数,而computed不能,computed是可以缓存的,methods不会

    3、computed 是否能依赖其它组件的数据?

    computed可以依赖其他computed,甚至是其他组件的data

    4、watch 是一个对象时,它有哪些选项?

    handler 当监听对象时

    deep 是否深度

    immeditate 是否立即执行

    总结

    当有一些数据需要随着另外一些数据变化时,建议使用computed。

    当有一个通用的响应数据变化的时候,要执行一些业务逻辑或异步操作的时候建议使用watcher。

    7、Vue的路由实现:hash模式 和 history模式

    hash模式

    在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取。

    特点

    hash虽然在URL中,但不被包括在HTTP请求中。

    只用来指导浏览器动作,对服务端安全无用。

    hash不会重加载页面。

    hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com/,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

    history模式

    history采用HTML5的新特性,并且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。

    history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。

    8、Vue与Angular以及React的区别?

    (版本在不断更新,有的区别可能慢慢在靠近,目前我只针对Vue与其他两大框架的差别。)

    1.与AngularJS的区别

    相同点

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

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

    都支持双向数据绑定;

    都不支持低端浏览器。

    不同点

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

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

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

    2.与React的区别

    相同点

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

    中心思想相同:一切都是组件,组件实例之间可以嵌套;黑化的要考!

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

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

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

    不同点

    React采用的Virtual DOM会对渲染出来的结果做脏检查;

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

    9、事件修饰符

    1、绑定一个原生的click事件: 加native,

    2、其他事件修饰符:stop prevent self

    3、组合键:click.ctrl.exact 只有ctrl被按下的时候才触发

    10、组件中 data 为什么是函数

    为什么组件中的 data 必须是一个函数,然后 return 一个对象,而 new Vue 实例里,data 可以直接是一个对象?

    因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离,而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。

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

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

    Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用。

    也可以整个用它全家桶开发,当Angular用。

    还可以用它的视图,搭配你自己设计的整个下层用。

    你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。

    渐进式的含义,我的理解是:没有多做职责之外的事

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

    数据驱动和组件化

    13、vue中 key 值的作用

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

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

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

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

    15、组件

    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的值是哪个组件的名称,那么页面就会显示哪个组件。

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

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

    (7)递归组件的用法

    组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出。

    那么,我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。

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

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

    {
     path: '/details/:id'
     name: 'Details'
     components: Details
    }
    

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

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

    this.$route.params.id

    17、vue-router有哪几种路由守卫?

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

    18、$route和 $router的区别是什么?

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

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

    19、vue-router响应路由参数的变化

    image.png

    • (1)用watch 检测

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

    image.png

    20、 vue-router 传参

    (1)使用Params:
    • 只能使用name,不能使用path

    • 参数不会显示在路径上

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

      image.png

    (2)使用Query:
    • 参数会显示在路径上,刷新不会被清空

    • name 可以使用path路径

      image.png

    21、不用Vuex会带来什么问题?

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

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

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

    22、vuex有哪几种属性?

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

    23、vuex的State特性是?

    1、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data。

    2、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新。

    3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中。

    24、vuex的Getter特性是?

    1、getters 可以对State进行计算操作,它就是Store的计算属性。

    2、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用。

    3、 如果一个状态只在一个组件内使用,是可以不用getters。

    25、vuex的Mutation特性是?

    Action 类似于 mutation,不同在于:

    Action 提交的是 mutation,而不是直接变更状态。

    Action 可以包含任意异步操作。

    26、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?

    1、如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。

    2、如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便。

    img

    27、vue双向数据绑定原理、vue2和vue3原理的不同点

    因为vue2.0 object.defineProperty只能劫持对象属性,无法监控数组下标的变化,导致通过数据下标添加的元素不能实时响应的弊端。

    为了解决这个问题,经vue内部处理后,可以使用push()、pop() 、shift()、unshift()、splice()、sort()、reverse()进行hack处理,所以其他数组属性也是监测不到,具有一定的局限性。

    因为object.defineProperty只能劫持对象属性,从而需要对每个对象的每个属性进行遍历。vue2.0里是通过递归+遍历data对象来实现对数据的监控的,如果属性值是对象的话,还需要深度遍历。

    而Vue3.0中的proxy不仅可以代理对象,还可以代理数组,也可以代理动态添加的属性,有13种劫持操作:

    get 获取某个key值 (接收2个参数,目标值和目标值key值)

    set 设置某个key值 (目标值、目标的key值、要改变的值、改变前的原始值)

    apply 使用in 操作符判断某个key是否存在

    deleteProperty 删除一个property

    defineProperty 定义一个新的property

    推荐的同类文章

    1、前端HTTP浏览器相关面试题

    2、最新Vue面试题汇总

    3、微信小程序常见面试题

    4、HTML面试题汇总

    5、CSS面试题汇总

    感谢

    万能的网络

    以及勤劳的自己,个人博客GitHub测试GitHub

    公众号-归子莫,小程序-小归博客

    展开全文
  • vue面试——2021最全面的vue基础面试题.pdf
  • 2021vue面试题及答案下载,即下即用 [完整版].pdf
  • 2022前端面试系列——Vue面试题.pdf
  • 面试必备: 2021 Vue经典面试题总结.pdf
  • 默认 Vue 在初始化数据时,会给 data 中的属性使用 Object.defineProperty 重新定义所有属 性,当页面取到对应属性时。会进行依赖收集(收集当前组件的watcher) 如果属性发生变化会通 知相关依赖进行更新操作。 原理...
  • 精选Vue面试题及答案2022.pdf
  • 最全vue面试题+详解答案.pdf
  • 2021vue面试题汇总.pdf

    2021-12-14 15:20:27
    2021vue面试题汇总.pdf
  • 2021-web前端面试之旅-01-vue面试题

    千次阅读 2021-01-24 23:51:34
    日期:2021-1-24 11:10:00 前言 学习使人进步 怀挺 干饭人 哦力给 努力吧,骚年~~~~~ 男人你没有车,没有钱,没有房,但是你一要骚,骚的前提,你一定要努力学习~~~ 开始努力向前(钱)冲吧 1.vue优点? 答:轻量...

    作者:itwangyang

    日期:2021-1-24 11:10:00

    前言

    • 学习使人进步
    • 怀挺
    • 干饭人
    • 哦力给
    • 努力吧,骚年~~~~~
    • 男人你没有车,没有钱,没有房,但是你一要骚的前提,你一定要努力学习~~~
    • 开始努力向前(钱)冲吧

    1.vue优点?

    答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;
    简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;
    双向数据绑定:保留了angular的特点,在数据操作方面更为简单;
    组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;
    视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;
    虚拟DOM:dom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式;
    运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。
    

    2.vue父组件向子组件传递数据?

    答:通过props
    

    3.子组件像父组件传递事件?

    答:$emit方法
    

    4.v-show和v-if指令的共同点和不同点?

    答: 共同点:都能控制元素的显示和隐藏;
    不同点:实现本质方法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
    总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销比较大)。
    

    5.如何让CSS只在当前组件中起作用?

    答:在组件中的style前面加上scoped
    

    6.的作用是什么?

    答:keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
    

    7.如何获取dom?

    答:ref="domName" 用法:this.$refs.domName
    

    8.说出几种vue当中的指令和它的用法?

    答:v-model双向数据绑定;
    v-for循环;
    v-if v-show 显示与隐藏;
    v-on事件;v-once: 只绑定一次。
    

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

    答:vue文件的一个加载器,将template/js/style转换成js模块。
    用途:js可以写es6、style样式可以scss或less、template可以加jade等
    

    10.为什么使用key?

    答:需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。
    作用主要是为了高效的更新虚拟DOM。
    

    11.axios及安装?

    答:请求后台资源的模块。npm install axios --save装好,
    js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中。
    

    12.v-modal的使用。

    答:v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:
    v-bind绑定一个value属性;
    v-on指令给当前元素绑定input事件。
    

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

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

    14.分别简述computed和watch的使用场景

    答:
    computed:
        当一个属性受多个属性影响的时候就需要用到computed
        最典型的栗子: 购物车商品结算的时候
    watch:
        当一条数据影响多条数据的时候就需要用watch
        栗子:搜索数据
    

    15.v-on可以监听多个方法吗?

    答:可以,栗子:<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。
    

    16.$nextTick的使用

    答:当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,
    你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。
    

    17.vue组件中data为什么必须是一个函数?

    答:因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。
      组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,
      相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。
      而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。
    

    18.渐进式框架的理解

    答:主张最少;可以根据不同的需求选择不同的层级;
    

    19.Vue中双向数据绑定是如何实现的?

    答:vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 
    也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
    核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法。
    

    20.单页面应用和多页面应用区别及优缺点

    答:单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。
    所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),
    然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。
    多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新
    单页面的优点:
    用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小;前后端分离;
    页面效果会比较炫酷(比如切换页面内容时的专场动画)。
    单页面缺点:
    不利于seo;导航不可用,如果一定要导航需要自行实现前进、后退。
    (由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理);初次加载时耗时多;页面复杂度提高很多。
    

    21.v-if和v-for的优先级

    答:当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,
    这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用。
    如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去。
    

    22.assets和static的区别

    答:
    - 相同点:
    assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,
    样式文件等都可以放在这两个文件下,这是相同点
    - 不相同点:
    assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化。
    而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。
    static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。
    因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,
    所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。
    
    - 建议:
    将项目中template需要的样式文件js文件等都可以放置在assets中,走打包这一流程。减少体积。
    而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中,
    因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。
    

    23.vue常用的修饰符

    答:.stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡;
    .prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);
    .capture:与事件冒泡的方向相反,事件捕获由外到内;
    .self:只会触发自己范围内的事件,不包含子元素;
    .once:只会触发一次。
    

    24.vue的两个核心点

    答:数据驱动、组件系统
    数据驱动:ViewModel,保证数据和视图的一致性。
    组件系统:应用类UI可以看作全部是由组件树构成的。
    

    25.vue和jQuery的区别

    答:jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。
    比如需要获取label标签的内容:$("lable").val();,它还是依赖DOM元素的值。
    Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,
    可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
    

    26. 引进组件的步骤

     答: 在template中引入组件;
    在script的第一行用import引入路径;
    用component中写上组件名称。
    

    27.delete和Vue.delete删除数组的区别

    答:delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。
    

    28.SPA首屏加载慢如何解决

    答:安装动态懒加载所需插件;使用CDN资源。
    

    29.Vue-router跳转和location.href有什么区别

    答:使用location.href='/url'来跳转,简单方便,但是刷新了页面;
    使用history.pushState('/url'),无刷新页面,静态跳转;
    引进router,然后使用router.push('/url')来跳转,使用了diff算法,实现了按需加载,减少了dom的消耗。
    其实使用router跳转和使用history.pushState()没什么差别的,
    因为vue-router就是用了history.pushState(),尤其是在history模式下。
    

    30. vue slot

    答:简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。
    

    31.你们vue项目是打包了一个js文件,一个css文件,还是有多个文件?

    答:根据vue-cli脚手架规范,一个js文件,一个CSS文件。
    

    32.Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?

    答:Vue路由在Android机上有问题,babel问题,安装babel polypill插件解决。
    

    33.Vue2中注册在router-link上事件无效解决方法

    答: 使用@click.native。原因:router-link会阻止click事件,.native指直接监听一个原生事件。
    

    34.RouterLink在IE和Firefox中不起作用(路由不跳转)的问题

    答: 方法一:只用a标签,不适用button标签;
    方法二:使用button标签和Router.navigate方法
    

    35.axios的特点有哪些

    答:从浏览器中创建XMLHttpRequests;
    node.js创建http请求;
    支持Promise API;
    拦截请求和响应;
    转换请求数据和响应数据;
    取消请求;
    自动换成json。
    axios中的发送字段的参数是data跟params两个,两者的区别在于params是跟请求地址一起发送的,data的作为一个请求体进行发送
    params一般适用于get请求,data一般适用于post put 请求。
    

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

    答:
         1. 建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。(os:思考1小时,码码10分钟,程序猿的准则。)
        2. 准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。
        3. 准备好组件的数据输出。即根据组件逻辑,做好要暴露出来的方法。
         4. 封装完毕了,直接调用即可
    

    37.params和query的区别

    答:
    - 用法:
    query要用path来引入,params要用name来引入,接收参数都是类似的,
    分别是this.$route.query.name和this.$route.params.name。
    - url地址显示:
    query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
    - 注意点:
    query刷新不会丢失query里面的数据
    params刷新 会 丢失 params里面的数据。
    

    38.vue初始化页面闪动问题

    答:使用vue开发时,在vue初始化之前,由于div是不归vue管的,所以我们写的代码在还没有解析的情况下会容易出现花屏现象,看到类似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是我们还是有必要让解决这个问题的。
    首先:在css里加上[v-cloak] {
    display: none;
    }。
    如果没有彻底解决问题,则在根元素加上style="display: none;" :style="{display: 'block'}"
    

    39.vue更新数组时触发视图更新的方法

    答:push();pop();shift();unshift();splice(); sort();reverse()
    

    40.vue常用的UI组件库

    答:Mint UI,element,VUX
    

    41.vue修改打包后静态资源路径的修改

    cli3/4版本:在根目录下新建vue.config.js 文件,然后加上以下内容:(如果已经有此文件就直接修改)
    module.exports = {
    publicPath: '', // 相对于 HTML 页面(目录相同) }
    生命周期函数面试题
    

    42.什么是 vue 生命周期?有什么作用?

    答:每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
    同时在这个过程中也会运行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添加自己的代码的机会。
    (ps:生命周期钩子就是生命周期函数)例如,如果要通过某些插件操作DOM节点,如想在页面渲染完后弹出广告窗, 那我们最早可在mounted 中进行。
    

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

    答:beforeCreate, created, beforeMount, mounted
    

    44.简述每个周期具体适合哪些场景

    答:beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
    create:data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作
    beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的
    mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行
    beforeUpdate: 当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步
    updated:页面显示的数据和data中的数据已经保持同步了,都是最新的
    beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁
    destroyed: 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。
    

    45.created和mounted的区别

    答:created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
    mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
    

    46.vue获取数据在哪个周期函数

    答:一般 created/beforeMount/mounted 皆可.
    比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.
    

    47.请详细说下你对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结构依然存在。
    

    48.mvvm 框架是什么?

    答:vue是实现了双向数据绑定的mvvm框架,当视图改变更新模型层,当模型层改变更新视图层。在vue中,使用了双向绑定技术,就是View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。
    

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

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

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

    答:vue-router模块的router-link组件。children数组来定义子路由
    

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

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

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

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

    52.$route 和 $router 的区别

    答:$router是VueRouter的实例,在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)
    $route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。
    

    54.vue-router的两种模式

    答:hash模式:即地址栏 URL 中的 # 符号;
    history模式:window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)。
    

    55.vue-router实现路由懒加载( 动态加载路由 )

    答:三种方式
    第一种:vue异步组件技术 ==== 异步加载,vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
    第二种:路由懒加载(使用import)。
    第三种:webpack提供的require.ensure(),vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
    

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

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

    57.vuex有哪几种属性?

    答:有五种,分别是 State、 Getter、Mutation 、Action、 Module
    state => 基本数据(数据源存放地)
    getters => 从基本数据派生出来的数据
    mutations => 提交更改数据的方法,同步!
    actions => 像一个装饰器,包裹mutations,使之可以异步。
    modules => 模块化Vuex
    

    58.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?

    答:如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
    
    

    文献

    • vue文档
    展开全文
  • 2021最新通用BAT大厂前端vue面试题.pdf
  • vue面试题汇总

    2021-01-03 12:35:29
    vue 1.vue优点 操作虚拟dom,节省页面性能。 数据视图相分离。视图可以独立于数据变化和修改,当数据变化的时候视图也可以不变。 便于维护。 2.vue响应式原理 vue的响应式 3.单向数据流和双向数据流 单向数据流:数据...
  • 2021Vue面试题笔记.pdf

    2021-12-14 17:32:30
    2021Vue面试题笔记.pdf
  • vue面试题及答案2021.pdf
  • 2021Vue前端面试题总结(含答案)

    万次阅读 2021-05-26 20:35:13
    面试官:JavaScript中什么是基本数据类型什么是引用数据类型?以及各个数据类型是如何存储的?⭐⭐⭐⭐⭐ 答: 基本数据类型有 Number String Boolean Null Undefined Symbol(ES6新增数据类型) bigInt ...

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

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

    • 使用router对象的params.id。

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

    • 根据官网的定义,vue-loader 是 webpack 的一个 loader,用于处理 .vue 文件。

    • 使用vue-cli脚手架,作者已经配置好了基本的配置,开箱及用,你需要做的就是npm install 安装下依赖,然后就可以开发业务代码了。

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

    • assets文件夹是放静态资源;

    • components是放组件;

    • router是定义路由相关的配置;

    • view视图;app.vue是一个应用主组件;

    • main.js是入口文件

     1.vue优点?

    答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb; 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习; 双向数据绑定:保留了angular的特点,在数据操作方面更为简单; 组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势; 视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作; 虚拟DOM:dom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式; 运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。

    2.vue父组件向子组件传递数据? 答:通过props

    3.子组件像父组件传数据? 答:$emit方法

    4.v-show和v-if指令的共同点和不同点?

    答: 共同点:都能控制元素的显示和隐藏; 不同点:实现本质方法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。而且v-if不停的销毁和创建比较消耗性能。 总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销比较大)。

    5.如何让CSS只在当前组件中起作用?

    答:在组件中的style前面加上scoped

    6.的作用是什么?

    答:keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

    7.如何获取dom?

    答:ref=“domName” 用法:this.$refs.domName

    8.说出几种vue当中的指令和它的用法?

    答:v-model双向数据绑定; v-for循环; v-if v-show 显示与隐藏; v-on事件;v-once: 只绑定一次。

    9.vue-loader是什么?

    使用它的用途有哪些? 答:vue文件的一个加载器,将template/js/style转换成js模块。 用途:js可以写es6、style样式可以scss或less、template可以加jade等

    10.为什么使用key?

    答:需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。 作用主要是为了高效的更新虚拟DOM。

    11.axios及安装?

    答:请求后台资源的模块。npm install axios --save装好, js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中。

    12.v-modal的使用。

    答:v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作: v-bind绑定一个value属性; v-on指令给当前元素绑定input事件。

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

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

    14.分别简述computed和watch的使用场景

    答:computed:     当一个属性受多个属性影响的时候就需要用到computed     最典型的栗子: 购物车商品结算的时候 watch:     当一条数据影响多条数据的时候就需要用watch     栗子:搜索数据

    15.v-on可以监听多个方法吗?

    答:可以

    16.$nextTick的使用

    答:当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值, 你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。

    17.vue组件中data为什么必须是一个函数?

    答:因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。   组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。

    18.渐进式框架的理解

    答:主张最少;可以根据不同的需求选择不同的层级;

    19.Vue中双向数据绑定是如何实现的?

    答:vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变; 核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法。

    20.单页面应用和多页面应用区别及优缺点

    答:单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。 多页面(MPA),就是指一个*应用中有多个页面,页面跳转时是整页刷新 单页面的优点: 用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小;前后端分离;页面效果会比较炫酷(比如切换页面内容时的专场动画)。 单页面缺点: 不利于seo;导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理);初次加载时耗时多;页面复杂度提高很多。

    21.v-if和v-for的优先级

    答:当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用。 如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去。

    22.assets和static的区别

    答:相同点:assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点 不相同点:assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。 建议:将项目中template需要的样式文件js文件等都可以放置在assets中,走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中,因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。

    23.vue常用的修饰符

    答:.stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡; .prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播); .capture:与事件冒泡的方向相反,事件捕获由外到内; .self:只会触发自己范围内的事件,不包含子元素; .once:只会触发一次。

    24.vue的两个核心点

    答:数据驱动、组件系统 数据驱动:ViewModel,保证数据和视图的一致性。 组件系统:应用类UI可以看作全部是由组件树构成的。

    25.vue和jQuery的区别

    答:jQuery是使用选择器() 选 取 D O M 对 象 , 对 其 进 行 赋 值 、 取 值 、 事 件 绑 定 等 操 作 , 其 实 和 原 生 的 H T M L 的 区 别 只 在 于 可 以 更 方 便 的 选 取 和 操 作 D O M 对 象 , 而 数 据 和 界 面 是 在 一 起 的 。 比 如 需 要 获 取 l a b e l 标 签 的 内 容 : )选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:(“lable”).val();,它还是依赖DOM元素的值。 Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

    1. 引进组件的步骤 答: 在template中引入组件; 在script的第一行用import引入路径; 用component中写上组件名称。

    27.delete和Vue.delete删除数组的区别

    答:delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

    28.SPA首屏加载慢如何解决

    答:安装动态懒加载所需插件;使用CDN资源。

    29.Vue-router跳转和location.href有什么区别

    答:使用location.href=’/url’来跳转,简单方便,但是刷新了页面; 使用history.pushState(’/url’),无刷新页面,静态跳转; 引进router,然后使用router.push(’/url’)来跳转,使用了diff算法,实现了按需加载,减少了dom的消耗。 其实使用router跳转和使用history.pushState()没什么差别的,因为vue-router就是用了history.pushState(),尤其是在history模式下。

    1. vue slot 答:简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。

    31.你们vue项目是打包了一个js文件,一个css文件,还是有多个文件?

    答:根据vue-cli脚手架规范,一个js文件,一个CSS文件。

    32.Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?

    答:Vue路由在Android机上有问题,babel问题,安装babel polypill插件解决。

    33.Vue2中注册在router-link上事件无效解决方法

    答: 使用@click.native。原因:router-link会阻止click事件,.native指直接监听一个原生事件。

    34.RouterLink在IE和Firefox中不起作用(路由不跳转)的问题

    答: 方法一:只用a标签,不适用button标签;方法二:使用button标签和Router.navigate方法

    35.axios的特点有哪些

    答:从浏览器中创建XMLHttpRequests; node.js创建http请求; 支持Promise API; 拦截请求和响应; 转换请求数据和响应数据; 取消请求; 自动换成json。 axios中的发送字段的参数是data跟params两个,两者的区别在于params是跟请求地址一起发送的,data的作为一个请求体进行发送 params一般适用于get请求,data一般适用于post put 请求。

     

    36、vue 如何监听数组变化

    答案:

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

    37、请描述响应式原理

    答案:

    37.vue优化

    答案:

    • 合理使用v-show 和 v-if
    • 合理使用computed
    • v-for 时要加key,以及避免和 v-if 同时使用
    • 自定义事件、DOM 事件及时销毁
    • 合理使用异步组件
    • 合理使用keep-alive
    • data层级不要太深(因为深度监听一次性监听到底)
    • 使用 vue-loader 在开发环境做模板编译(预编译)
    • webpack层面的优化
    • 前端通用的性能优化,如果图片懒加载
    • 使用 SSR

    38、vuex

    vuex 面试题

    1、有哪几种属性

    有 5 种,分别是 state、getter、mutation、action、module

    2、vuex 的 store 特性是什么

    (1) vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data

    (2) state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新

    (3) 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

    3、 vuex 的 getter 特性是什么

    (1) getter 可以对 state 进行计算操作,它就是 store 的计算属性

    (2) 虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用

    (3) 如果一个状态只在一个组件内使用,是可以不用 getters

    4、vuex 的 mutation 特性是什么

    action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态

    action 可以包含任意异步操作

    5、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中

    如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里

    如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回

    5、不用 vuex 会带来什么问题

    可维护性会下降,你要修改数据,你得维护3个地方

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

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

    Webpack 面试题

    1、前端代码为何要进行构建和打包

    答案:

    代码方面:

    • 体积更小(Tree-Shaking、压缩、合并),加载更快
    • 编译高级语言或语法(TS,ES6+,模块化,scss)
    • 兼容性和错误检查(Polyfilll, postcss, eslint)

      研发流程方面:

    • 统一、高效的开发环境
    • 统一的构建流程和产出标准
    • 集成公司构建规范(体测、上线等)

    2、module、chunk、bundle分别是什么意思,有何区别

    答案:

    • module -- 各个源码文件,webpack 中一切皆模块
    • chunk -- 多模块合并成的,如 entry import() splitChunk
    • bundle -- 最终的输出文件
    展开全文
  • 2022最新经常会被问及的 Vue 面试题.pdf
  • Vue面试题合集下载.pdf

    2021-12-14 17:32:58
    Vue面试题合集下载.pdf
  • 主要介绍了Vue面试题及Vue知识点整理,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 2022热乎乎的完整版VUE面试题建议收藏.pdf
  • vue面试题_vue常见面试题和答案[文].pdf
  • 2021vue面试题总结

    千次阅读 多人点赞 2021-01-11 12:00:06
    3.Vue中的v-show和v-if怎么理解?4.Vue组件间通信方式都有哪些?正在收录中.... 1.说说你对vue的理解? vue是一个用于构建用户界面的开源渐进式框架,也是一个创建单应用页面的Web应用框架. Vue所关注的核心是MVC...
  • 多次面试整理的技术点,有效帮助快速面试
  • Vue-loader 是 Webpack 的加载模块,它使我们可以用 Vue 文件格式编写单文件组件。 单文件组件文件有三个部分,(模板、脚本和样式)。 vue-loader 模块允许 webpack 使用单独的加载模块 (例如 SASS 或 SCSS 加载器) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,475
精华内容 12,990
关键字:

vue面试题2021