vue面试

资料来源：https://blog.csdn.net/qq_44182284/article/details/111191455

 

Vue常见面试题

    Vue的优点
    说说你对SPA单页面的理解，它的优缺点分别是什么？
    SPA首屏加载速度慢的怎么解决？
    Vue初始化过程中（new Vue(options)）都做了什么？
    对MVVM的理解？
    Vue数据双向绑定原理
    Vue的响应式原理
    Vue3.x响应式数据原理
    Vue3.0 里为什么要用 Proxy API替代 defineProperty API？
    Proxy 与 Object.defineProperty 优劣对比
    vue中组件的data为什么是一个函数？而new Vue 实例里，data 可以直接是一个对象
    vue中data的属性可以和methods中方法同名吗，为什么？
    vue中created与mounted区别
    Vue中computed与method的区别
    虚拟DOM中key的作用
    用index作为key可能会引发的问题
    Vue中watch用法详解
    vue中对mixins的理解和使用
    vue中的插槽
    为什么vue采用异步渲染
    Vue 的异步更新机制是如何实现的？
    $nextTick的理解
    Vue中常用的一些指令
    vue的自定义指令
    你有写过自定义指令吗？自定义指令的应用场景有哪些？
    v-show和v-if指令的共同点和不同点
    为什么避免v-if和v-for一起使用
    vue为什么在 HTML 中监听事件？
    Vue.set 改变数组和对象中的属性
    vm.$set(obj, key, val) 做了什么？
    说说vue的生命周期的理解
    第一次页面加载会触发哪几个钩子？
    Vue组件通信有哪些方式
    router和route的区别
    vue-router有几种钩子函数？
    vue-router路由跳转方式
    vue-router路由传参
    keep-alive了解吗
    Vuex是什么？怎么使用？
    什么情况下使用 Vuex？
    Vuex和单纯的全局对象有什么区别？
    为什么 Vuex 的 mutation 中不能做异步操作？
    axios 是什么，其特点和常用语法
    对SSR有了解吗，它主要解决什么问题？
    Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？
    Vue项目前端开发环境请求服务器接口跨域问题
    做过哪些Vue的性能优化？
    Vue3有了解过吗？能说说跟Vue2的区别吗？
    Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？
    element-ui中遇到的问题

Vue的优点

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

说说你对SPA单页面的理解，它的优缺点分别是什么？

是什么

    SPA（ single page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。
    一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转
    而页面的变化是利用路由机制实现 HTML 内容的变换，避免页面的重新加载。

优点

    用户体验好，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
    减少了不必要的跳转和重复渲染，这样相对减轻了服务器的压力
    前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理

缺点

    初次加载耗时多
    不能使用浏览器的前进后退功能，由于单页应用在一个页面中显示所有的内容，所以，无法前进后退
    不利于搜索引擎检索：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

SPA首屏加载速度慢的怎么解决？

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容；

加载慢的原因

    网络延时问题
    资源文件体积是否过大
    资源是否重复发送请求去加载了
    加载脚本的时候，渲染内容堵塞了

常见的几种SPA首屏优化方式

    减小入口文件积
    静态资源本地缓存
    UI框架按需加载
    图片资源的压缩
    组件重复打包
    开启GZip压缩
    使用SSR

想要具体了解可以点击SPA（单页应用）首屏加载速度慢的解决详解
Vue初始化过程中（new Vue(options)）都做了什么？

    处理组件配置项；初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上；初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率；
    初始化组件实例的关系属性，比如 p a r e n t 、 parent、 parent、children、 r o o t 、 root、 root、refs 等
    处理自定义事件
    调用 beforeCreate 钩子函数
    初始化组件的 inject 配置项，得到 ret[key] = val 形式的配置对象，然后对该配置对象进行响应式处理，并代理每个 key 到 vm 实例上
    数据响应式，处理 props、methods、data、computed、watch 等选项
    解析组件配置项上的 provide 对象，将其挂载到 vm._provided 属性上
    调用 created 钩子函数
    如果发现配置项上有 el 选项，则自动调用 $mount 方法，也就是说有了 el 选项，就不需要再手动调用 $mount 方法，反之，没提供 el 选项则必须调用 $mount
    接下来则进入挂载阶段