Vue2 面试题
认识自己的无知 愚昧，接纳自己，然后一点点改变
一、Vue 是什么？
1. Web 发展历史
⑴. 静态页
最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互
⑵. 服务端渲染
ASP，JSP大家应该都不会太陌生，最早出现于 2005 年左右，先后出现了微软的 ASP 和 Java Server Pages [JSP] 等技术,取代了 CGI ，增强了 WEB 与服务端的交互的安全性，类似于下面这样，其实就是Java + HTML
<%@
page
language="java"
contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSP demo</title>
</head>
<body>
<img src="http://localhost:8080/web05_session/1.jpg" width=200 height=100 />
</body>
</html>
⑶. 前端框架的出现
随着移动设备的普及，Jquery的出现，以及SPA（Single Page Application 单页面应用）的雏形，Backbone EmberJS AngularJS 这样一批前端框架随之出现，但当时SPA的路不好走，例如SEO问题，SPA 过多的页面、复杂场景下 View 的绑定等，都没有很好的处理经过这几年的飞速发展，节约了开发人员大量的精力、降低了开发者和开发过程的门槛，极大提升了开发效率和迭代速度
⑷. 前端的百家争鸣
2. Vue 是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
——这里引用了 Vue 的官方文档介绍
3. Vue 核心特性
⑴. 数据驱动（MVVM)
- Model：模型层，负责处理业务逻辑以及和服务器端进行交互
- View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
- ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁
⑵. 组件化
- 在Vue中每一个
.vue文件都可以视为一个组件 - 优势：降低整个系统的耦合度；便于调试；高维护性
⑶. 指令系统
指令 (Directives) 是带有
v-前缀的特殊属性；
作用：将其产生的连带影响，响应式地作用于 DOM
常用的指令：条件渲染指令 v-if、列表渲染指令v-for、属性绑定指令v-bind、事件绑定指令v-on、双向数据绑定指令v-model
4. Vue 跟传统开发（Jquery）的区别
- Vue所有的界面事件，都是只去操作数据（MVVM），Jquery操作DOM
- Vue所有界面的变动，都是根据数据自动绑定出来的，Jquery操作DOM
5. Vue 和React对比
待扩展
⑴. 相同点
- 都有组件化思想
- 都支持服务器端渲染
- 都有Virtual DOM（虚拟dom）
- 数据驱动视图
- 都有支持native的方案：Vue的weex、React的React native
- 都有自己的构建工具：Vue的vue-cli、React的Create React App
⑵. 不同点
- 数据流向的不同。react从诞生开始就推崇单向数据流，而Vue是双向数据流
- 数据变化的实现原理不同。react使用的是不可变数据，而Vue使用的是可变的数据
- 组件化通信的不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数
- diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM
二、SPA（single-page application）单页面应用
1. 什么是 SPA？
单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换，打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面
2. SPA和MPA的区别
多页应用MPA（MultiPage-page application），翻译过来就是多页应用在MPA中，每个页面都是一个主页面，都是独立的当我们在访问另一个页面的时候，都需要重新加载html、css、js文件，公共文件则根据需求按需加载
| 单页面应用（SPA） | 多页面应用（MPA） | |
|---|---|---|
| 组成 | 12341 | right-aligned 文本居右 |
| 刷新方式 | 12341 | right-aligned 文本居右 |
| url模式 | 12341 | right-aligned 文本居右 |
| SEO搜索引擎优化 | 12341 | right-aligned 文本居右 |
| 数据传递 | 12341 | right-aligned 文本居右 |
| 页面切换 | 12341 | right-aligned 文本居右 |
| 维护成本 | 12341 | right-aligned 文本居右 |
单页应用优缺点
优点：
- 具有桌面应用的即时性、网站的可移植性和可访问性
- 用户体验好、快，内容的改变不需要重新加载整个页面
- 良好的前后端分离，分工更明确
缺点：
- 不利于搜索引擎的抓取
- 首次渲染速度相对较慢
3. 实现一个SPA
原理：
- 监听地址栏中hash变化驱动界面变化
- 用
pushsate记录浏览器的历史，驱动界面发送变化
4. 如何给SPA做SEO
SEO优化之后会延伸，这里仅对 SPA 的 SEO 做介绍
⑴. SSR服务端渲染
将组件或页面通过服务器生成html，再返回给浏览器，如nuxt.js
⑵. 静态化
通过程序将动态页面抓取并保存为静态页面
⑶. 使用Phantomjs针对爬虫处理
通过Nginx配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫
三、v-show和v-if有什么区别？使用场景分别是什么？
1. v-show与v-if的共同点
语法 和 作用效果（控制元素的显影）是相同的
2. v-show与v-if的区别
-
控制手段不同
v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。
v-if显示隐藏是将dom元素整个添加或删除 -
编译过程不同
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换 -
编译条件不同
v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染 -
生命周期
v-show由false变为true的时候不会触发组件的生命周期
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法 -
性能消耗
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；
3. v-show与v-if原理分析
大致流程：
- 将模板
template转为ast结构的JS对象 - 用
ast得到的JS对象拼装render和staticRenderFns函数 render和staticRenderFns函数被调用后生成虚拟VNODE节点，该节点包含创建DOM节点所需信息vm.patch函数通过虚拟DOM算法利用VNODE节点创建真实DOM节点
v-show：
有transition就执行transition，没有就直接设置display属性
v-if：
返回一个node节点，render函数通过表达式的值来决定是否生成DOM
4. v-show与v-if的使用场景
v-if 与 v-show 都能控制dom元素在页面的显示
v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除），如果在运行时条件很少改变，则使用 v-if 较好
如果需要非常频繁地切换，则使用 v-show 较好
四、Vue实例挂载的过程
new Vue()这个过程中究竟做了些什么？
过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等
结论：
new Vue的时候调用会调用_init方法
定义 s e t 、 set、 set、get 、 d e l e t e 、 delete、 delete、watch 等方法
定义 o n 、 on、 on、off、 e m i t 、 emit、 emit、off等事件
定义 _update、 f o r c e U p d a t e 、 forceUpdate、 forceUpdate、destroy生命周期- 调用
mount进行页面的挂载 - 挂载的时候主要是通过
mountComponent方法 - 定义
updateComponent更新函数 - 执行
render生成虚拟DOM _update将虚拟DOM生成真实DOM结构，并且渲染到页面中
五、vue生命周期的理解？
1. 生命周期是什么
Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作；
PS：在Vue生命周期钩子会自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())
2. 生命周期有哪些
Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期
| 生命周期 | 描述 | 使用场景 |
|---|---|---|
| beforeCreate | 组件实例被创建之初 | 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务 |
| created | 组件实例已经完全创建 | 组件初始化完毕，各种数据可以使用，常用于异步数据获取 |
| beforeMount | 组件挂载之前 | 未执行渲染、更新，dom未创建 |
| mounted | 组件挂载到实例上去之后 | 初始化结束，dom已创建，可用于获取访问数据和dom元素 |
| beforeUpdate | 组件数据发生变化，更新之前 | 更新前，可用于获取更新前各种状态 |
| updated | 组件数据更新之后 | 更新后，所有状态已是最新 |
| beforeDestroy | 组件实例销毁之前 | 销毁前，可用于一些定时器或订阅的取消 |
| destroyed | 组件实例销毁之后 | 组件已销毁，作用同上 |
| activated | keep-alive 缓存的组件激活时 | - |
| deactivated | keep-alive 缓存的组件停用时调用 | - |
| errorCaptured | 捕获一个来自子孙组件的错误时被调用 | - |
3. 生命周期整体流程
beforeCreate => created
- 初始化vue实例，进行数据观测
created
- 完成数据观测，属性与方法的运算，watch、event事件回调的配置
- 可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算
- 此时vm.$el 并没有被创建
created => beforeMount
- 判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译
- 优先级：render > template > outerHTML
- vm.el获取到的是挂载DOM的
beforeMount
- 在此阶段可获取到vm.el
- 此阶段vm.el虽已完成DOM初始化，但并未挂载在el选项上
beforeMount => mounted
- 此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM
mounted
- vm.el已完成DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM
beforeUpdate
- 更新的数据必须是被渲染在模板上的（el、template、render之一）
- 此时view层还未更新
- 若在beforeUpdate中再次修改数据，不会再次触发更新方法
updated
- 完成view层的更新
- 若在updated中再次修改数据，会再次触发更新方法（beforeUpdate、updated）
beforeDestroy
- 实例被销毁前调用，此时实例属性与方法仍可访问
destroyed
- 完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
- 并不能清除DOM，仅仅销毁实例
4. 数据请求在created和mouted的区别
created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成
mounted是在页面dom节点渲染完毕之后就立刻执行，触发时机上created是比mounted要更早
两者相同点：都能拿到实例对象的属性和方法讨论这个问题本质就是触发的时机，放在mounted请求有可能导致页面闪动（页面dom结构已经生成），但如果在页面加载前完成则不会，出现此情况建议：放在created生命周期当中
六、v-if和v-for的优先级是什么？
1. 作用
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染v-for指令基于一个数组来渲染一个列表。v-for指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名- 在
v-for的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化
2. 优先级
v-for优先级比v-if高
3. 注意事项
-
永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
-
如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环
<template v-if="isShow"> <p v-for="item in items"> </template> -
如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项
computed: { items: function() { return this.list.filter(function (item) { return item.isShow }) } }
七、SPA首屏加载速度慢的怎么解决？
1. 什么是首屏加载
首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容
计算首屏时间
利用performance.timing提供的数据：
通过DOMContentLoad或者performance来计算出首屏时间
// 方案一：
document.addEventListener('DOMContentLoaded', (event) => {
console.log('first contentful painting');
});
// 方案二：
performance.getEntriesByName("first-contentful-paint")[0].startTime
// performance.getEntriesByName("first-contentful-paint")[0]
// 会返回一个 PerformancePaintTiming的实例，结构如下：
{
name: "first-contentful-paint",
entryType: "paint",
startTime: 507.80000002123415,
duration: 0,
};
2. 加载慢的原因
- 网络延时问题
- 资源文件体积是否过大
- 资源是否重复发送请求去加载了
- 加载脚本的时候，渲染内容堵塞了
3. 解决方案
总的来讲可以分成两大部分 ：资源加载优化 和 页面渲染优化
- 减小入口文件积
- 静态资源本地缓存
- UI框架按需加载
- 图片资源的压缩
- 组件重复打包
- 开启GZip压缩
- 使用SSR
⑴. 减小入口文件体积
常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加
在vue-router配置路由的时候，采用动态加载路由的形式
routes:[
path: 'Blogs',
name: 'ShowBlogs',
component: () => import('./components/ShowBlogs.vue')
]
以函数的形式加载路由，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会加载路由组件
⑵. 静态资源本地缓存
后端返回资源问题：
- 采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头
- 采用Service Worker离线缓存
前端合理利用localStorage
⑶. UI框架按需加载
在日常使用UI框架，例如element-UI、或者antd，我们经常性直接引用整个UI库
import ElementUI from 'element-ui'
Vue.use(ElementUI)
但实际上我用到的组件只有按钮，分页，表格，输入与警告 所以我们要按需引用
import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)
⑷. 组件重复打包
假设A.js文件是一个常用的库，现在有多个路由使用了A.js文件，这就造成了重复下载
解决方案：在webpack的config文件中，修改CommonsChunkPlugin的配置；minChunks: 3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件
⑸. 图片资源的压缩
图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素，对于所有的图片资源，我们可以进行适当的压缩
对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力。
⑹. 开启GZip压缩
拆完包之后，我们再用gzip做一下压缩 安装compression-webpack-plugin
nmp i compression-webpack-plugin -D
在vue.congig.js中引入并修改webpack配置
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
}
}
在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件 我的服务器是用express框架搭建的 只要安装一下compression就能使用
const compression = require('compression')
app.use(compression()) // 在其他中间件使用之前调用
⑺. 使用SSR
SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器
从头搭建一个服务端渲染是很复杂的，vue应用建议使用Nuxt.js实现服务端渲染
八、为什么data属性是一个函数而不是一个对象？
1. 实例和组件定义data的区别
vue实例的时候定义data属性既可以是一个对象，也可以是一个函数
const app = new Vue({
el:"#app",
// 对象格式
data:{
foo:"foo"
},
// 函数格式
data(){
return {
foo:"foo"
}
}
})
组件中定义data属性，只能是一个函数
如果为组件data直接定义为一个对象，则会得到警告信息
返回的data应该是一个函数在每一个组件实例中
2. 组件data定义函数与对象的区别
-
采用对象的形式，会导致组件 A、B共用了同一个内存地址，A修改的内容，同样对B产生了影响
-
如果我们采用函数的形式，则不会出现这种情况（函数返回的对象内存地址并不相同）
-
vue组件可能会有很多个实例，采用函数返回一个全新data形式，使每个实例对象的数据不会受到其他实例对象数据的污染
3. 组件data定义函数与对象的区别
- 根实例对象
data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况 - 组件实例对象
data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象
九、动态给vue的data添加一个新的属性时会发生什么？怎样解决？
1. 直接添加属性的问题
定义一个p标签，通过v-for指令进行遍历
然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行
<p v-for="(value,key) in item" :key="key">
{{ value }}
</p>
<button @click="addProperty">动态添加新属性</button>
实例化一个vue实例，定义data属性和methods方法
const app = new Vue({
el:"#app",
data:()=>{
item:{
oldProperty:"旧属性"
}
},
methods:{
addProperty(){
this.items.newProperty = "新属性" // 为items添加新属性
console.log(this.items) // 输出带有newProperty的items
}
}
})
点击按钮，发现结果不及预期，数据虽然更新了（console打印出了新属性），但页面并没有更新
2. 原理分析
vue2是用过Object.defineProperty实现数据响应式
当我们访问foo属性或者设置foo值的时候都能够触发setter与getter
但是我们为obj添加新属性的时候，却无法触发事件属性的拦截
原因是一开始obj的foo属性被设成了响应式数据，而bar是后面新增的属性，并没有通过Object.defineProperty设置成响应式数据
3. 解决方案
Vue 不允许在已经创建的实例上动态添加新的响应式属性，若想实现数据与视图同步更新，可采取下面三种解决方案：
- Vue.set()
- Object.assign()
- $forcecUpdated()
⑴. Vue.set()
Vue.set( target, propertyName/index, value )
参数：
- Object | Array} target
- {string | number} propertyName/index
- {any} value
这里无非再次调用
defineReactive方法，实现新增属性的响应式，关于defineReactive方法，内部还是通过Object.defineProperty实现属性拦截
⑵. Object.assign()
直接使用Object.assign()添加到对象的新属性不会触发更新
应创建一个新的对象，合并原对象和混入对象的属性
this.someObject = Object.assign({},this.someObject,{newProperty1:1,newProperty2:2 ...})
⑶. $forceUpdate
如果你发现你自己需要在 Vue中做一次强制更新，99.9% 的情况，是你在某个地方做错了事
$forceUpdate迫使Vue 实例重新渲染
PS：仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
使用场景：
- 如果为对象添加少量的新属性，可以直接采用Vue.set()
- 如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象
- 如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)
PS：vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式
十、Vue中组件和插件有什么区别？
1. 组件是什么
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件
组件的优势
- 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
- 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
- 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级
2. 插件是什么
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制；一般有下面几种：
- 添加全局方法或者属性。如: vue-custom-element
- 添加全局资源：指令/过滤器/过渡等。如 vue-touch
- 通过全局混入来添加一些组件选项。如vue-router
- 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
- 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router
3. 两者的区别
两者的区别主要表现在以下几个方面：
- 编写形式
- 注册形式
- 使用场景
⑴. 编写形式
编写组件
编写一个组件，可以有很多方式，我们最常见的就是vue单文件的这种格式，每一个.vue文件我们都可以看成是一个组件
vue文件标准格式
<template>
template>
<script>
export default{
...
}
script>
<style>
style>
我们还可以通过template属性来编写一个组件，如果组件内容多，我们可以在外部定义template组件内容，如果组件内容并不多，我们可直接写在template属性上
<template id="testComponent"> // 组件显示的内容
<div>component!div>
template>
Vue.component('componentA',{
template: '#testComponent'
template: `<div>componentdiv>` // 组件内容少可以通过这种形式
})
编写插件
vue插件的实现应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
⑵. 注册形式
组件注册
vue组件注册主要分为全局注册与局部注册
全局注册通过Vue.component方法，第一个参数为组件的名称，第二个参数为传入的配置项
Vue.component('my-component-name', { /* ... */ })
局部注册只需在用到的地方通过components属性注册一个组件
const component1 = {...} // 定义一个组件
export default {
components:{
component1 // 局部注册
}
}
插件注册
插件的注册通过Vue.use()的方式进行注册（安装），第一个参数为插件的名字，第二个参数是可选择的配置项
Vue.use(插件名字,{ /* ... */} )
注意的是：注册插件的时候，需要在调用 new Vue() 启动应用之前完成
Vue.use会自动阻止多次注册相同插件，只会注册一次
⑶. 使用场景
组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue
插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身
简单来说，插件就是指对Vue的功能的增强或补充
十一、Vue组件之间的通信方式都有哪些？
1. 组件间通信的概念
广义上，任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的；举个栗子我们在使用UI框架中的table组件，可能会往table组件中传入某些数据，这个本质就形成了组件之间的通信
2. 组件间通信解决了什么
每个组件之间的都有独自的作用域，组件间的数据是无法共享的。但实际开发工作中我们常常需要让组件之间共享数据，这也是组件通信的目的要让它们互相之间能进行通讯，这样才能构成一个有机的完整系统
3. 组件间通信解决了什么
组件间通信的分类可以分成以下：
- 父子组件之间的通信
- 兄弟组件之间的通信
- 祖孙与后代组件之间的通信
- 非关系组件间之间的通信
关系图:
4. 组件间通信的方案
整理vue中8种常规的通信方案
- 通过 props 传递
- 通过 $emit 触发自定义事件
- 使用 ref
- EventBus
- p a r e n t 或 parent 或 parent或root
- attrs 与 listeners
- Provide 与 Inject
- Vuex
- props
总结：
- 父子关系的组件数据传递选择
props与$emit进行传递，也可选择ref - 兄弟关系的组件数据传递可选择
bus，其次可以选择$parent进行传递 - 祖先与后代组件数据传递可选择
attrs与listeners或者Provide与Inject - 复杂关系的组件数据传递可以通过
vuex存放共享的变量
⑴. props传递数据
- 适用场景：父组件传递数据给子组件
- 子组件设置props属性，定义接收父组件传递过来的参数
- 父组件在使用子组件标签中通过字面量来传递值
Children.vue
props:{
// 字符串形式
name:String // 接收的类型参数
// 对象形式
age:{
type:Number, // 接收的类型为数值
defaule:18, // 默认值为18
require:true // age属性必须传递
}
}
Father.vue组件
<Children name="jack" age=18 />
⑵. $emit 触发自定义事件
- 适用场景：子组件传递数据给父组件
- 子组件通过 e m i t 触 发 自 定 义 事 件 ， emit触发自定义事件， emit触发自定义事件，emit第二个参数为传递的数值
- 父组件绑定监听器获取到子组件传递过来的参数
Chilfen.vue
this.$emit('add', good)
Father.vue
<Children @add="cartAdd($event)" />
⑶. ref
- 父组件在使用子组件的时候设置ref
- 父组件通过设置子组件ref来获取数据
父组件
<Children ref="foo" />
this.$refs.foo // 获取子组件实例，通过子组件实例我们就能拿到对应的数据
⑷. EventBus
- 使用场景：兄弟组件传值
- 创建一个中央事件总线EventBus
- 兄弟组件通过 e m i t 触 发 自 定 义 事 件 ， emit触发自定义事件， emit触发自定义事件，emit第二个参数为传递的数值
- 另一个兄弟组件通过$on监听自定义事件
Bus.js
// 创建一个中央时间总线类
class Bus {
constructor() {
this.callbacks = {}; // 存放事件的名字
}
$on(name, fn) {
this.callbacks[name] = this.callbacks[name] || [];
this.callbacks[name].push(fn);
}
$emit(name, args) {
if (this.callbacks[name]) {
this.callbacks[name].forEach((cb) => cb(args));
}
}
}
// main.js
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上
// 另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能
Children1.vue
this.$bus.$emit('foo')
Children2.vue
this.$bus.$on('foo', this.handle)
⑸. p a r e n t 或 parent 或 parent或 root
通过共同祖辈 p a r e n t 或 者 parent或者 parent或者root搭建通信桥连
兄弟组件
this.$parent.on('add',this.add)
另一个兄弟组件
this.$parent.emit('add')
⑹. a t t r s 与 attrs 与 attrs与 listeners
- 适用场景：祖先传递数据给子孙
- 设置批量向下传属性$attrs和 $listeners
- 包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
- 可以通过 v-bind="$attrs" 传⼊内部组件
// child：并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>
// 给Grandson隔代传值，communication/index.vue
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>
// Child2做展开
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
// Grandson使⽤
<div @click="$emit('some-event', 'msg from grandson')">
{{msg}}
</div>
⑺. provide 与 inject
- 祖先组件定义provide属性，返回传递的值
- 在后代组件通过inject接收组件传递过来的值
祖先组件
provide(){
return {
foo:'foo'
}
}
后代组件
inject:['foo'] // 获取到祖先组件传递过来的值
⑻. vuex
- 适用场景: 复杂关系的组件数据传递
- Vuex作用相当于一个用来存储共享变量的容器
state用来存放共享变量的地方getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值mutations用来存放修改state的方法。actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作
十二、双向数据绑定是什么？
1. 什么是双向绑定
先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子
当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下
2. 双向绑定的原理是什么
双向绑定由三个重要部分构成
数据层（Model）：应用的数据及业务逻辑
视图层（View）：应用的展示效果，各类UI组件
业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来
理解ViewModel
- 数据变化后更新视图
- 视图变化后更新数据
两个主要部分组成：
- 监听器（Observer）：对所有数据的属性进行监听
- 解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数
3. 实现双向绑定
- new Vue()首先执行初始化，对data执行响应化处理，这个过程发生Observe中
- 同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Compile中
- 同时定义⼀个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数
- 由于data的某个key在⼀个视图中可能出现多次，所以每个key都需要⼀个管家Dep来管理多个Watcher
- 将来data中数据⼀旦发生变化，会首先找到对应的Dep，通知所有Watcher执行更新函数
十三、Vue中的$nextTick有什么作用？
1. NextTick是什么
官方对其的定义： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新
为什么要有nexttick
{{num}}
for(let i=0; i<100000; i++){
num = i
}
如果没有 nextTick 更新机制，那么 num 每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图)，有了nextTick机制，只需要更新一次，所以nextTick本质是一种优化策略
2. 使用场景
如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()
第一个参数为：回调函数（可以获取最近的DOM结构）
第二个参数为：执行函数上下文
// 修改数据
vm.message = '修改后的值'
// DOM 还没有更新
console.log(vm.$el.textContent) // 原始的值
Vue.nextTick(function () {
// DOM 更新了
console.log(vm.$el.textContent) // 修改后的值
})
组件内使用 vm. n e x t T i c k ( ) 实 例 方 法 只 需 要 通 过 t h i s . nextTick() 实例方法只需要通过this. nextTick()实例方法只需要通过this.nextTick()，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上
this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '修改后的值'
})
$nextTick() 会返回一个 Promise 对象，可以是用async/await完成相同作用的事情
this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
await this.$nextTick()
console.log(this.$el.textContent) // => '修改后的值'
3. 实现原理
callbacks也就是异步操作队列
callbacks新增回调函数后又执行了timerFunc函数，pending是用来标识同一个时间只能执行一次
- 把回调函数放入callbacks等待执行
- 将执行函数放到微任务或者宏任务中
- 事件循环到了微任务或者宏任务，执行函数依次执行callbacks中的回调
十四、你对vue的mixin的理解，有什么应用场景？
1. mixin是什么
Mixin是面向对象程序设计语言中的类，提供了方法的实现。
其他类可以访问mixin类的方法而不必成为其子类
Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂
Vue中的mixin
官方定义：mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等
我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来
在Vue中我们可以局部混入跟全局混入
局部混入
定义一个mixin对象，有组件options的data、methods属性
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
组件通过mixins属性调用mixin对象
Vue.component('componentA',{
mixins: [myMixin]
})
该组件在使用的时候，混合了mixin里面的方法，在自动执行create生命钩子，执行hello方法
全局混入
通过Vue.mixin()进行全局的混入
Vue.mixin({
created: function () {
console.log("全局混入")
}
})
使用全局混入需要特别注意，因为它会影响到每一个组件实例（包括第三方组件）
注意事项：
当组件存在与mixin对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖mixin的选项
但是如果相同选项为生命周期钩子的时候，会合并成一个数组，先执行mixin的钩子，再执行组件的钩子
2. 使用场景
在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立
这时，可以通过Vue的mixin功能将相同或者相似的代码提出来
3. 源码分析
- 优先递归处理 mixins
- 先遍历合并parent 中的key，调用mergeField方法进行合并，然后保存在变量options
- 再遍历 child，合并补上 parent 中没有的key，调用mergeField方法进行合并，保存在变量options
- 通过 mergeField 函数进行了合并
Vue的几种类型的合并策略
- 替换型策略有props、methods、inject、computed，就是将新的同名参数替代旧的参数
- 合并型策略是data, 通过set方法进行合并和重新赋值
- 队列型策略有生命周期函数和watch，原理是将函数存入一个数组，然后正序遍历依次执行
- 叠加型有component、directives、filters，通过原型链进行层层的叠加
十五、说说你对slot的理解？slot使用场景有哪些？
1. slot是什么
在HTML中 slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符
该占位符可以在后期使用自己的标记语言填充
Slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口
可以将其类比为插卡式的FC游戏机，游戏机暴露卡槽（插槽）让用户插入不同的游戏磁条（自定义内容）
2. 使用场景
- 通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理
- 如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情
- 通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用
- 比如布局组件、表格列、下拉选、弹框显示内容等
3. 分类
slot可以分来以下三种：
- 默认插槽
- 具名插槽
- 作用域插槽
⑴. 默认插槽
子组件用标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面
父组件在使用的时候，直接在子组件的标签内写入内容即可
子组件Child.vue
<template>
<slot>
<p>插槽后备的内容</p>
</slot>
</template>
父组件
<Child>
<div>默认插槽</div>
</Child>
⑵. 具名插槽
子组件用name属性来表示插槽的名字，不传为默认插槽
父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值
子组件Child.vue
<template>
<slot>插槽后备的内容</slot>
<slot name="content">插槽后备的内容</slot>
</template>
父组件
<child>
<template v-slot:default>具名插槽</template>
<!-- 具名插槽⽤插槽名做参数 -->
<template v-slot:content>内容...</template>
</child>
⑶. 作用域插槽
子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上
父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用
子组件Child.vue
<template>
<slot name="footer" testProps="子组件的值">
<h3>没传footer插槽</h3>
</slot>
</template>
父组件
<child>
<!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
<template v-slot:default="slotProps">
来⾃⼦组件数据：{{slotProps.testProps}}
</template>
<template #default="slotProps">
来⾃⼦组件数据：{{slotProps.testProps}}
</template>
</child>
- v-slot属性只能在上使用，但在只有默认插槽时可以在组件标签上使用
- 默认插槽名为default，可以省略default直接写v-slot
- 缩写为#时不能不写参数，写成#default
- 可以通过解构获取v-slot={user}，还可以重命名v-slot="{user: newName}“和定义默认值v-slot=”{user = ‘默认值’}"
十六、Vue.observable你有了解过吗？说说看
1. Observable 是什么
Observable 翻译过来我们可以理解成可观察的；Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器
Vue.observable({ count : 1})
其作用等同于
new vue({ count : 1})
在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更，它和被返回的对象是同一个对象
在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的
2. 使用场景
在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，observable就是一个很好的选择
创建一个js文件
// 引入vue
import Vue from 'vue
// 创建state对象，使用observable让state对象可响应
export let state = Vue.observable({
name: '张三',
'age': 38
})
// 创建对应的方法
export let mutations = {
changeName(name) {
state.name = name
},
setAge(age) {
state.age = age
}
}
在.vue文件中直接使用即可
<template>
<div>
姓名：{{ name }}
年龄：{{ age }}
<button @click="changeName('李四')">改变姓名</button>
<button @click="setAge(18)">改变年龄</button>
</div>
</template>
import { state, mutations } from '@/store
export default {
// 在计算属性中拿到值
computed: {
name() {
return state.name
},
age() {
return state.age
}
},
// 调用mutations里面的方法，更新数据
methods: {
changeName: mutations.changeName,
setAge: mutations.setAge
}
}
十七、你知道vue中key的原理吗？说说你对它的理解
1. Key是什么
开始之前，我们先还原两个实际工作场景
-
当我们在使用v-for时，需要给单元加上key
<ul> <li v-for="item in items" :key="item.id">...</li> </ul> -
用+new Date()生成的时间戳作为key，手动强制触发重新渲染
<Comp :key="+new Date()" />
场景背后的逻辑
key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点
当我们在使用v-for时，需要给单元加上key
- 如果不用
key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。 - 如果使用了
key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed
用+new Date()生成的时间戳作为key，手动强制触发重新渲染
- 当拥有新值的rerender作为key时，拥有了新key的Comp出现了，那么旧key Comp会被移除，新key Comp触发渲染
2. 设置key与不设置key区别
设置key能够大大减少对页面的DOM操作，提高了diff效率
设置key值一定能提高diff效率吗？
其实不然，文档中也明确表示
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升
十八、说说你对keep-alive的理解是什么？
1. Keep-alive 是什么
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive可以设置以下props属性：
- include - 字符串或正则表达式。只有名称匹配的组件会被缓存
- exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
- max - 数字。最多可以缓存多少组件实例
关于keep-alive的基本用法：
<keep-alive>
<component :is="view"></component>
</keep-alive>
使用includes和exclude：
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配
设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：
- 首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > … … > beforeRouteLeave > deactivated
- 再次进入组件时：beforeRouteEnter >activated > … … > beforeRouteLeave > deactivated
2. 使用场景
使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive
举个栗子:
当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive
从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive
在路由中设置keepAlive属性判断是否需要缓存
{
path: 'list',
name: 'itemList', // 列表页
component (resolve) {
require(['@/pages/item/list'], resolve)
},
meta: {
keepAlive: true,
title: '列表页'
}
}
使用
<div id="app" class='wrapper'>
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
3. 原理分析
keep-alive是vue中内置的一个组件
4. 思考题：缓存后如何获取数据
解决方案可以有以下两种： beforeRouteEnter、actived
beforeRouteEnter
每次组件渲染的时候，都会执行beforeRouteEnter
beforeRouteEnter(to, from, next){
next(vm=>{
console.log(vm)
// 每次进入路由执行
vm.getData() // 获取数据
})
},
actived
在keep-alive缓存的组件被激活的时候，都会执行actived钩子
activated(){
this.getData() // 获取数据
},
十九、Vue常用的修饰符有哪些有什么应用场景
1. 修饰符是什么
在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号
在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理
vue中修饰符分为以下五种：
- 表单修饰符
- 事件修饰符
- 鼠标按键修饰符
- 键值修饰符
- v-bind修饰符
2. 修饰符的作用
⑴. 表单修饰符
在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model
关于表单的修饰符有如下：
- lazy
- trim
- number
lazy
在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
trim
自动过滤用户输入的首空格字符，而中间的空格不会过滤
<input type="text" v-model.trim="value">
number
自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值
<input v-model.number="age" type="number">
⑵. 事件修饰符
事件修饰符是对事件捕获以及目标进行了处理，有如下修饰符：
- stop
- prevent
- self
- once
- capture
- passive
- native
stop
阻止了事件冒泡，相当于调用了event.stopPropagation方法
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
//只输出1
prevent
阻止了事件的默认行为，相当于调用了event.preventDefault方法
<form v-on:submit.prevent="onSubmit"></form>
self
只当在 event.target 是当前元素自身时触发处理函数
<div v-on:click.self="doThat">...</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用
v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击
once
绑定了事件以后只能触发一次，第二次就不会触发
<button @click.once="shout(1)">ok</button>
capture
使事件触发从包含这个元素的顶层开始往下触发
<div @click.capture="shout(1)">
obj1
<div @click.capture="shout(2)">
obj2
<div @click="shout(3)">
obj3
<div @click="shout(4)">
obj4
</div>
</div>
</div>
</div>
// 输出结构: 1 2 4 3
passive
在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
不要把
.passive和.prevent一起使用,因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。
passive会告诉浏览器你不想阻止事件的默认行为
native
让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件
<my-component v-on:click.native="doSomething"></my-component>
使用.native修饰符来操作普通HTML标签是会令事件失效的
⑶. 鼠标按钮修饰符
鼠标按钮修饰符针对的就是左键、右键、中键点击，有如下：
- left 左键点击
- right 右键点击
- middle 中键点击
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>
⑷. 键盘修饰符
键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，keyCode存在很多，但vue为我们提供了别名，分为以下两种：
- 普通键（enter、tab、delete、space、esc、up…）
- 系统修饰键（ctrl、alt、meta、shift…）
// 只有按键为keyCode的时候才触发
<input type="text" @keyup.keyCode="shout()">
还可以通过以下方式自定义一些全局的键盘码别名
Vue.config.keyCodes.f2 = 113
⑸. v-bind修饰符
v-bind修饰符主要是为属性进行操作，用来分别有如下：
- async
- prop
- camel
async
能对props进行一个双向绑定
//父组件
<comp :myMessage.sync="bar"></comp>
//子组件
this.$emit('update:myMessage',params);
以上这种方法相当于以下的简写
//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
this.bar = e;
}
//子组件js
func2(){
this.$emit('update:myMessage',params);
}
- 使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致
- 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用
- 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的
props
设置自定义标签属性，避免暴露数据，防止污染HTML结构
<input id="uid" title="title1" value="1" :index.prop="index">
camel
将命名变为驼峰命名法，如将view-Box属性名转换为 viewBox
<svg :viewBox="viewBox"></svg>
3. 应用场景
根据每一个修饰符的功能，我们可以得到以下修饰符的应用场景：
- .stop：阻止事件冒泡
- .native：绑定原生事件
- .once：事件只执行一次
- .self ：将事件绑定在自身身上，相当于阻止事件冒泡
- .prevent：阻止默认事件
- .caption：用于事件捕获
- .once：只触发一次
- .keyCode：监听特定键盘按下
- .right：右键
二十、你有写过自定义指令吗？自定义指令的应用场景有哪些？
1. 什么是指令
指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力
- 在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统
- 我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能
- 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令
指令使用的几种方式：
//会实例化一个指令，但这个指令没有参数
`v-xxx`
// -- 将值传到指令中
`v-xxx="value"`
// -- 将字符串传入到指令中，如`v-html="'内容
'"`
`v-xxx="'string'"`
// -- 传参数（`arg`），如`v-bind:class="className"`
`v-xxx:arg="value"`
// -- 使用修饰符（`modifier`）
`v-xxx:arg.modifier="value"`
2. 如何实现
注册一个自定义指令有全局注册与局部注册
全局注册主要是通过Vue.directive方法进行注册
Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
}
})
局部注册通过在组件options选项中设置directive属性
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
}
}
}
然后你可以在模板中任何元素上使用新的 v-focus property，如下：
<input v-focus />
自定义指令也像组件那样存在钩子函数：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
- unbind：只调用一次，指令与元素解绑时调用
所有的钩子函数的参数都有以下：
- el：指令所绑定的元素，可以用来直接操作 DOM
- binding：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }
- vnode：Vue 编译生成的虚拟节点
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行
举个栗子：
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
<script>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // "white"
console.log(binding.value.text) // "hello!"
})
</script>
3. 应用场景
使用自定义指令可以满足我们日常一些场景，这里给出几个自定义指令的案例：
- 防抖
- 图片懒加载
- 一键 Copy的功能
⑴. 输入框防抖
防抖这种情况设置一个v-throttle自定义指令来实现
举个例子：
// 1.设置v-throttle自定义指令
Vue.directive('throttle', {
bind: (el, binding) => {
let throttleTime = binding.value; // 防抖时间
if (!throttleTime) { // 用户若不设置防抖时间，则默认2s
throttleTime = 2000;
}
let cbFun;
el.addEventListener('click', event => {
if (!cbFun) { // 第一次执行
cbFun = setTimeout(() => {
cbFun = null;
}, throttleTime);
} else {
event && event.stopImmediatePropagation();
}
}, true);
},
});
// 2.为button标签设置v-throttle自定义指令
<button @click="sayHello" v-throttle>提交</button>
⑵. 图片懒加载
设置一个v-lazy自定义指令完成图片懒加载
const LazyLoad = {
// install方法
install(Vue,options){
// 代替图片的loading图
let defaultSrc = options.default;
Vue.directive('lazy',{
bind(el,binding){
LazyLoad.init(el,binding.value,defaultSrc);
},
inserted(el){
// 兼容处理
if('IntersectionObserver' in window){
LazyLoad.observe(el);
}else{
LazyLoad.listenerScroll(el);
}
},
})
},
// 初始化
init(el,val,def){
// data-src 储存真实src
el.setAttribute('data-src',val);
// 设置src为loading图
el.setAttribute('src',def);
},
// 利用IntersectionObserver监听el
observe(el){
let io = new IntersectionObserver(entries => {
let realSrc = el.dataset.src;
if(entries[0].isIntersecting){
if(realSrc){
el.src = realSrc;
el.removeAttribute('data-src');
}
}
});
io.observe(el);
},
// 监听scroll事件
listenerScroll(el){
let handler = LazyLoad.throttle(LazyLoad.load,300);
LazyLoad.load(el);
window.addEventListener('scroll',() => {
handler(el);
});
},
// 加载真实图片
load(el){
let windowHeight = document.documentElement.clientHeight
let elTop = el.getBoundingClientRect().top;
let elBtm = el.getBoundingClientRect().bottom;
let realSrc = el.dataset.src;
if(elTop - windowHeight<0&&elBtm > 0){
if(realSrc){
el.src = realSrc;
el.removeAttribute('data-src');
}
}
},
// 节流
throttle(fn,delay){
let timer;
let prevTime;
return function(...args){
let currTime = Date.now();
let context = this;
if(!prevTime) prevTime = currTime;
clearTimeout(timer);
if(currTime - prevTime > delay){
prevTime = currTime;
fn.apply(context,args);
clearTimeout(timer);
return;
}
timer = setTimeout(function(){
prevTime = Date.now();
timer = null;
fn.apply(context,args);
},delay);
}
}
}
export default LazyLoad;
⑶. 一键 Copy的功能
import { Message } from 'ant-design-vue';
const vCopy = { //
/*
bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置
el: 作用的 dom 对象
value: 传给指令的值，也就是我们要 copy 的值
*/
bind(el, { value }) {
el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
el.handler = () => {
if (!el.$value) {
// 值为空的时候，给出提示，我这里的提示是用的 ant-design-vue 的提示，你们随意
Message.warning('无复制内容');
return;
}
// 动态创建 textarea 标签
const textarea = document.createElement('textarea');
// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
textarea.readOnly = 'readonly';
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
// 将要 copy 的值赋给 textarea 标签的 value 属性
textarea.value = el.$value;
// 将 textarea 插入到 body 中
document.body.appendChild(textarea);
// 选中值并复制
textarea.select();
// textarea.setSelectionRange(0, textarea.value.length);
const result = document.execCommand('Copy');
if (result) {
Message.success('复制成功');
}
document.body.removeChild(textarea);
};
// 绑定点击事件，就是所谓的一键 copy 啦
el.addEventListener('click', el.handler);
},
// 当传进来的值更新的时候触发
componentUpdated(el, { value }) {
el.$value = value;
},
// 指令与元素解绑的时候，移除事件绑定
unbind(el) {
el.removeEventListener('click', el.handler);
},
};
export default vCopy;
关于自定义指令还有很多应用场景，如：拖拽指令、页面水印、权限校验等等应用场景
二十一、Vue中的过滤器了解吗？过滤器的应用场景有哪些？
1. 是什么
- 过滤器（filter）是输送介质管道上不可缺少的一种装置，就是把一些不必要的东西过滤掉
- 过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数
- Vue 允许你自定义过滤器，可被用于一些常见的文本格式化
- ps: Vue3中已废弃filter
2. 如何用
vue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，过滤器应该被添加在 JavaScript表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
- 部过滤器优先于全局过滤器被调用
- 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
3. 应用场景
平时开发中，需要用到过滤器的地方有很多，比如单位转换、数字打点、文本格式化、时间格式化之类的等
比如我们要实现将30000 => 30,000，这时候我们就需要使用过滤器
Vue.filter('toThousandFilter', function (value) {
if (!value) return ''
value = value.toString()
return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,')
})
4. 原理分析
- 在编译阶段通过parseFilters将过滤器编译成函数调用（串联过滤器则是一个嵌套的函数调用，前一个过滤器执行的结果是后一个过滤器函数的参数）
- 编译后通过调用resolveFilter函数找到对应过滤器并返回结果
- 执行结果作为参数传递给toString函数，而toString执行后，其结果会保存在Vnode的text属性中，渲染到视图
二十二、什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路
1. 什么是虚拟DOM
- 虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）
- 实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上
- 在Javascript对象中，虚拟DOM 表现为一个 Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别
- 创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应
定义真实DOM:
<div id="app">
<p class="p">节点内容</p>
<h3>{{ foo }}</h3>
</div>
实例化vue
const app = new Vue({
el:"#app",
data:{
foo:"foo"
}
})
观察render的render，我们能得到虚拟DOM
(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
[_v("节点内容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})
通过VNode，vue可以对这颗抽象树进行创建节点,删除节点以及修改节点的操作， 经过diff算法得出一些需要修改的最小单位,再更新视图，减少了dom操作，提高了性能
2. 为什么需要虚拟DOM
- DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的
- 很多人认为虚拟 DOM 最大的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。虽然这一个虚拟 DOM 带来的一个优势，但并不是全部。
- 虚拟 DOM 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不仅仅局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，可以是近期很火热的小程序，也可以是各种GUI
3. 如何实现虚拟DOM
createElement 创建 VNode 的过程，每个 VNode 有 children，children 每个元素也是一个VNode，这样就形成了一个虚拟树结构，用于描述真实的DOM树结构
createComponent生成VNode的三个关键流程：
- 构造子类构造函数Ctor
- installComponentHooks安装组件钩子函数
- 实例化 vnode
二十三、你了解vue的diff算法吗？说说看
1. 是什么
diff 算法是一种通过同层的树节点进行比较的高效算法
其有两个特点：
- 比较只会在同层级进行, 不会跨层级比较
- 在diff比较的过程中，循环从两边向中间比较
diff 算法在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较
2. 比较方式
diff整体策略为：深度优先，同层比较
-
比较只会在同层级进行, 不会跨层级比较
-
比较的过程中，循环从两边向中间收拢
3. 原理分析
当数据发生改变时，set方法会调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图
总结：
- 当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
- 通过isSameVnode进行判断，相同则调用patchVnode方法
- patchVnode做了以下操作：
- 找到对应的真实dom，称为el
- 如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
- 如果oldVnode有子节点而VNode没有，则删除el子节点
- 如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
- 如果两者都有子节点，则执行updateChildren函数比较子节点
- updateChildren主要做了以下操作：
- 设置新旧VNode的头尾指针
- 新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作
二十四、Vue项目中有封装过axios吗？主要是封装哪方面的？
1. axios是什么
axios 是一个轻量的 HTTP客户端
基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选
特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON 数据
- 客户端支持防御XSRF
基本使用
// 项目中安装
npm install axios --S
// cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// 导入
import axios from 'axios'
发送请求
axios({
url:'xxx', // 设置请求的地址
method:"GET", // 设置请求方法
params:{ // get请求使用params进行参数凭借,如果是post请求用data
type: '',
page: 1
}
}).then(res => {
// res为后端返回的数据
console.log(res);
})
并发请求axios.all([])
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (res1, res2) {
// res1第一个请求的返回的内容，res2第二个请求返回的内容
// 两个请求都执行完成才会执行
}));
2. 为什么要封装
axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。
不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍
这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用
3. 如何封装
封装的同时，你需要和 后端协商好一些约定，请求头，状态码，请求超时时间…
- 设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分
- 请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)
- 状态码: 根据接口返回的不同status ， 来执行不同的业务，这块需要和后端约定好
- 请求方法：根据get、post等方法进行一个再次封装，使用起来更为方便
- 请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问
- 响应拦截器： 这块就是根据 后端`返回来的状态码判定执行不同业务
设置接口请求前缀
利用node环境变量来作判断，用来区分开发、测试、生产环境
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = 'http://prod.xxx.com'
}
在本地调试的时候，还需要在vue.config.js文件中配置devServer实现代理转发，从而实现跨域
devServer: {
proxy: {
'/proxyApi': {
target: 'http://dev.xxx.com',
changeOrigin: true,
pathRewrite: {
'/proxyApi': ''
}
}
}
}
设置请求头与超时时间
大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置
const service = axios.create({
...
timeout: 30000, // 请求 30s 超时
headers: {
get: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
// 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
},
post: {
'Content-Type': 'application/json;charset=utf-8'
// 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
}
},
})
封装请求方法
先引入封装好的方法，在要调用的接口重新封装成一个方法暴露出去
// get 请求
export function httpGet({
url,
params = {}
}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params
}).then((res) => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
// post
// post请求
export function httpPost({
url,
data = {},
params = {}
}) {
return new Promise((resolve, reject) => {
axios({
url,
method: 'post',
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
// 发送的数据
data,
// url参数
params
}).then(res => {
resolve(res.data)
})
})
}
把封装的方法放在一个api.js文件中
import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })
页面中就能直接调用
// .vue
import { getorglist } from '@/assets/js/api'
getorglist({ id: 200 }).then(res => {
console.log(res)
})
这样可以把api统一管理起来，以后维护修改只需要在api.js文件操作即可
请求拦截器
请求拦截器可以在每个请求里加上token，做了统一处理后维护起来也方便
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token
// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
token && (config.headers.Authorization = token)
return config
},
error => {
return Promise.error(error)
})
响应拦截器
响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权
// 响应拦截器
axios.interceptors.response.use(response => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
if (response.data.code === 511) {
// 未授权调取授权接口
} else if (response.data.code === 510) {
// 未登录跳转登录页
} else {
return Promise.resolve(response)
}
} else {
return Promise.reject(response)
}
}, error => {
// 我们可以在这里对异常状态作统一处理
if (error.response.status) {
// 处理请求失败的情况
// 对不同返回码对相应处理
return Promise.reject(error.response)
}
})
总结：
- 封装是编程中很有意义的手段，简单的axios封装，就可以让我们可以领略到它的魅力
- 封装 axios 没有一个绝对的标准，只要你的封装可以满足你的项目需求，并且用起来方便，那就是一个好的封装方案
二十五、SSR解决了什么问题？有做过SSR吗？你是怎么做的？
1. 是什么
Server-Side Rendering 我们称其为SSR，意为服务端渲染
指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程
先来看看Web3个阶段的发展史：
- 传统服务端渲染SSR
- 单页面应用SPA
- 服务端渲染SSR
⑴. 传统web开发
网页内容在服务端渲染完成，⼀次性传输到浏览器
打开页面查看源码，浏览器拿到的是全部的dom结构
⑵. 单页应用SPA
单页应用优秀的用户体验，使其逐渐成为主流，页面内容由JS渲染出来，这种方式称为客户端渲染
打开页面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容
⑶. 服务端渲染SSR
SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行
Vue官方对SSR的解释：
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行
- Vue SSR是一个在SPA上进行改良的服务端渲染
- 通过Vue SSR渲染的页面，需要在客户端激活才能实现交互
- Vue SSR将包含两部分：服务端渲染的首屏，包含交互的SPA
2. 是什么
SSR主要解决了以下两种问题：
- seo：搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务想关联的HTML，有利于seo
- 首屏呈现渲染：用户无需等待页面所有js加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）
但是使用SSR同样存在以下的缺点：
- 复杂度：整个项目的复杂度
- 库的支持性，代码兼容
- 性能问题
- 每个请求都是n个实例的创建，不然会污染，消耗会变得很大
- 缓存 node serve、 nginx判断当前用户有没有过期，如果没过期的话就缓存，用刚刚的结果。
- 降级：监控cpu、内存占用过多，就spa，返回单个的壳
- 服务器负载变大，相对于前后端分离务器只需要提供静态资源来说，服务器负载更大，所以要慎重使用
所以在我们选择是否使用SSR前，我们需要慎重问问自己这些问题：
- 需要SEO的页面是否只是少数几个，这些是否可以使用预渲染（Prerender SPA Plugin）实现
- 首屏的请求响应逻辑是否复杂，数据返回是否大量且缓慢
3. 如何实现
- 对于同构开发，我们依然使用webpack打包，我们要解决两个问题：服务端首屏渲染和客户端激活
- 这里需要生成一个服务器bundle文件用于服务端首屏渲染和一个客户端bundle文件用于客户端激活
总结： - 使用ssr不存在单例模式，每次用户请求都会创建一个新的vue实例
- 实现ssr需要实现服务端首屏渲染和客户端激活
- 服务端异步获取数据asyncData可以分为首屏异步获取和切换组件获取
- 首屏异步获取数据，在服务端预渲染的时候就应该已经完成
- 切换组件通过mixin混入，在beforeMount钩子完成数据获取
二十六、说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？
1. 为什么要划分
使用vue构建项目，项目结构清晰会提高开发效率，熟悉项目的各种配置同样会让开发效率更高
- 在划分项目结构的时候，需要遵循一些基本的原则：
- 文件夹和文件夹内部文件的语义一致性
- 单一入口/出口
- 就近原则，紧耦合的文件应该放到一起，且应以相对路径引用
- 公共的文件应该以绝对路径的方式从根目录引用
/src外的文件不应该被引入
⑴. 文件夹和文件夹内部文件的语义一致性
我们的目录结构都会有一个文件夹是按照路由模块来划分的，如pages文件夹，这个文件夹里面应该包含我们项目所有的路由模块，并且仅应该包含路由模块，而不应该有别的其他的非路由模块的文件夹
这样做的好处在于一眼就从 pages文件夹看出这个项目的路由有哪些
⑵. 单一入口/出口
举个例子，在pages文件夹里面存在一个seller文件夹，这时候seller 文件夹应该作为一个独立的模块由外部引入，并且 seller/index.js 应该作为外部引入 seller 模块的唯一入口
// 错误用法
import sellerReducer from 'src/pages/seller/reducer'
// 正确用法
import { reducer as sellerReducer } from 'src/pages/seller'
这样做的好处在于，无论你的模块文件夹内部有多乱，外部引用的时候，都是从一个入口文件引入，这样就很好的实现了隔离，如果后续有重构需求，你就会发现这种方式的优点
⑶. 就近原则，紧耦合的文件应该放到一起，且应以相对路径引用
使用相对路径可以保证模块内部的独立性
// 正确用法
import styles from './index.module.scss'
// 错误用法
import styles from 'src/pages/seller/index.module.scss'
⑷. 公共的文件应该以绝对路径的方式从根目录引用
公共指的是多个路由模块共用，如一些公共的组件，我们可以放在src/components下
在使用到的页面中，采用绝对路径的形式引用
// 错误用法
import Input from '../../components/input'
// 正确用法
import Input from 'src/components/input'
同样的，如果我们需要对文件夹结构进行调整。将 /src/components/input 变成 /src/components/new/input，如果使用绝对路径，只需要全局搜索替换
再加上绝对路径有全局的语义，相对路径有独立模块的语义
⑸. /src 外的文件不应该被引入
vue-cli脚手架已经帮我们做了相关的约束了，正常我们的前端项目都会有个src文件夹，里面放着所有的项目需要的资源，js,css, png, svg 等等。src 外会放一些项目配置，依赖，环境等文件
这样的好处是方便划分项目代码文件和配置文件
3. 目录结构
单页面目录结构
project
│ .browserslistrc
│ .env.production
│ .eslintrc.js
│ .gitignore
│ babel.config.js
│ package-lock.json
│ package.json
│ README.md
│ vue.config.js
│ yarn-error.log
│ yarn.lock
│
├─public
│ favicon.ico
│ index.html
│
|-- src
|-- components
|-- input
|-- index.js
|-- index.module.scss
|-- pages
|-- seller
|-- components
|-- input
|-- index.js
|-- index.module.scss
|-- reducer.js
|-- saga.js
|-- index.js
|-- index.module.scss
|-- buyer
|-- index.js
|-- index.js
多页面目录结构
my-vue-test:.
│ .browserslistrc
│ .env.production
│ .eslintrc.js
│ .gitignore
│ babel.config.js
│ package-lock.json
│ package.json
│ README.md
│ vue.config.js
│ yarn-error.log
│ yarn.lock
│
├─public
│ favicon.ico
│ index.html
│
└─src
├─apis //接口文件根据页面或实例模块化
│ index.js
│ login.js
│
├─components //全局公共组件
│ └─header
│ index.less
│ index.vue
│
├─config //配置（环境变量配置不同passid等）
│ env.js
│ index.js
│
├─contant //常量
│ index.js
│
├─images //图片
│ logo.png
│
├─pages //多页面vue项目，不同的实例
│ ├─index //主实例
│ │ │ index.js
│ │ │ index.vue
│ │ │ main.js
│ │ │ router.js
│ │ │ store.js
│ │ │
│ │ ├─components //业务组件
│ │ └─pages //此实例中的各个路由
│ │ ├─amenu
│ │ │ index.vue
│ │ │
│ │ └─bmenu
│ │ index.vue
│ │
│ └─login //另一个实例
│ index.js
│ index.vue
│ main.js
│
├─scripts //包含各种常用配置，工具函数
│ │ map.js
│ │
│ └─utils
│ helper.js
│
├─store //vuex仓库
│ │ index.js
│ │
│ ├─index
│ │ actions.js
│ │ getters.js
│ │ index.js
│ │ mutation-types.js
│ │ mutations.js
│ │ state.js
│ │
│ └─user
│ actions.js
│ getters.js
│ index.js
│ mutation-types.js
│ mutations.js
│ state.js
│
└─styles //样式统一配置
│ components.less
│
├─animation
│ index.less
│ slide.less
│
├─base
│ index.less
│ style.less
│ var.less
│ widget.less
│
└─common
index.less
reset.less
style.less
transition.less
总结：
项目的目录结构很重要，因为目录结构能体现很多东西，怎么规划目录结构可能每个人有自己的理解，但是按照一定的规范去进行目录的设计，能让项目整个架构看起来更为简洁，更加易用
二十七、vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
1. 是什么
权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源
而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发：
- 页面加载触发
- 页面上的按钮点击触发
总的来说，所有的请求发起都触发自前端路由或视图
所以我们可以从这两方面入手，对触发权限的源头进行控制，最终要实现的目标是：
- 路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转 4xx 提示页
- 视图方面，用户只能看到自己有权浏览的内容和有权操作的控件
- 最后再加上请求控制作为最后一道防线，路由可能配置失误，按钮可能忘了加权限，这种时候请求控制可以用来兜底，越权请求将在前端被拦截
2. 如何做
前端权限控制可以分为四个方面：
- 接口权限
- 按钮权限
- 菜单权限
- 路由权限
⑴. 接口权限
接口权限目前一般采用jwt的形式来验证，没有通过的话一般返回401，跳转到登录页面重新进行登录
登录完拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token
⑵. 路由权限控制
- 初始化即挂载全部路由，并且在路由上标记相应的权限信息，每次路由跳转前做校验
- 初始化的时候先挂载不需要权限控制的路由，比如登录页，404等错误页。如果用户通过URL进行强制访问，则会直接进入404，相当于从源头上做了控制
登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由
⑶. 菜单权限
菜单权限可以理解成将页面与理由进行解耦
- 菜单与路由分离，菜单由后端返回
- 菜单和路由都由后端返回
⑷. 按钮权限
- 按钮权限也可以用v-if判断
- 通过自定义指令进行按钮权限的判断
二十八、Vue项目中你是如何解决跨域的呢？
1. 跨域是什么
跨域本质是浏览器基于同源策略的一种安全手段
同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能
所谓同源（即指在同一个域）具有以下三个相同点
- 协议相同（protocol）
- 主机相同（host）
- 端口相同（port）
反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域
一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。
2. 如何解决
解决跨域的方法有很多，下面列举了三种：
- JSONP
- CORS
- Proxy
⑴. CORS
CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应
CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源
只要后端实现了 CORS，就实现了跨域
⑵. Proxy
代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止攻击
方案一：
如果是通过vue-cli脚手架工具搭建项目，我们可以通过webpack为我们起一个本地服务器作为请求的代理对象
通过该服务器转发请求至目标服务器，得到结果再转发给前端，但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域
在vue.config.js文件，新增以下代码
amodule.exports = {
devServer: {
host: '127.0.0.1',
port: 8084,
open: true,// vue项目启动时自动打开浏览器
proxy: {
'/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
changeOrigin: true, //是否跨域
pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
'^/api': ""
}
}
}
}
}
通过axios发送请求中，配置请求的根路径
axios.defaults.baseURL = '/api'
方案二：
此外，还可通过服务端实现代理请求转发
以express框架为例
var express = require('express');
const proxy = require('http-proxy-middleware')
const app = express()
app.use(express.static(__dirname + '/'))
app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false
}));
module.exports = app
方案三：
通过配置nginx实现代理
server {
listen 80;
# server_name www.josephxia.com;
location / {
root /var/www/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://127.0.0.1:3000;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
二十九、vue项目本地开发完成后部署到服务器后报404是什么原因呢？
1. 如何部署
前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可
我们知道vue项目在构建后，是生成一系列的静态文件
常规布署我们只需要将这个目录上传至目标服务器即可
// scp 上传 user为主机登录用户，host为主机外网ip, xx为web容器静态资源路径
scp dist.zip user@host:/xx/xx/xx
让web容器跑起来，以nginx为例
server {
listen 80;
server_name www.xxx.com;
location / {
index /data/dist/index.html;
}
}
配置完成记得重启nginx
// 检查配置是否正确
nginx -t
// 平滑重启
nginx -s reload
操作完后就可以在浏览器输入域名进行访问了
当然上面只是提到最简单也是最直接的一种布署方式
什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开
2. 404问题
我们先还原一下场景：
vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误
先定位一下，HTTP 404 错误意味着链接指向的资源不存在
问题在于为什么不存在？且为什么只有history模式下会出现这个问题？
⑴. 为什么history模式下有问题
Vue是属于单页应用（single-page application）
而SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个index.html
现在，我们回头来看一下我们的nginx配置
server {
listen 80;
server_name www.xxx.com;
location / {
index /data/dist/index.html;
}
}
可以根据 nginx 配置得出，当我们在地址栏输入 www.xxx.com 时，这时会打开我们 dist 目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login
关键在这里，当我们在 website.com/login 页执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况
⑵. 为什么hash模式下没有问题
router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login
它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误
3. 解决方案
看到这里我相信大部分同学都能想到怎么解决问题了，
产生问题的本质是因为我们的路由是通过JS来执行视图切换的，
当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404
所以我们只需要配置将任意页面都重定向到 index.html，把路由交由前端处理
对nginx配置文件.conf修改，添加try_files $uri $uri/ /index.html;
server {
listen 80;
server_name www.xxx.com;
location / {
index /data/dist/index.html;
try_files $uri $uri/ /index.html;
}
}
修改完配置文件后记得配置的更新
nginx -s reload
这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件
为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
关于后端配置方案还有：Apache、nodejs等，思想是一致的，这里就不展开述说了
三十、你是怎么处理vue项目中的错误的？
1. 错误类型
在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。
主要的错误来源包括：
- 后端接口错误
- 代码中本身逻辑错误
2. 如何处理
⑴. 后端接口错误
通过axios的interceptor实现网络请求的response先进行一层拦截
apiClient.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response.status == 401) {
router.push({ name: "Login" });
} else {
message.error("出错了");
return Promise.reject(error);
}
}
);
⑵. 代码逻辑问题
全局设置错误处理
设置全局错误处理函数
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
// 只在 2.2.0+ 可用
}
生命周期钩子
errorCaptured是 2.5.0 新增的一个生命钩子函数，当捕获到一个来自子孙组件的错误时被调用
(err: Error, vm: Component, info: string) => ?boolean
此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播
参考官网，错误传播规则如下：
- 默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报
- 如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。
- 如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler
- 一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler
- handleError在需要捕获异常的地方调用，首先获取到报错的组件，之后递归查找当前组件的父组件，依次调用errorCaptured 方法，在遍历调用完所有 errorCaptured 方法或errorCaptured 方法有报错时，调用 globalHandleError 方法
- globalHandleError调用全局的 errorHandler 方法，再通过logError判断环境输出错误信息
- invokeWithErrorHandling更好的处理异步错误信息
- logError判断环境，选择不同的抛错方式。非生产环境下，调用warn方法处理错误
未完待续…