1、vue的生命周期钩子总共有几个，每一个生命周期主要是做什么事？
8个生命周期钩子
- beforeCreate
- vue实例的挂载元素
$el和函数data都为undefined,数据还未初始化
- vue实例的挂载元素
- created
- data数据初始化、可以操作data、methods
- 处理与数据相关逻辑
-
$el还没有，不能进行DOM操作 - 请求数据可以放在这里
- beforeMount
- 虚拟DOM节点
- mounted
- DOM节点渲染完成，可以操作DOM节点
- beforeUpdate
- 只要修改值就会重复执行
- updated
- 只要修改值就会重复执行
- beforeDestrory
- destroyed
无法访问data数据，但是可以有methods
destroyed() {
console.log("xxxssss==========",this.data, this.onEditorBlur);
/**
undefined ƒ onEditorBlur(event) {
//失去焦点事件
console.log(event);
}
*/
},
beforeCreate => create
$data是vue实例中的代理，在created中用this可以访问到data中的数据
beforeMount => mounted 使用了render函数进行了模板编译
render(h){
console.log("render is invoked")
return h('h2',{},this.msg)
}
2、keep-alive了解吗？他也有两个钩子，分别是？
路由缓存，通过组件中的
name属性对应，如果跳转路由，再跳转回来，使用了keep-alive的话，页面就会取缓存，不会进行网络请求。
actived如果需要进行一些数据请求的话，可以在这个生命周期中操作
deactived销毁
3、组件之间的通信有哪几种？
子组件props接收父组件的参数、子组件$emit传递给父组件参数
ref
bus中央事件总线
lisenter爷孙传递
provide inject 全局变量，可能导致变量污染
H5离线存储
-
vuex状态管理器
- 说一下vuex中包括哪些属性？
state:相当于vue实例中的data函数，
getters:对于state中的数据进行处理、计算等；返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。注意:getter在通过方法访问时，每次都会去进行调用，而不会缓存结果
mutations:必须是同步函数
actions:作用相当于mutations，区别在于可以提供异步请求
modules:模块管理- 说一下mutations和actions之间的区别？
两个属性中都可以做我网络请求，只不过
actions中可以做异步请求，mutations中不可以-
vuex刷新后数据还存在吗？
vuex刷新后数据不存在，但是可以保存曹sessionStorage中，但是sessionStorage中的数据不是实时更新的- 怎么获取state中的数据
import { mapState } from 'vuex'
this.$store.state.count - 中央事件总线的怎么使用？
- 创建一个js文件，new 一个Vue实例，然后导出
- 在需要传递、接收数据的文件内分别引入此js文件
- 传递数据使用
$emit - 接收数据使用
$on
import Vue from 'vue'; const bus = new Vue(); export default bus;import bus from "@/utils/Bus";bus.$emit("collapse", this.collapse);//传递bus.$on("collapse", (data)=>{ console.log(data) });
4、你知道v-model的实现原理是什么吗？
vue.js采用数据劫持结合发布者订阅者模式，通过
Object.defineProperty()来劫持各个属性的setter、getter，在数据发生变化时发布消息给订阅者，触发相应的监听回调
5、用过computed和watch吗？或者computed和methods，有什么区别？
我们可以将同一函数定义为一个 methods 或者一个计算属性。对于最终的结果，两种方式是相同的
- computed:依赖其他属性值，具有缓存值的功能，只要是所依赖的值没有发生改变，就会取缓存中的值，只有当所依赖的值发生改变时，下一次获取的值才会重新计算computed的值
- watch：监听数据变化，不支持缓存；支持异步操作；监听函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值
- methods：只要发生重新渲染，methods调用总会执行该函数
vue的计算属性：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：
①使得数据处理结构清晰；
②依赖于数据，数据更新，处理结果自动更新；
③计算属性内部this指向vm实例；
④在template调用时，直接写计算属性名即可；
⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；
⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。
6、vue3的生命周期有了解吗？
| vue2 | vue3 |
|---|---|
| beforeCreate | setup() |
| created | setup() |
| beforeMount | onBeforeMount |
| Mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeDestroy |
| destroyed | onDestroyed |
| actived | onActived |
| deactived | onDeactived |
| errorCaptured | onErrorCaptured |
7、了解react吗？
语法是JSX;单向响应的数据流；组件化；灵活、高效、声明式设计
8、Vue 组件 data 为什么必须是函数？
data = vm._data =
typeof data === "function" ? getData(data, vm) : data || {};
因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了
vue组件可能存在多个实例，如果使用对象形式定义data,则会导致他们共用一个data对象，那么状态变化会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。
9、闭包
function foo(){
let a = 10
return function(){
consoloe.log(a)
}
}
foo()
for(var i = 0;i<=5;i++){
setTimeout(()=>{
console.log(i)//6 6 6 6 6 6
})
}
//for循环是同步的，而setTimeout是异步的
//解决办法使用自执行函数
for(var i = 0;i<=5;i++){
(function(i){
setTimeout(()=>{
console.log(i)//6 6 6 6 6 6
})
})()
}
闭包的缺点：①不会被垃圾回收机制回收②增大内存消耗③引用的变量可能发生变化④内存泄露问题⑤this指向问题
10、什么是同步？什么是异步？
同步和异步是一种消息通知机制
【先进后出】
同步阻塞：A调用B处理获得结果，才返回给A。A在这个过程中只能等待B的返回结果，没有拿到结果之前，需要A（调用者）一直等待和确认调用结果是否返回，拿到结果之后才能继续执行
异步非阻塞：A调用B，无需等待B的结果，B通过状态，通知等来通知A或回调函数处理。
11、什么是宏任务？什么是微任务？
- 微任务：一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前
- 宏任务：宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合。
- 常见的微任务：【不需要排队】
- promise.then
- MutationObserver
- Object.observe(已废弃)
- process.nextTick(node.js)
- 常见的宏任务
- script（可以理解为外层同步代码）
- setTimeout/setInterval
- UI rendering/UI事件
- postMessage,MessageChannel
- setImmediate,I/O,(node.js)
12、浏览器为什么要阻止跨域请求？如何解决跨域？每次跨域请求都需要到达服务端吗？
- 两个服务器之间的“同源策略”，主要解决的问题四浏览器自建的安全问题，同源是协议、域名、端口都相同，非同源是只要协议、域名、端口有一个不同就会造成非同源
- 解决跨域的方法
- jsonp跨域
- postMessage解决跨域【iframe】
- 跨域资源共享（CORS）
- nginx反向代理【服务端】
- node.js正向代理【前端代理】
- websocket协议跨域
-
会到达服务端，服务端也会正常返回，只是被浏览器拦截起来了。所以每次请求都会到服务端
image.jpeg
13、token一般存放在哪里？Token放在cookie和localStorage、sessionStorage中有什么不同？
localStorage：没有对XSS攻击有任何防御机制，存在xss攻击，每次调接口的时候都把它当成一个字段传给后台
cookie：自动发送，缺点不能跨域,缺点是不符合restful最佳实践，容易受到CSRF攻击
14、强制缓存优先级高于协商缓存
强缓存：from disk form memory
15、为什么会有虚拟DOM？
虚拟DOM的Diff算法
- 为了减少页面渲染，引出虚拟dom，将所有视图上的更新先反映在虚拟dom上，再利用虚拟dom一次性更新视图
- 对比组件自身新旧vdom进行更新
16、v-if和v-for哪个优先级高
- v-for优于v-if被解析
- 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
- 避免此情况，再外层嵌套
template,在这一层进行v-if判断，然后在内部进行循环
