Vue/React 前端高频面试

说一说vue钩子函数

钩子函数是Vue实例创建和销毁过程中自动执行的函数。按照组件生命周期的过程分为：挂载阶段 -> 更新阶段 -> 销毁阶段。

每个阶段对应的钩子函数分别为：挂载阶段（beforeCreate，created，beforeMounted，mounted）、更新阶段（beforeUpdate，updated）、销毁阶段（beforeDestroy，destroyed）

完整的父子组件生命周期执行顺序是：
加载渲染过程：父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted
组件更新过程：父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated
销毁过程：父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed

组件通信的方式

父子通讯：props，$emit，$refs
兄弟通讯：事件总线eventBus的$emit、$on
祖孙通讯：provide + inject，或者 $attr + $listener
复杂通讯：vuex

Vuex是什么，每个属性是干嘛的，如何使用

Vuex是全局状态管理仓库，相当于window对象挂载了一个全局变量。

属性：
1. state：数据存储
2. getter：类似于计算属性
3. mutations：存放同步方法
4. actions：存放异步方法
5. modules：模块划分

computed和watch的区别

computed是计算属性，依赖其他属性值，并且有缓存。只有当依赖的属性值发生变化后才会重新计算。不支持异步操作。

watch更多的是监听观察作用。当监听的值发生变化，会立即执行对应的回调。支持异步操作。

说一说v-if和v-show区别

v-if和v-show都可用于控制元素显示隐藏。区别是v-if是直接操作dom元素的添加与删除，而v-show通过设置元素css属性disply:none来控制是否显示。v-if性能不及v-show。

v-if和v-for可以用于一个标签吗

v-if 和 v-for 一起使用时，v-for 优先于 v-if 执行，就意味着需要遍历一整个数组，影响速度。所以不建议一起使用。

说一说vue的keep-alive

1. keep-alive是vue的内置组件，能在组件切换过程中保留组件状态，防止DOM重复渲染。
2. keep-alive有三个属性，include-匹配的组件缓存，exclude-排除匹配的组件其他都缓存，max-最多能缓存的组件数。
3. 可以配合路由使用，在相应组件mate下设置keep-alive: true。

vue中$nextTick的作用和原理

vue更新dom节点是异步操作，数据更新之后视图不是马上更新的。所以修改数据后获取到的dom节点不是最新的。nextTick是在当前渲染完成后执行的，所以在nextTick中能获取到更新后的dom。

说一说vue列表为什么要加key

vue列表加key的目的是为diff算法添加标识。diff算法判断新旧VDOM是否相同的依据是节点的tag和key。如果tag和key相同则会进一步进行比较，使得尽可能多的节点进行复用。
key绑定的值一般是一个唯一的值，比如id。例如绑定数组的索引index，一旦数组内元素进行增删，后续节点的绑定的key也会发生变化，导致diff进行多余的更新操作。

说一说vue-router实现懒加载的方法

懒加载的核心思想是按需加载。不用到时不加载。有利于性能优化。

实现懒加载有两种方式：
1. es6的import方式。const Home = ()=>import("./home.vue")
2. vue中异步组件进行懒加载。const Home = resolve => require(['./home.vue'], resolve)

说一说HashRouter和HistoryRouter的区别和原理

区别：
1. HashRouter和HistoryRouter是前端路由的两种模式。history利用浏览历史记录栈的api实现，hash是监听location对象hash值变化事件实现。
2. history的url没有#号，hash有#号。需要url更优雅时，可以使用history模式
3. 相同的url，history会触发添加到浏览器历史记录栈中，hash不会触发，history需要后端配合，如果后端不配合刷新新页面会出现404，hash不需要。

原理：
HashRouter原理：通过window.onhashchange方法获取新URL中hash值，再做进一步处理
HistoryRouter原理：通过history.pushState 使用它做页面跳转不会触发页面刷新，使用window.onpopstate 监听浏览器的前进和后退，再做其他处理

说一说Vue2.0双向绑定的原理和缺陷

原理：vue2通过数据劫持结合发布者-订阅者模式来实现数据双向绑定。通过Object.defineProperty来劫持数据的setter、getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理。

缺陷：只能监听初始化实例中的data数据，动态添加值不能响应。

Vue3.0如何实现数据双向绑定

采用proxy来劫持整个对象，相比于vue2的Object.defineProperty，能够动态监听添加的属性，可以监听数组长度和index变化问题。

vue2和vue3的区别

1. 双向绑定的原理不同。vue2是通过数据劫持，结合发布订阅模式实现。vue3是使用proxy对数据进行代理。
2. 根结点：vue2只能有一个根结点，vue3支持多个结根节。
3. 写法不同：vue3写法相对灵活，vue2结构相对固定，mothods,computed,data,watch这些都是固定的，vue3可以通过方法来分模块。（这一点也容易让代码结构看上去比较混乱）
4. 生命周期不同。vue2: beforeCreate,created, beforeMount, mounted, beforeUpdate, update。 vue3: setUp-开始创建组件，onBeforeMount, onMounted, onBeforeUpdate, onUpdate（vue3生命周期在使用之前需要先引入）

vue和react有什么区别

1. 核心思想不同。Vue核心思想是尽可能的降低前端开发门槛，使用MVVM框架。React核心思想是声明式渲染和组件化。react既不属于MVC也不属于MVVM架构。
2. 数据流不同。Vue使用双向绑定，React是单向数据流。
3. 语法不同。Vue使用模版语法来处理数据绑定和渲染。React使用的是jsx语法，将HTML和JavaScript结合在一起。
4. 组件通讯不。Vue提供了props和$emit来进行父子通讯。React通过props和回调函数来实现组件通讯。

React生命周期各个阶段是什么

React生命周期主要说的是类组件的生命周期，函数式组件没有生命周期（可用hooks来模拟一些生命周期的回调）

生命周期是组件从创建到销毁的这个过程，主要分为三个阶段：
挂载阶段：组件第一次在DOM树中被渲染的过程；
更新阶段：组件状态发生变化，重新更新渲染的过程；
卸载阶段：组件从DOM树中被移除的过程；

常见的生命周期函数有：
1. Constructor：组件中第一个调用的生命周期函数。constructor中通常只做两件事情：1. 通过给this.state 赋值对象来初始化内部state。2. 为事件绑定this。
2. render：render() 方法是类组件中唯一必须实现的方法。
3. componentDidMount：组件挂载后立即调用。依赖DOM的操作可在此处进行。官方建议发送网络请求最好的地方。
4. componentDidUpdate
5. componentWillUnmount