美文网首页web前端vue专栏
Vue常见的面试题汇总

Vue常见的面试题汇总

作者: cj_jax | 来源:发表于2019-02-01 17:04 被阅读190次

    1、V-if和V-show的区别

    答案:区别就是dom元素是否挂载了,v-show是dom树上有内容,不显示,display:none;v-if是dom树上无内容

    2、Vue组件间是怎么通讯的

    答案:1、父组件-->子组件

    ​ 方式:父组件给子组件绑定属性,子组件通过props属性来接收传递的数据

    ​ 注意:属性的值必须在组件中通过props属性指定,属性名必须与父组件中定义的一致。props可以是一个数组或对象

    ​ 2、子组件-->父组件

    ​ 方式:在父组件中声明一个接受数据的函数,父组件给子组件绑定事件,子组件通过$emit触发事件,并且可在此时传递参数,

    ​ 父组件通过定义好的监听事件接收参数(注意参数是什么 )

    ​ 3、非父子组件间的通讯

    ​ 方式: 创建一个新Vue的实例,让各个兄弟共用同一个事件机制。(关键点)

    ​ 传递数据方,通过事件触发$emit(方法名, 传递的数据)。

    ​ 接收数据方,在mounted() 钩子函数(挂载实例) 中 触发事件$on(方法名, callback(接收数据的数据)),

    ​ 此时callback函数中的this已经发生了改变, 可以使用箭头函数。

    ​ 对于大型复杂的项目,采用vuex 状态管理更适合

    3、常见指令

    答案:

    ​ v-text:更新DOM对象的 textContent

    ​ v-html:更新DOM对象的 innerHTML

    ​ v-bind:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM

    ​ v-on:绑定事件

    ​ v-for:基于源数据多次渲染元素或模板块

    ​ v-if:根据表达式的值的真假条件,销毁或重建元素

    ​ v-show:根据表达式之真假值,切换元素的 display CSS 属性

    ​ v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

    ​ v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

    4、怎么定义组件

    答案:

    ​ 全局定义:Vue.component(组件名, {template: 模板字符串})

    ​ 局部定义:components:{组件名: {template: 模板字符串}}

    ​ 单文件组件:包含template,script,style三部分

    5、vue路由是怎么做的(路由的原理)

    答案:浏览器URL中的哈希值(# hash)和 component的对应关系,一个哈希值对应一个组件

    6、怎么请求数据的

    答案:用axios发送请求

    7、谈谈组件化和模块化的区别

    答案:

    ​ 组件化:组件化就是基于可重用的目的,将一个大的软件系统按照分离关注点的形式,拆分成多个独立的组件,主要目的就是减少耦合。

    ​ 一个独立的组件可以是一个软件包、web服务、web资源或者是封装了一些函数的模块。

    ​ 这样,独立出来的组件可以单独维护和升级而不会影响到其他的组件。

    ​ 模块化:模块化的目的在于将一个程序按照其功能做拆分,分成相互独立的模块,

    ​ 以便于每个模块只包含与其功能相关的内容,模块之间通过接口调用。

    ​ 将一个大的系统模块化之后,每个模块都可以被高度复用。

    ​ 区别:模块化的目的是为了重用,模块化后可以方便重复使用和插拨到不同的平台,不同的业务逻辑过程中。

    ​ 组件化的目的是为了解耦,把系统拆分成多个组件,分离组件边界和责任,便于独立升级和维护。

    8、Vue的数据双向绑定原理(如果更深层的话就要涉及到订阅发布者模式了可以自己看)

    答案:

    ​ Vue在初始化实例的时候,会把data中所有的数据,用Object.defineProperty方法全部加给vm对象,

    ​ 这个时候,vm对象中的数据就有了set和get方法,set这个函数会在属性被赋值的时候自动调用,

    ​ get这个函数会在属性被获取值的时候自动调用,用户获取到的属性的值,其实就是get方法的返回值。也就能实现双向绑定了

    9、Vue全家桶有些什么

    ​ vue:主要Vue

    ​ vue-router:关于路由方面的配置

    ​ vuex:数据共享和缓存用

    ​ vue-resource:于后台交互用(现在改为axios 但是axios不是Vue里面的东西)

    ​ vue-cli:快速创建项目的脚手架

    答案:

    10、Filter过滤器

    作用:

    ​ 文本数据格式化 , 也就是: 将数据按照我们指定的一种格式输出(可以直接说过滤)

    ​ 过滤器可以用在两个地方:{{}}和 v-bind 表达式

    ​ 两种过滤器:1 全局过滤器 2 局部过滤器

    11、Vue生命周期

    一个组件从开始到最后消亡所经历的各种状态,就是一个组件的生命周期

    ​ beforeCreate()

    ​ 说明:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用

    ​ 注意:此时,无法获取 data中的数据、methods中的方法

    ​ created()

    ​ 说明:这是一个常用的生命周期,可以调用methods中的方法、改变data中的数据

    ​ beforeMounted()

    ​ 说明:在挂载开始之前被调用,此时无法获取到el中的DOM元素

    ​ mounted()

    ​ 说明:此时,vue实例已经挂载到页面中,可以获取到el中的DOM元素,进行DOM操作

    ​ beforeUpdated()

    ​ 说明:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

    ​ 注意:此处获取的数据是更新后的数据,但是获取页面中的DOM元素是更新之前的

    ​ updated()

    ​ 说明:组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作

    ​ beforeDestroy()

    ​ 说明:实例销毁之前调用。在这一步,实例仍然完全可用。

    ​ 使用场景:实例销毁之前,执行清理任务,比如:清除定时器等

    ​ destroyed()

    ​ 说明:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

    12、小程序和vue的区别和联系

    ​ 区别:微信小程序是运行在微信里的APP,vue是一个流行框架

    ​ 联系:微信小程序借鉴了vue的部分语法,但也有一些区别,例如:显示隐藏元素,v-show和hidden;事件处理:v-on和bindtap

    13、Vuex的使用和五个核心

    五个核心:state , getter , mutation , action , module

    14、vue中Tab栏怎么实现

    ​ 每一个tab标题对应一个tab组件,并且每一个标题都有一个点击事件和传入的参数,在点击的时候tab组件接收参数来控制显示和隐藏

    ​ 也可以用路由实现,适用于全屏的tab

    15、在vue中获取dom元素

    ​ 在vue中可以通过给标签加ref属性,就可以在js中利用$refs去引用它,从而操作该dom元素

    16、vue单页面 首屏加载怎么优化

    1. 按需加载

    2. 基于DllPlugin 和 DllReferencePlugin 的 webpack 构建优化

    3. 异步组件

    4. 优化组件加载时机

    18、什么是MVVM。分别描述一下你对MVVM优缺点的理解

    ​ 即:Model-View-ViewModel 它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,

    ​ 这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。

    ​ MVVM不仅简化了业务与界面的依赖关系,还优化了数据频繁更新的解决方案,甚至可以说提供了一种有效的解决模式。

    ​ MVVM用来做服务端是极其不适用的,因为:网络资源成本过高 开发成本过高

    19、vue.js的view-model是如何工作的

    ​ Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。

    ​ 它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,

    ​ 保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。

    20、vue中$set什么时候用

    ​ 生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去,此时使用 vm.$set实例方法,这也是全局 Vue.set方法的别名

    21、Vue-cli的src文件夹中有哪些文件

    ​ assets中是图片,字体等一些静态资源

    ​ components中是组件

    ​ filters中是过滤器

    ​ router中是路由文件

    ​ App.vue 根组件

    ​ mian.js

    22、vue-router有哪几种导航钩子?(具体怎么用的)

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

    23、路由之间是如何跳转的跳转?

    ​ 1、router-link to = 'path'

    ​ 2、router.push('path')

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

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

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

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

    26、如何让CSS只在当前组件中起作用?

    ​ 将当前组件的style修改为<style scoped>

    27、<keep-alive></keep-alive>的作用是什么?

    ​ <keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

    大白话: 比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染

    28、如何实时修改data中数组中的值(数据改变试图改变)

    this.$set(this.data,”key”,value’)
    

    ​ $set的使用方法自己查

    29、slot是什么

    ​ 插槽:

    ​ 三种方式:1、匿名插槽

    ​ 2、具名插槽

    ​ 3、带参数的插槽

    相关文章

      网友评论

        本文标题:Vue常见的面试题汇总

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