Vue面试题整理

Vue面试题，转载的qwq

一. 说几个vue中的指令和它的用法？

v-model 双向数据绑定；
v-for 循环；
v-if, v-show 显示与隐藏；
v-bind 动态绑定属性
v-on 事件绑定；
v-once 只绑定一次。

二. v-on指令可以同时监听多个函数吗?

可以, v-on的事件监听类似于DOM原生api添加事件监听者addEventListener
v-on 可以给一个事件同时绑定多个函数，也可以一次绑定多个事件
v-bind 可以一次绑定多个属性，使用v-bind={}结构来实现

三. vue中v-if和v-show有什么区别

v-if 的原理是根据判断条件来动态的进行增删DOM元素, 比较耗费性能和内存, 频繁显示隐藏不建议使用
v-show 是根据判断条件来动态的进行显示和隐藏元素, 通过设置样式display为block和none来实现, 适用于频繁显示隐藏的情况

四. vue循环中为什么使用key?

需要使用key来给循环中每个节点做一个唯一标识，要保证一个循环中key的值各不相同, 以避免vue中的重用机制造成可能的渲染异常. 从底层来看, key属性主要为了Diff算法就可以正确的识别此节点。并高效的更新虚拟DOM。

五. vue中数据绑定是怎么实现的？双向绑定指令v-model的本质是什么？

Vue组件data中的数据在组件创建时，都会被Object.defineProperty改造为set,get类型的属性，当数据发生变化时set方法就会调用，set方法中添加了重新渲染的代码。
v-model相当于 v-bind:value 加 v-on:input

六. 分别简述computed和watch的使用场景

• computed:
  　　　　当一个属性受多个属性影响的时候就需要用到computed
  　　　　例子： 购物车商品结算的时候
• watch:
  　　　　当一条数据影响多条数据的时候就需要用watch
  　　　　例子：搜索数据

七. 列举一下Vue组件生命周期函数，什么时候需要在destroyed中写代码？

beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestroy destroyed
当前页面有事件监听器或者计时器时,需要在destroyed中取消或销毁

八. vue的组件配置对象中都有哪些常用字段？分别是什么作用？

Data 组件中的数据
props 组建的属性数据,接收父组件的传值
computed 计算属性
components 定义或引用子组件
methods 自定义函数
watch 属性监听
filters 数据过滤器
mounted 等生命周期函数

九. <keep-alive></keep-alive>的作用是什么?

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

十. vue组件中如何获取dom元素?

使用ref属性获取, 在组件模板元素中添加ref属性, 在js中用this.$refs获取

十一. Vue.nextTick()方法有什么作用？

当vue中动态数据修改时,会导致界面的更新,而界面的更新属于异步更新, 当打印界面数据时, 异步更新尚未完成, 所以打印结果是更新之前的数据
Vue.nextTick表示异步更新函数, 其参数是更新完成的回调函数

十二. 如何让CSS只在当前组件中起作用(vue中如何实现样式隔离)？

在组件中的style前面加上scoped, 如果父子组件都有样式隔离, 则父组件中无法修改子组件样式, 此时可用样式穿透修改
vue2: 父组件选择器>>>子组件选择器{子组件样式}
vue3: :deep(子组件选择器)

十三. vue中如何处理跨域请求

vue中处理跨域请求一般要设置代理服务器实现跨域,
在vue项目的根目录中的vue.config.js配置文件,在devServer字段中配置服务器代理
在使用axios请求数据时直接使用代理地址

十四. axios和ajax的区别：

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

十五. vue中有哪些数据传递方式?

1. 组件传值: 父传子,通过props属性或slot插槽传递, 子传父,通过$emit发射自定义事件传递, 非父子,通过bus总线传递
2. 路由传值: 可通过url路径传值和编程式导航对象传值
3. vuex状态管理传值

十六. vue中路由如何传值?

1. 使用url拼接字符串的形式传值 使用$route.query接收
2. 使用友好URL传值 使用$route.params接收
3. 使用命名路由params字段传值 使用$route.params接收
4. 使用query对象传值 使用$route.query接收

十七. vue组件中如何监听路由?

在组件的watch监听器中对$route这个字段进行监听
全局监听路由在app.vue组件
watch监听$route可以监听全局路由，也可以在全局路由守卫beforeEach函数中操作全局路由

十八. vue路由的钩子函数有哪些?

全局的路由钩子函数：beforeEach、afterEach
单个的路由钩子函数：beforeEnter
组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

十九. 介绍以下vue组件内的路由守卫(即路由的生命周期/钩子函数)，有哪些参数（to，from，next）

vue组件中的路由钩子方法有
beforeRouteEnter 进入路由前调用。这里组件还未创建, 不能使用this
beforeRouteUpdate 路由更新之前被调用, 组件不会重新初始化, 可以使用this
beforeRouteLeave 离开路由之前被调用，可以访问里面的this属性
方法中都有三个参数:
to :即将要进入的目标路由对象；
from :当前导航即将要离开的路由对象；
next ：调用该方法后，才能进入下一个路由钩子函数

二十. vue中怎么实现非父子组件之间的传值？

在项目规模不是特别大时，可以创建一个空组件作为总线，项目中其他组件都可以通过总线进行传值。
大大型项目中，可以使用vuex进行数据管理，将数据统一放在store中进行管理。
也可以在路由跳转时,通过路由传值

二十一. vue中如何实现父子组件间的双向数据绑定?

Vue中父子组件双向绑定利用父子组件传值原理,
父组件向子组件传值, 通过给子组件定义value属性来接收传值
子组件向父组件传值, 通过子组件$emit发射名为input的自定义事件
在父组件中使用子组件标签时, 在子组件标签上通过v-model绑定父组件数据,实现父子组件的双向绑定

