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对象挂载了一个全局变量。

属性：

state：数据存储
getter：类似于计算属性
mutations：存放同步方法
actions：存放异步方法
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

keep-alive是vue的内置组件，能在组件切换过程中保留组件状态，防止DOM重复渲染。
keep-alive有三个属性，include-匹配的组件缓存，exclude-排除匹配的组件其他都缓存，max-最多能缓存的组件数。
可以配合路由使用，在相应组件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实现懒加载的方法

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

实现懒加载有两种方式：

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

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

区别：

HashRouter和HistoryRouter是前端路由的两种模式。history利用浏览历史记录栈的api实现，hash是监听location对象hash值变化事件实现。
history的url没有#号，hash有#号。需要url更优雅时，可以使用history模式
相同的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

React组件间传值的方法有哪些

props
context
refs

setState是同步还是异步

同步代码异步表现。setState本身并不是异步的，但由于react的性能优化机制体现为异步。只有在原生和定时器中为同步。

React事件绑定原理

react中事件绑定都不是绑定在对应的DOM上的，而是统一绑定在document上，采用事件冒泡形式向上传递。

采用合成事件的原因：

兼容所有浏览器，实现跨平台开发。
统一挂载在document上，减少内存消耗。方便组件挂载/销毁时统一订阅/移除事件。
方便统一管理。

React有哪些hooks，hooks的优缺点是什么

常用hooks：

useState：设置和使用状态属性。

useEffect：副作用钩子，可以用来模拟部分生命周期。

useCallBack：记忆函数，防止组件重新渲染，起到缓存作用。

useRef：保存引用值。

useContext：共享状态。（组件传值）

hooks优点

让函数组件拥有自己的状态和生命周期。
解决业务逻辑难以拆分问题。
使状态逻辑复用变得简单可行。

hooks缺点：

hooks的useEffect只包括了三个生命周期（compoentsDidMount、componentDidUpdate、componentWillUnmount），并没有涵盖所有生命周期。