vue前端面试题

作者: O人心 | 来源:发表于2021-08-11 11:17 被阅读0次

1、vue的生命周期钩子总共有几个，每一个生命周期主要是做什么事？

8个生命周期钩子

beforeCreate
- vue实例的挂载元素$el和函数data都为undefined,数据还未初始化
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中央事件总线
$attrs和$ 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
- 中央事件总线的怎么使用？
  1. 创建一个js文件，new 一个Vue实例，然后导出
  2. 在需要传递、接收数据的文件内分别引入此js文件
  3. 传递数据使用$emit
  4. 接收数据使用$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攻击

image.jpeg

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判断，然后在内部进行循环