2021最新Vue面试题含源码解析

2021/7/30 22:36:58

本文主要是介绍2021最新Vue面试题含源码解析,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

v-if 和 v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能

  • v-for优先于v-if被解析(把你怎么知道的告诉面试官)
// 源码中找答案:compiler/codegen/index.js > genElement()
if(el.staticRoot && !e.staticProcessed){
    return ...
}else if(el.for && !el.forProcessed){
    return ...
}else if(el.if && !el.forProcessed){
    return ...
}
...

  • 如果同时出现,每次渲染都会先执行循环在判断条件,无论如果循环都不可避免,浪费了性能
  • 要避免出现这种情况,则在外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环
  • 实在避免不了,可用computed计算属性提前过滤列表

Vue组件data为什么必须是个函数而Vue的根实例则没有此限制?

// 源码中找答案:src/core/instance/state.js > initData()

  • 组件需要是函数,根实例可以是对象
  • Vue组件可能存在多个实例,如果使用对象形式定义data,则会导致他们共用一个data对象,那么状态变更将会影响所有组件实例,这是不合理的;采用函数形式定义,在initData时会将其作为工厂函数返回全新data对象,有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在改限制,也是因为根实例只能有一个,不需要担心这种情况

你知道vue中key的作用和工作原理吗?说说你对它的理解

// 源码中找答案:src/core/vdom/patch.js > updateChildren()

  • key的作用主要是为了高效的更新虚拟DOM,其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个,从而避免频繁更新不同元素,是的整个patch过程更加高效,减少DOM操作量,提高性能。
  • 另外,若不设置key还可能在列表更新时引发一些隐蔽的bug
  • vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。

谈一谈对vue组件化的理解

  • 组件是独立和可复用的代码组织单元。组件系统是Vue核心特性之一,它使开发者使用小型、独立和通常可复用的组件构建大型应用。
  • 组件化开发能大幅提高应用开发效率、测试性、复用性。
  • 组件使用按分类有:页面组件、业务组件、通用组件
  • vue的组件是基于配置的,我们通常编写的组件是组件配置而非组件,框架后续会生成其构造函数,他们基于VueComponent,扩展于Vue
  • vue中常见组件化技术有:属性prop,自定义事件,插槽等,他们主要用于组件通讯、扩展等
  • 合理的划分组件,有助于提升应用性能
  • 组件应该是高内聚、低耦合的
  • 遵循单向数据流的原则

谈一谈对vue设计原则的理解

  • 渐进式javacript框架
  • 易用性
  • 灵活性
  • 高效性

谈谈你对MVC、MVP、MVVM的理解

  • 这三者都是框架模式,它们设计的目标都是为了解决Model层和View层解耦问题。
  • MVC模式(model view Controller)出现较早主要应用在后端,如php,在前端领域的早期也有应用,如Backbone.js。他的优点是分层清晰,缺点是数据流混乱,灵活性带来的维护性问题
  • MVP模式(model view Presenter)是mvc的进化形式,Presenter作为中间层负责MV通信,解决了两者耦合问题,但是P层过去臃肿会导致维护问题。
  • MVVM模式(model view viewmodel)在前端领域有广泛应用,它不仅解决了MV解耦问题,还同时解决了维护两者映射关系的大量繁杂代码和DOM操作代码,在提高开发效率、可读性同时还保持了优越的性能表现。

你了解哪些Vue性能优化方法

  • 路由懒加载

    const router = new VueRouter({
        routes:[
            {
                path:'/foo',
                component:() => import('./Foo.vue')
            }
        ]
    })
    
    
  • keep-alive缓存页面

<template>
    <div id="app">
        <keep-alive>
            <router-view />
        </keep-alive>
    </div>
</template>
  • 使用v-show复用DOM
<template>
    <div class="cell">
        <!-- 这种情况用v-show复用DOM,比v-if效果好 -->
        <div v-show="value" class="on">11111</div>
        <div v-show="!value" class="off">222222</div>
    </div>
</template>

  • v-for时加key,以及避免和v-if同时使用
<template>
   <ul>
       <li
         v-for = "user in activeUsers"
         :key = "user.id"
       >
       {{ user.name }}
       </li>
   </ul>
</template>
<script>
    export default {
        computed:{
            activeUsers: function(){
                return this.users.filter(function(user){
                    return user.isActive
                })
            }
        }
    }
