🌈个人主页：前端青山 🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来Vuet篇专栏内容:vue综合指南
目录
61、SPA首屏加载慢如何解决
62、Vue-router跳转和location.href有什么区别
63、vue slot
64、如果你是leader，做管理系统项目 Vue和React 怎么选择
65、Vuex的缺点
66、Vue和React区别
67、你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？
68、Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
69、Vue2中注册在router-link上事件无效解决方法
70、RouterLink在IE和Firefox中不起作用（路由不跳转）的问题
71、axios的特点有哪些
72、Vue深层次嵌套传值方法
73、请说下封装 vue 组件的过程？
74、params和query的区别
75、vue初始化页面闪动问题
76、vue更新数组时触发视图更新的方法
77、vue常用的UI组件库
78、vue修改打包后静态资源路径的修改
79、什么是 vue 生命周期？有什么作用？
80、第一次页面加载会触发哪几个钩子？
61、SPA首屏加载慢如何解决
安装动态懒加载所需插件；使用CDN资源。
62、Vue-router跳转和location.href有什么区别
使用location.href='/url'来跳转，简单方便，但是刷新了页面； 使用history.pushState('/url')，无刷新页面，静态跳转； 引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。 其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。
63、vue slot
简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。
64、如果你是leader，做管理系统项目 Vue和React 怎么选择
Angular的极限面向对象处理复杂业务非常舒适，但是对于轮子兄弟极其不友好，没有CDK你就只能抓瞎，一句话：高楼大厦，攀登不易。
React的Hooks有很强的Hacky精神，零星几个API，绝大部分需求皆可实现，一句话：步步为营，跬步千里。
Vue的API数量适中，基础设施完善，文档友好，概念与Angular和React都互通，一句话：百家之长，指哪打哪。
65、Vuex的缺点
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。
66、Vue和React区别
react和vue都是做组件化的，整体的功能都类似，但是他们的设计思路是有很多不同的。使用react和vue，主要是理解他们的设计思路的不同。
1.数据是不是可变的
react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，PureComponent就是重写了shouldComponentUpdate，然后在里面作了props和state的浅层对比。
image.png
而vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。
image.png
总之，react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控。
2.通过js来操作一切，还是用各自的处理方式
react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等，
image.png
vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。
image.png
3.类式的组件写法，还是声明式的写法
react是类式的写法，api很少，
image.png
而vue是声明式的写法，通过传入各种options，api和参数都很多。所以react结合typescript更容易一起写，vue稍微复杂。
image.png
vue结合vue-class-component也可以实现类式的写法，但是还是需要通过decorator来添加声明，并不纯粹。
image.png
react可以通过高阶组件（Higher Order Components--HOC）来扩展，而vue需要通过mixins来扩展 一个react高阶组件的例子：
image.png
image.png
vue的mixin的例子：
image.png
React刚开始也有mixin的写法，通过React.createClass的api，不过现在很少用了。 Vue也不是不能实现高阶组件，只是特别麻烦，因为Vue对与组件的option做了各种处理，想实现高阶组件就要知道每一个option是怎么处理的，然后正确的设置。具体有多复杂，可以参考下面的文章。 http://hcysun.me/2018/01/05/%E6%8E%A2%E7%B4%A2Vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/
4.什么功能内置，什么交给社区去做
react做的事情很少，很多都交给社区去做，vue很多东西都是内置的，写起来确实方便一些， 比如 redux的combineReducer就对应vuex的modules， 比如reselect就对应vuex的getter和vue组件的computed， vuex的mutation是直接改变的原始数据，而redux的reducer是返回一个全新的state，所以redux结合immutable来优化性能，vue不需要。
总结
上面主要梳理了react和vue的4点不同：
- 数据是不是可变的
- 通过js操作一切还是各自的处理方式
- 类式的组件写法还是声明式的写法
- 什么功能内置，什么交给社区去做
（其中第3点在vue3.0支持类式写法之后就可以去掉了）
react整体的思路就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，而vue是基于可变数据的，支持双向绑定。react组件的扩展一般是通过高阶组件，而vue组件会使用mixin。vue内置了很多功能，而react做的很少，很多都是由社区来完成的，vue追求的是开发的简单，而react更在乎方式是否正确。
image.png
67、你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？
根据vue-cli脚手架规范，一个js文件，一个CSS文件。
68、Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。
69、Vue2中注册在router-link上事件无效解决方法
使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。
70、RouterLink在IE和Firefox中不起作用（路由不跳转）的问题
方法一：只用a标签，不适用button标签；方法二：使用button标签和Router.navigate方法
71、axios的特点有哪些
浏览器中创建XMLHttpRequests； node.js创建http请求； 支持Promise API； 拦截请求和响应； 转换请求数据和响应数据； 取消请求； 自动换成json。 axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送 params一般适用于get请求，data一般适用于post put 请求。
72、Vue深层次嵌套传值方法
vuex
73、请说下封装 vue 组件的过程？
\1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考1小时，码码10分钟，程序猿的准则。)
- 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
- 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
- 封装完毕了，直接调用即可
74、params和query的区别
用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$和this.$route.params.name。 url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示 注意点：query刷新不会丢失query里面的数据 params刷新 会 丢失 params里面的数据。
75、vue初始化页面闪动问题
使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。 首先：在css里加上[v-cloak] { display: none; }。 如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"
76、vue更新数组时触发视图更新的方法
push()；pop()；shift()；unshift()；splice()； sort()；reverse()
77、vue常用的UI组件库
Mint UI，element，VUX
78、vue修改打包后静态资源路径的修改
cli2版本：将 config/index.js 里的 assetsPublicPath 的值改为 './' 。 build: { ... assetsPublicPath: './', ... } cli3版本：在根目录下新建vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改） module.exports = { publicPath: '', // 相对于 HTML 页面（目录相同） } 生命周期函数面试题
79、什么是 vue 生命周期？有什么作用？
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。
80、第一次页面加载会触发哪几个钩子？
beforeCreate， created， beforeMount， mounted
