-
vue有哪两种传参方式，分别有什么区别？哪一种传参方式页面刷新会消失
用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name 。
url地址显示：query更加类似于ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意：query刷新不会丢失query里面的数据 params刷新会丢失 params里面的数据。
-
说说对vue的模块化开发
tips：
比如说在一些数据展示比较多的页面，可以在页面新增一个js文件，比如说一些初始化的数据信息使用export导出，然后在vue页面导进行import 导入，这样可以使代码看起来更简洁，也更方便后期代码的优化分模块存放代码。
还有一个比较复杂的页面，也可以在该页面的文件夹新增一个compoents组件文件夹，然后分别在页面引入
导出导出 import export default
-
说说vue的渐进式
tips：
比如使用vue开发 为可能需要使用element的组件，直接引入就好了，需要使用vuex然后也直接引入 ，而不是说在一开始搭建项目的时候将所有可能需要用到的全部安装，按需引入。
需要多少拿多少 ，按需引入
-
vue的权限管理
根据用户登陆授权的角色 注入相对应的路由，
刷新页面，从缓存中获取token信息再次请求获取所属权限，再次注入路由
缓存之后存储用户的token信息，权限路由不会存储
之后再去刷新token获取对应路由信息
1.登陆后获得用户角色，通过角色获得用户的权限，注入权限对应的路由。
2.刷新页面，从localStorage用角色(更好的方式是通过token)再次获得所属权限，再次注入路由。在管理界面左端循环权限对应的路由菜单。
3.localStorage存用户的信息（token），权限路由不会存。
-
vue的组件传参的方式？
- prop/emit 父子组件传参，父组件使用prop定义传递数据，子组件emit将数据变量传递给父组件
- refs 父组件中给子组件绑定ref，可以直接调用this.$refs.child获取子组件的数据信息
- vuex全局状态管理
- eventBus 用户兄弟组件之间的传参，在全局创建一个eventBus变量 在兄弟组件引入，a兄弟组件使用emit 发送数据，b兄弟使用on接受数据信息
- parent/children 之间传参数 ，
-
es6的新特性
https://juejin.cn/post/6844903959283367950
-
如何解构赋值数组对象？
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MirXWIhx-1634974658014)(file:///Users/liulu/Library/Application%20Support/typora-user-images/image-20211015212819961.png?lastModify=1634905919)]
-
promise 和async和await 的区别？
promise
promise是一部编程的一种解决方案，比传统的解决方案–回调函数和事件----更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕(异步)的事件的结果，而这些结果一旦生成是无法改变的
async await
async await意识异步编程的一种解决方案，遵循的是generator函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。
两者的区别：
- Promise的出现解决了传统的callback函数导致的"地狱回调"问题，它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这种语法显然是不美观的，而async awiat 代码看起来会更简洁，使得异步代码看起来像同步代码，await的本质是可以提供等同于"同步效果"的等待异步返回能力的语法糖，只有这语句代码执行完，才会执行下一句。
- async await与Promise一样是，是非阻塞的
- async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通函数
-
vue生命周期
- beforeCreate（创建前）：数据观测和初始化事件还未开始，此时data的响应式追踪，event/watcher都还没有被设置，也就是不能访问到data，computed，watch，methods上的方法和数据
- created（创建后）：实例创建完成，实例上配置的options包括data，comouted，watch，methods等都配置完成，但是此时渲染的节点还未挂载到DOM，所以不能访问**$el**属性 （虚拟dom在此生命周期执行）
- beforeMount（挂载前）：在挂载开始之前被调用，相关的render函数首次被调用，实例已经完成以下的配置：编译模版，把data里面的数据和模版生成html。此时还没有挂在在html页面上。
- mounted（挂载后）：在el被新创建的vm.$el替换，并挂在到实例上去之后调用。实例已完成以下配置：用上面编译好的html内容替换el属性指向的DOM对象。完成编译模版中的html渲染到html页面中。此过程中进行ajax交互。
- beforeUpdate（更新前）：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实DOM还没有被渲染，
- updated（更新后）：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用，此时DOM已经根据响应式数据的变化更新了，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然后在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。改钩子在服务器渲染期间不被调用。
- beforDestroy（销毁前）：实例销毁之后调用，这一步，实例仍然完全可用，this仍然可以获取到实例。
- destroy（销毁后）：实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。改钩子在服务端渲染期间不被使用。
-
给定一个数组 手写一个排序的方法
function sortArr(arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr.length - 1; j++) {
if (arr[j] < arr[j + 1]) { //从大到小。//从小到大 (arr[j]>arr[j+1])
var temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
return arr
}
-
jquery 和vue有什么区别？
jquery：通过获取dom元素，给元素绑定事件和方法。
vue：运用双向数据绑定，用数据驱动视图更新，不再去操作dom，
-
http和https为什么说https更安全
（http是明文传输 ，https是加密传输）
-
mvvm和mvc有什么区别？
MVC
MVC通过分离Model,View和Controller的方式来组织代码结构。其中View负责页面的显示逻辑，Model负责存储页面的业务逻辑，以及对相应数组的操作。并且View和Model应用来观察者模式，当Model层发生改变的时候它会通知有关View层更新视图，Controller是View和Model层的纽带，主要负责用户与应用的响应操作，当用户与页面发生交互的时候， 中事件触发器就开始工作了，通过调用Model层，来完成对Model的修改，然后Model层再去通知View层更新。
MVVM
m表示model 数据
v表示视图
c表示控制器
表示数据的更改需要依赖Controller控制器进行视图更新，而mvvm可以通过viewModel进行双向数据绑定进行数据和视图的更新
-
get和post和put的区别 ？
- post更安全因为get直接将数据在url里面传输的 而post是在request body里面
- get 参数有长度限制 post没有限制大小
- get请求性能更好 只会发送一次 直接将header和data一并发送出去
- post 会发送两次 首先将header信息发送出去 服务器响应之后再发送data 然后再请求成功返回数据
GET和POST还有一个重大区别，简单的说：
GET产生一个TCP数据包；POST产生两个TCP数据包。
长的说：
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
也就是说，GET只需要汽车跑一趟就把货送到了，而POST得跑两趟，第一趟，先去和服务器打个招呼“嗨，我等下要送一批货来，你们打开门迎接我”，然后再回头把货送过去
-
前端如何配合后端一起处理秒杀的高并发
前端：用户下单之后按钮灰置，禁止用户重复下单，或者提示loading
-
cookie和LocalStorage和sessionStorage和区别？
cookie：
-
存储在客户端里面，创建成功之后名称就不能修改
-
跨域名是无法共享的，这是由cookie的隐私安全性决定的，遮掩可以防止非法获取其他网站的cookie
-
每个域名下面的cookie不能超过20个，大小不可以超过4kb
-
存在安全问题，如果被拦截了，就可以获得session的信息，加密也没用。
使用场景：
- 结合session使用，将sessionId存储到Cookie中，每次发送请求都会携带sessionId，这样服务端就知道是谁发起的，从而响应数据
- 可以用来统计页面的点击次数
LocalStorage：
- 浏览器缓存，如果不清理会一直存在浏览器中，仅存储在本地。
- 受同源政策的限制，端口，协议，主机地址不同都访问不了。
- 仅存储在本地，不想cookie每次http请求都会携带
- 网站中的一些用户的浏览记录也是存储在localstorage里面，网站中一些不常变动的个人信息也存储在里面。
sessionStorage：
- 具有失效性，一般用来存储游客登陆的信息，还有临时的浏览记录的信息，关闭网站的时候，这些信息也被清除了。
- 只有在同一个浏览器的同一个窗口下才能共享。
-
什么是跨域？
跨域就是浏览器同源问题策略造成的；
协议，端口号，域名不一致都会导致跨域请求异常。
-
如何处理跨域问题
-
CORS
-
JSONP
jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
Vue axios实现：
this.$http = axios;
this.$http.jsonp('http://www.domain2.com:8080/login', {
params: {},
jsonp: 'handleCallback'
}).then((res) => {
console.log(res);
})
-
nginx代理跨域
-
window.name + iframe跨域
window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。
-
location.hash + iframe跨域
实现原理：a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
-
document.domain + iframe跨域
此方案仅限主域相同，子域不同的跨域应用场景。实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
-
vue框架的跨域
node + vue + webpack + webpack-dev-server搭建的项目，跨域请求接口，直接修改webpack.config.js配置。开发环境下，vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域。
webpack.config.js部分配置：
module.exports = {
entry: {},
module: {},
...
devServer: {
historyApiFallback: true,
proxy: [{
context: '/login',
target: 'http://www.domain2.com:8080', // 代理跨域目标接口
changeOrigin: true,
secure: false, // 当代理某些https服务报错时用
cookieDomainRewrite: 'www.domain1.com' // 可以为false，表示不修改
}],
noInfo: true
}
}
-
为什么vue要使用虚拟dom树
- 优化性能，通过比较变化，计算最小需要更新的视图，再去操作真是dom，不更新的dom不会重新渲染，
- 通过diff算法进行同级计算，不跨级别计算，简化次要
- 比较标签名，不同的标签名直接删除，不再深度比较
- 相同标签，key相同就认为是相同的节点，不再深度比较
-
什么作用域？
-
全局作用域
- 最外层函数和最外层函数外面定义的变量拥有全局作用域
- 所有未定义直接赋值的变量自动声明为全局变量
- 所有window对象的属性拥有全局作用域
- 全局作用域有很大弊端就是，过多的全局作用域变量会污染全局命名空间，容易命名个冲突
-
函数作用域
- 函数作用域声明在函数内部的变量，一般只有固定代码可以访问到
- 作用域是分层的，内层作用域可以访问外层作用域，反之则不行
-
块级作用域
- es6中的let和const 指令可以声明块级作用域，块级作用域可以在函数中创建也可以在一个代码块中创建（由{}包裹的代码片段）
- let和const不会有变量提升，也不可以重复声明
- 在循环中比较适合绑定块级作用域，这样可以把声明的计数器变量限制在循环内部
-
什么是作用域链？
当一个函数在当前作用域中查找一个变量，如果在自己的作用域里面找不到该变量就去父级作用域查找，然后依次向上级作用域查找，直到访问对象到window对象就被终止，这一层层的关系就是作用域链。
作用域链的作用：保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，可以访问到外层环境的变量和函数
-
如果给你一张长图你在商品详情里面怎么优化？
-
什么是递归？
递归就是自己调用自己本身，需要有执行条件终止判断，不然会一直调用进入死循环
-
递归的使用场景是什么？
一般用于数据的累加
比如函数reduce累加器实现原理运用的就是递归方法
-
给定你一个数组1-10，请将这个数组随机排序
function randomArr(arr) {
arr.sort(function(a, b) {
return Math.random() - 0.5
})
}
-
购物车里面的价格计算一般是写在哪个方法里面？watch还是computed？
一般是写在computed计算属性里面，使用reduce方法计算
-
请使用递归将1-50进行累加
function add(x){
return x==0?1:x+add(x-1)
}
add(50)