</script>

  • 事件销毁
created(){
    this.timer = setInterval(this.refresh,2000)
},
beforeDestroy(){
    clearInterval(this.timer)
}
  • 图片懒加载(vue-lazyload)
<img v-lazy="/static/img/1.png">

  • 第三方插件按需引入
import Vue from 'vue'
import { Button,Select } from 'element-ui'
Vue.use(Button)
Vue.use(Select)

  • 无状态的组件标记为函数式组件
<template>
   <div class="cell">
       <div v-if="props.value" class="on"></div>
       <section v-else class="off"></section>
   </div>
</template>
<script>
    export default {
        props:['value']
    }
</script>

  • 子组件分割
<template>
   <div>
      <childcomp /> 
   </div>
</template>
<script>
    export default {
        components:{
            childcomp:{
                methods:{
                    heavy(){
                    //耗时任务
                    }
                    render(h){
                        return h('div',this.heavy())
                    }
                }
            }
        }
    }
</script>

  • 长性能列表的优化

    • 如果列表是纯粹的数据展示,不会有任何改变,就不需要做响应式
    export default {
        data: () => ({
            users:[]
        })
        async created(){
            const users = await axios.get('/api/users')
            this.users = object.freeze(users)
        }
    }
    
    
    • 如果是大数据长列表,可采用虚拟滚动,只渲染少部分区域内容

描述Vue组件生命周期(父子组件)

  • 见上文梳理

Vue组件如何通讯(常见)

描述组件渲染和更新的过程

  • 执行render函数 触发 getter 收集依赖到 watcher
  • 更新的时候 触发 setter 通知 watcher 触发 re-render 渲染

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

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

对MVVM的理解

computed 有何特点

  • 缓存,data不变不会重新计算
  • 提高性能

ajax请求应该放在哪个生命周期

  • mounted (整个渲染完成,dom渲染完成)
  • js是单线程,ajax异步获取数据

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

  • $props
  • <User v-bind="$props">

何时需要使用beforeDestory

  • 解绑自定义事件 event.$off
  • 清楚定时器
  • 解绑自定义的DOM事件,如window scroll 等

Vuex中action和mutation有何区别

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

请用vnode描述一个DOM结构

{
    tag:'xx',
    props:{
        id:'xx'
    },
    children:[
        tag:'xx',
        children:"xxx"
    ]
}

简述diff算法过程

  • patch(elm,vnode) 和 patch(vnode,newVnode)
  • patchVnode 和 addVnodes 和 removeVnode
  • updateChildren(key的重要性)

你对Vue3.0的新特性有没有了解

  • 更快

    • 虚拟DOM重写

    期待更多的编译时提示来减少运行时开销,使用更有效的代码来创建虚拟节点
    组件快速路径 + 单个调用 + 子节点类型检测

    • 跳过不必要的条件分支
    • JS引擎更容易优化

    虚拟DOM重写

    • 优化slots的生成

    vue3中可以单独重新渲染父级和子级

    • 确保实例正确的跟踪依赖关系
    • 避免不必要的父子组件重新渲染

    优化slots的生成

    • 静态树提升

    使用静态树提升,这意味着Vue3 的编译器将能够检测到什么是静态的,然后将其提升,从而降低了渲染成本。

    • 跳过修补整棵树,从而降低渲染成本
    • 即使多次出现也能正常工作 静态树提升
    • 静态属性提升

    使用静态属性提升,Vue 3 打补丁时将跳过这些属性不会改变的节点,但是孩子还要继续patch 静态属性提升

    • 基于Proxy的响应式系统

    Vue 2的响应式系统使用 Object.defineProperty的getter和setter。Vue 3将使用ES2015 Proxy作为其观察机制,这将会带来如下变化:

    • 组件实例初始化的速度提高100%
    • 使用Proxy节省以前一半的内存开销,加快速度,但是存在低浏览器版本的不兼容
    • 为了继续支持IE11,Vue 3将发布一个支持旧观察机制的和新Proxy版本的构建
  • 更小

    • 通过摇树优化核心库体积
  • 更容易维护

    • TypeScript + 模块化

    Vue 3将带来更可维护的源代码。他不仅会使用TypeScript,而且许多包被解耦,更加模块化

  • 更加友好

    • 跨平台:编译器核心和运行时核心与平台无关,使得Vue更容易与任何平台(web、Android、IOS)一起使用
  • 更容易使用

    • 改进的TypeScript支持,编辑器能提供强有力的类型检查和错误及警告
    • 更好的调试支持
    • 独立的响应化模块
    • Composition API