二十二. vuex如何使用?

首先在项目中 npm install vuex 安装
新建vuex状态管理文件,导入vuex并添加状态数据
在组件中使用mapState()函数映射状态数据并使用
在组件中使用commit()函数提交申请修改状态数据

二十三. Vuex的核心概念有哪些？组件如何使用store中的数据如何改变store中的数据？

state => 基本数据 在组件中使用mapState()函数把状态数据映射入组件即可使用
getters => 从基本数据派生的数据 我们在组件中使用 $store.getters获取数据
mutations => 提交更改数据的方法，同步！ 我们在组件中使用 $store.commit('',params)修改数据
actions => 像一个装饰器，包裹mutations，使之可以异步。 使用mapAction()映射入组件使用
modules => 模块化Vuex

二十四. vue有哪些常用的UI组件库

element (PC端)，
VUX (移动端),
Mint UI(移动端)
Vant (移动端)

二十五. vue有哪些优缺点:

优点:

1. 简单好用： Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。
2. 单页面应用, 使用单文件组件结构, 用户体验好,
3. 性能比较好：相比其他框架, 它占用更少的空间，并提供更好的性能。
4. 基于MVVM模式, 数据驱动视图, 更高效
5. 适应性强：组件化设计可以提高开发效率,方便代码复用, 提升整个项目的可维护性

缺点:

1. vue生态环境不如react和angular, 但有追赶和超越的趋势
2. vue2不支持IE8 vue3 不支持IE10
3. vue封装的比较深入,不利于seo优化, 报错不明显

二十六. 什么是MVVM?

MVVM是model-view-viewModel的简写, 它是一种开发模式, 它实现了视图和数据逻辑之间的分离, model模型指的是后端传递的数据, view视图指的是所看到的页面, viewModel是连接视图view和模型model的桥梁, 从而实现模型model到视图view的转化 和 视图view到模型model的转化, 也就是我们所说的双向数据绑定, 使用MVVM模式实现的前端框架有 vue 和 react

二十七. vue项目怎么打包app ?

1. 首先使用 webpack 打发布包, npm run build
2. 然后通过 Hbuilder 新建H5+App项目
3. 把第一步打包出的dist文件夹导入项目
4. 在项目中的manifest.json文件中进行打包配置
5. 点击Hbuilder工具菜单栏发行中的 原生App-云打包

二十八. vue中虚拟DOM的实现原理

虚拟DOM是通过js对象的结构来记录html标签节点, 当组件数据更新需要渲染视图时,先用diff算法计算变化前后js对象(也就是虚拟DOM树)结构的不同, 得到最小差异, 然后针对性的更新部分真实DOM节点, 这样可以极大提高视图渲染效率, 节省内存消耗

二十九. 请说下封装 vue 组件的过程？

1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(思考1小时，码码10分钟，程序猿的准则。)
2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
4. 封装完毕了，直接调用即可

三十. 在vue项目中使用组件库, 如何修改组件库中组件的样式?

一般vue组件style会添加scoped属性,产生组件样式隔离, 无法直接修改子组件样式
此时可以使用vue提供的样式穿透语法修改子组件样式 (父组件选择器 >>> 子组件选择器 vue3是 :deep())

三十一. vue项目中如何使用sass?

1. 下载安装sass模块 npm install sass --save
2. 在组件的style标签上添加lang=”scss”

32. SCSS/less相比于CSS有哪些优势？

在css语法基础上添加了编程能力，使之具有定义变量，嵌套，计算，使用函数,混合等功能

33. scss和less有哪些不同？

1. 编译环境不同 sass-loader less-loader
2. scss变量使用$定义 ,less变量使用@定义
3. sass支持条件语句,可以使用if() else() for(), less不支持

34. vue单文件组件如何实现SEO优化(了解)？

1. 使用预渲染插件prerender-spa-plugin,来执行打包,可以把项目中的每一个页面打包成一个网页，之后可单独实现SEO优化
2. 使用后端模板化渲染页面,也叫SSR服务器渲染
3. 使用Nuxt.js插件执行静态化打包
4. 使用Phantomjs无头浏览器(只有浏览器内核,没有界面)

35. vue3相比于vue2有哪些区别？

1. vue2使用时直接导入vue构造函数,vue3使用时通过对象解构方式按需导入
2. vue3中新增了setup函数，数据的定义，更新计算，监听等都在setup函数中执行
3. setup函数中的数据都需要return导出才能在组件模板中调用
4. Setup中this为空,可以有效避免this指向修改带来的问题
5. Vue中的生命周期也在setup中实现，其中取消了beforeCreata和created,其他的生命周期函数名有更新,如destoryed改成了onUnmounted
6. Vue3中使用ref函数定义值类型数据,使用reactive函数定义引用类型数据
7. Vue3中的ref, reactive,computed等功能函数都需要从vue中解构导出才能使用
8. Vue3废弃了filters过滤器,建议使用计算属性
9. vue3中的样式隔离由 >>> 或 /deep/ 改成了 :deep()
10. vue3可以动态绑定样式, 在style中使用v-bind() 绑定响应数据

36. vue3语法糖/setup中如何使用状态管理vuex和 路由 ?

从vuex模块中引入 useStore 函数, 调用后得到 状态仓库对象store
从vue-router模块中引入 useRoute和useRouter函数,
调用useRoute()后得到路由信息对象route, 可用于路由传值和路由监听
调用useRouter()后得到路由配置对象router, 可用于路由跳转