Vue 常见技术面试题

川长思鸟来 2023-07-23 03:59 7阅读 0赞

###  ###

*   *  如何理解MVVM？
     *  jQuery和Vue的区别？
     *  Vue拦截器
     *  vuex状态管理
     *  vue生命周期、常见的生命周期函数
     *  用过哪些vue ui框架
     *  vue中的router和route的区别
     *  计算属性和侦听属性的区别
     *  vue里面delete跟vue.delete有什么区别？
     *  如果一个空白页面使用弹窗this，那么this会弹出什么
     *  webpack是如何使用的？
     *  Vue如何实现数据的响应式？
     *  Vue如何解析模板？
     *  Vue：ssr（服务器端渲染）
     *  请你解释一下双向绑定？
     *  请你介绍一下vue脚手架？
     *  请你介绍一下webpack？

## 如何理解MVVM？ ##

MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，反之亦然。

vue就是mvvm的一个典型应用

## jQuery和Vue的区别？ ##

jQuery是通过选择器操作dom对象，进行赋值、取值、事件绑定等操作；  
vue则是通过vue对象将数据和view分离，不需要引用dom对象，使用MVVM。

## Vue拦截器 ##

对特定的http请求或响应消息或请求头进行验证，拦截不合法的http交互以保证web环境的安全。

分为两种：路由拦截、请求拦截

## vuex状态管理 ##

Vuex的核心是store，store包含着应用中大部分的状态（state）。

## vue生命周期、常见的生命周期函数 ##

创建、挂载、更新、卸载  
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

## 用过哪些vue ui框架 ##

Vant、ElementUI、colorUI、chart

## vue中的router和route的区别 ##

route是一条路由；routes是一组路由；router是一个机制，相当于一个管理者，它来管理路由。

## 计算属性和侦听属性的区别 ##

计算属性用来声明式的描述一个值依赖了其他的值。  
watch监听自定义的变量，当变量的值发生变化时，调用对应的方法

## vue里面delete跟vue.delete有什么区别？ ##

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

## 如果一个空白页面使用弹窗this，那么this会弹出什么 ##

\[object window\]

## webpack是如何使用的？ ##

webpack是模块打包工具，它会分析模块之间的依赖关系，然后使用loaders处理它们，最后生成一个优化并合并后的静态资源。  
使用方法：

1.  搭建node环境
2.  使用npm安装webpack
3.  创建项目
4.  安装依赖
5.  打包运行

## Vue如何实现数据的响应式？ ##

“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。  
Vue 的响应式，核心机制是 观察者模式。  
数据是被观察的一方，发生改变时，通知所有的观察者，这样观察者可以做出响应  
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

## Vue如何解析模板？ ##

首先模板最终必须转换成js代码，因为：  
第一个模板有逻辑，有v-if,v-for。必须用js才能实现（图灵完备的语言）  
第二个模板要转化为html渲染页面，必须用js才能实现  
因此，模板最终要转换成一个js函数（render函数，也就是渲染函数）这个render函数返回vode对象，后面其他函数（update）将vnode渲染成html。

## Vue：ssr（服务器端渲染） ##

SSR，意为 Server Side Rendering（服务端渲染），目的是为了解决单页面应用的 SEO 和首屏渲染速度慢的问题，对于一般网站影响不大，但是对于需要做SEO的网站是致命的，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息。

客户端渲染需要：加载html=>解析html=>加载js=>解析js=>生成dom节点=>插入 html 文档，所以很慢； 服务端渲染就是将首屏的html结构构建好直接返回，客户端只需要：加载html=>解析html。所以首屏打开速度大大提高，但同时对 服务器 的压力也比客户端渲染要大。

## 请你解释一下双向绑定？ ##

更新model，view的数据会随之更新；更新view，model的数据也被自动更新，这种情况就是双向绑定。  
![在这里插入图片描述][20200407094737767.png]

## 请你介绍一下vue脚手架？ ##

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：  
CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）  
CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）  
CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等）

## 请你介绍一下webpack？ ##

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。  
entry: 入口，定义整个编译过程的起点  
output: 输出，定义整个编译过程的终点  
module: 定义模块module的处理方式  
plugins：插件，对编译完成后的内容进行二度加工  
resolve.alias 定义模块的别名

[20200407094737767.png]: /images/20230528/bc3aa4cd7f93459ca1d8c0c1bcb265f1.png