由于篇幅原因,仅展示一部分面试题详解,更多最新的Vue面试题整理成了一个PDF,需要的朋友点击这里免费获取。

vue-cli工程

  • 构建的 vue-cli 工程都到了哪些技术,它们的作用分别是什么?
  • vue-cli 工程常用的 npm 命令有哪些?
  • 请说出vue-cli工程中文件夹和文件的用处
  • config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置
  • 请你详细介绍一些 package.json 里面的配置

vue核心知识点

  • 对于Vue是一套渐进式框架的理解
  • vue.js的两个核心是什么?
  • 请问 v-if 和 v-show 有什么区别
  • vue常用的修饰符
  • v-on可以监听多个方法吗?
  • vue中 key 值的作用
  • vue-cli工程升级vue版本
  • vue事件中如何使用event对象?
  • $nextTick的使用
  • Vue 组件中 data 为什么必须是函数
  • v-for 与 v-if 的优先级
  • vue中子组件调用父组件的方法
  • vue中 keep-alive 组件的作用
  • vue中如何编写可复用的组件?
  • 什么是vue生命周期?
  • vue生命周期钩子函数有哪些?
  • vue如何监听键盘事件中的按键?
  • vue更新数组时触发视图更新的方法
  • vue中对象更改检测的注意事项
  • 解决非工程化项目初始化页面闪动问题
  • v-for产生的列表,实现active的切换
  • v-model语法糖的组件中的使用
  • vue中自定义过滤器
  • vue等单页面应用及其优缺点
  • 什么是vue的计算属性?
  • vue-cli提供的几种脚手架模板
  • vue父组件如何向子组件中传递数据?
  • vue弹窗后如何禁止滚动条滚动?
  • 计算属性的缓存和方法调用的区别
  • vue-cli中自定义指令的使用

vue-router

  • vue-router如何响应 路由参数 的变化?
  • 完整的 vue-router 导航解析流程
  • vue-router有哪几种导航钩子( 导航守卫 )?
  • vue-router传递参数的几种方式
  • vue-router的动态路由匹配
  • vue-router如何定义嵌套路由?
  • 组件及其属性
  • vue-router实现路由懒加载( 动态加载路由 )
  • vue-router路由的两种模式
  • history路由模式配置及后台配置

vuex

  • 什么是vuex?
  • 使用vuex的核心概念
  • vuex在vue-cli中的应用
  • 在vue中使用vuex,修改state的值
  • vuex actions异步修改状态

http请求

  • Promise对象是什么?
  • axios、fetch与ajax有什么区别?
  • 什么是JS的同源策略和跨域问题?
  • 如何解决跨域问题?
  • axios有什么特点?

UI样式

  • .vue组件的scoped属性的作用
  • 如何让CSS只在当前组件中起作用?
  • vue-cli中常用的UI组件库
  • 如何适配移动端?【 经典 】
  • 移动端媒体查询
  • vue内容垂直和水平居中
  • vue-cli引入图片的方法
  • 移动端常见样式问题
  • 文本超出隐藏

常用功能

  • vue中如何实现tab切换功能?
  • vue中keep-alive 实现标签页组件缓存
  • vue中实现页面从右往左侧滑入效果
  • vue中父子组件如何相互调用方法?
  • vue中央事件总线的使用

MVVM设计模式

  • MVC、MVP与MVVM模式
  • MVC、MVP与MVVM的区别
  • MVVM的实现原理
  • Object.defineProperty()方法
  • ES6中定义的类和对象
  • JS中的文档碎片
  • 解构赋值
  • Array.from
  • Array.reduce
  • 递归的使用
  • Obj.keys()与Obj.defineProperty
  • 发布-订阅模式
  • vue项目优化,缩短首屏加载时间

深入拓展

  • vue开发命令 npm run dev 输入后的执行过程
  • vue的服务器端渲染
  • 从零写一个npm安装包
  • vue-cli中常用到的加载器
  • webpack的特点

需要的朋友只需要你点赞支持,然后点击这里免费获取。


这篇关于2021最新Vue面试题含源码解析的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程