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

亦凉 2022-08-29 10:51 273阅读 0赞

## 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缓存页面

*  使用v-show复用DOM

*  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)

*  第三方插件按需引入

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组件如何通讯（常见） ##

![b1caf85899594fcebf76aff0211cd9b8.png][]

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

*  执行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重写][DOM]
    
     *  优化slots的生成
    
    vue3中可以单独重新渲染父级和子级
    
     *  确保实例正确的跟踪依赖关系
     *  避免不必要的父子组件重新渲染
    
    ![优化slots的生成][slots]
    
     *  静态树提升
    
    使用静态树提升，这意味着Vue3 的编译器将能够检测到什么是静态的，然后将其提升，从而降低了渲染成本。
    
     *  跳过修补整棵树，从而降低渲染成本
     *  即使多次出现也能正常工作 ![静态树提升][24b868db625a57483a5072dc3ad903d4.png]
    
     *  静态属性提升
    
    使用静态属性提升，Vue 3 打补丁时将跳过这些属性不会改变的节点，但是孩子还要继续patch ![静态属性提升][ced925437814b491ddf76855f8178583.png]
    
     *  基于Proxy的响应式系统
    
    Vue 2的响应式系统使用 Object.defineProperty的getter和setter。Vue 3将使用ES2015 Proxy作为其观察机制，这将会带来如下变化：
    
     *  组件实例初始化的速度提高100%
     *  使用Proxy节省以前一半的内存开销，加快速度，但是存在低浏览器版本的不兼容
     *  为了继续支持IE11，Vue 3将发布一个支持旧观察机制的和新Proxy版本的构建  
        ![adb67fd2a95a2c47fc7585d9a7fadc67.png][]
 *  更小
    
     *  通过摇树优化核心库体积
 *  更容易维护
    
     *  TypeScript + 模块化
    
    Vue 3将带来更可维护的源代码。他不仅会使用TypeScript，而且许多包被解耦，更加模块化

![53dd4f4f0ab91eead2cd9dadc5026ed0.png][]

*  更加友好
    
     *  跨平台：编译器核心和运行时核心与平台无关，使得Vue更容易与任何平台（web、Android、IOS）一起使用
 *  更容易使用
    
     *  改进的TypeScript支持，编辑器能提供强有力的类型检查和错误及警告
     *  更好的调试支持
     *  独立的响应化模块
     *  Composition API

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

#### **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中自定义指令的使用

![e46f43d80c40395e4d8b178319177da4.png][]

#### **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引入图片的方法
 *  移动端常见样式问题
 *  文本超出隐藏

![8e8c1a4e6e27ce1efd12972b58f97817.png][]

#### **常用功能** ####

*  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的特点

![a6618f74c484f78262ba40404bff24c8.png][]

#### 需要的朋友只需要你点赞支持，然后[点击这里免费获取][Link 1]。 ####

[b1caf85899594fcebf76aff0211cd9b8.png]: /images/20220829/d7c02e8f0f6d48ba9e27973e349b2128.png
[DOM]: /images/20220829/678b7757e5e047bfb616a4e53a175a6b.png
[slots]: /images/20220829/b5ff0e8141f5403b83889e4b39819a69.png
[24b868db625a57483a5072dc3ad903d4.png]: /images/20220829/dafa0fdd3df84a69b10541a747136035.png
[ced925437814b491ddf76855f8178583.png]: /images/20220829/35afb967c2a94420aea76f5c6b3e4234.png
[adb67fd2a95a2c47fc7585d9a7fadc67.png]: /images/20220829/0473ee073cc648388ebac0348fad1cdc.png
[53dd4f4f0ab91eead2cd9dadc5026ed0.png]: /images/20220829/29a1e99391a2407fbe1cbd82929314dd.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=NgZqxZAa
[e46f43d80c40395e4d8b178319177da4.png]: /images/20220829/55d9ceb16faf46cb8fc2234e2b7d78cf.png
[8e8c1a4e6e27ce1efd12972b58f97817.png]: /images/20220829/466cf28d0fe34958b4540b5f7ab95c23.png
[a6618f74c484f78262ba40404bff24c8.png]: /images/20220829/af4fd9c733834e00a8ef9bfa333c2045.png