vue前端面试题

1、vue的两个核心：数据驱动和组件化。
2、vue的生命周期钩子总共有几个，每一个生命周期主要是做什么事？
3、keep-alive了解吗？他也有两个钩子，分别是？
4、组件之间的通信有哪几种？
5、你知道v-model的实现原理是什么吗？
6、用过computed和watch吗？有什么区别？
7、Vue NextTick原理

1、vue的两个核心：

数据驱动和组件化

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

beforeCreate

vue实例的挂载元素$el和函数data都为undefined,数据还未初始化

created
data数据初始化、可以操作data、methods，处理与数据相关逻辑
$el还没有，不能进行DOM操作
请求数据可以放在这里

beforeMount
虚拟DOM节点

mounted
DOM节点渲染完成，可以操作DOM节点

beforeUpdate
只要修改值就会重复执行

updated
只要修改值就会重复执行

beforeDestrory

destroyed

beforeCreate => create $data是vue实例中的代理，在created中用this可以访问到data中的数据
beforeMount => mounted 使用了render函数进行了模板编译

3、keep-alive了解吗？他也有两个钩子，分别是？

路由缓存，通过组件中的 name属性对应，如果跳转路由，再跳转回来，使用了keep-alive的话，页面就会取缓存，不会进行网络请求。
actived如果需要进行一些数据请求的话，可以在这个生命周期中操作
deactived销毁

4、组件之间的通信有哪几种？

子组件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)
 });

5、你知道v-model的实现原理是什么吗？

vue.js采用数据劫持结合发布者订阅者模式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据发生变化时发布消息给订阅者，触发相应的监听回调

6、用过computed和watch吗？有什么区别？

computed:依赖其他属性值，具有缓存值的功能，只要是所依赖的值没有发生改变，就会取缓存中的值，只有当所依赖的值发生改变时，下一次获取的值才会重新计算computed的值
watch：监听数据变化，不支持缓存；支持异步操作；监听函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值

7、Vue NextTick原理

nextTick中的回调是下次DOM更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。