【vue】一些初级面试题

v-if 与 v-show 的区别，各自的使用场景

共同点：
v-if 和 v-show 都能实现元素的显示隐藏

区别：
◆ v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）
◆ v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多
◆ v-if 有更高的切换开销，v-show 切换开销小
◆ v-if 有配套的 v-else-if 和 v-else，而 v-show 没有
◆ v-if 可以搭配 template 使用，而 v-show 不行

使用场景：
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

为何在 v-for 中使用 key

diff 算法中会通过 tag 和 key 来判断是不是相同的节点，从而减少渲染次数，提升性能。

vue-router 常用路由模式

Hash：使用 URL 的 hash 值来作为路由，支持所有浏览器。
History：依赖 HTML5 History API 和服务器配置。
Abstract：支持所有 javascript 运行模式。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

vue-router 有哪几种导航钩子

全局守卫：router.beforeEach
全局解析守卫：router.beforeResolve
全局后置钩子：router.afterEach
路由独享的守卫：beforeEnter
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

举4种 vue 当中的指令和它的用法

v-for、v-if、v-bind、v-on、v-show、v-else、v-else-if 等

简述 vue 的生命周期

常用的有8个（生命周期不仅仅是8个），都是成对出现。

分别是：
beforeCreate 阶段、created 阶段，即创建前/后
beforeMount 阶段、mounted 阶段，即载入前/后
beforeUpdate 阶段、updated 阶段，即更新前/后
beforeDestroy 阶段、destroyed 阶段，即销毁前/后

第一次页面加载会触发哪几个钩子

beforeCreate、created、beforeMount、mounted

你的接口请求一般放在哪个生命周期中

接口请求一般放在 mounted 中，但需要注意的是服务端渲染时不支持 mounted，需要放到 created 中。

vuex 是什么

vuex 是专门为 vue.js 提供的一种状态管理模式，它采用的是集中式储存和管理所有组件的状态和数据，方便使用。

vuex 的五个核心

state、getter、mutation、action、module

页面刷新 vuex 被清空有啥解决办法

◆ localStorage 存储到本地再设置回去。
◆ 重新获取接口获取数据。

说说 sessionStorage、localStorage、cookie 的区别

◆ cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递，而 sessionStorage 和 localStorage 不会自动把数据发送给服务器，仅在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下。

◆ 存储大小限制也不同，cookie 数据不能超过4K，同时因为每次 http 请求都会携带 cookie、所以 cookie 只适合保存很小的数据，如会话标识。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到5M或更大。

◆ 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的 cookie 过期时间之前有效，即使窗口关闭或浏览器关闭。

◆ 作用域不同，sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；localstorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中都是共享的。

keep-alive 是什么

keep-alive 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

computed 和 watch 区别

computed 本质是一个具备缓存的 watch，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。

watch 没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true 选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听。

父组件与子组件如何传值

父组件传给子组件：子组件通过 props 接受父组件数据。

子组件传给父组件：子组件通过 $emit 给父组件传递参数。

vue 等单页面应用及其优缺点

优点：
vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：
不支持低版本的浏览器，最低只支持到 IE9；不利于 SEO 的优化（如果要支持 SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

vue 常用修饰符

.stop // 阻止事件冒泡
.capture // 阻止事件捕获
.prevent // 阻止默认事件
.self // 只执行当前元素，不包括子元素
.once // 只执行一次

v-for 与 v-if 的优先级

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

不推荐在同一元素上使用 v-if 和 v-for。

vue 组件 data 为什么必须是函数

因为组件是可以复用的，如果组件 data 是一个对象，那么子组件中的 data 属性值会互相污染。

vue 全家桶有些什么

vue：JS框架
vue-router：路由配置
vuex：数据共享和缓存用
vue-cli：脚手架
vue-resource：数据交互（现在改为axios，但是axios不是Vue里面的东西）

vue 中获取 dom 元素

可以通过给标签加 ref 属性，就可以在 js 中利用 $refs 去引用它，从而操作该 dom 元素。

vue 中 $set 什么时候用

强制更新视图

插槽有哪些

匿名插槽
具名插槽
带参数的插槽

ES6 中 var、let、const 三者的区别

◆ var 定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问，可以变量提升。
◆ let 定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
◆ const 用来定义常量，使用时必须赋值初始化，只能在块作用域里访问，而且不能修改。

什么是变量提升

所谓变量提升,指的是变量声明总会被解释器"提升"到函数的顶部。

简单讲一讲 MVVM

MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。

Model 层代表数据模型，View 代表 UI 组件，ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。

说说你对 mixins 的理解

mixins（混入）就是定义了一部分公共的方法、计算属性或者钩子函数等 vue 组件中的可复用功能，然后混合进各个组件中使用。
◆ 混入对象的钩子将在组件自身钩子之前调用。
◆ 值为对象的选项，例如 data、methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
◆ 混入对象中可以使用和调用组件自身变量和函数，且与在组件自身中使用情况一样。

你都做过哪些 vue 的性能优化

一般从编码阶段、SEO 优化、打包优化、用户体验方面优化，具体看看如何展开。

如何让 CSS 只在当前组件中起作用

将当前组件的 <style> 修改为 <style scoped>