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生命周期在使用之前需要先引入）

vue3为什么要用proxy代理数据响应

vue2使用的Object.defineProperty只能遍历对象属性进行劫持。
缺点：
1. 无法检测对象属性的添加和移除。
2. 当直接通过数组的下标给数组设置值或者改变数组长度时,不能实时响应。
3. 当data中数据比较多且层级很深的时候，遍历会导致性能下降。

vue3的Proxy直接可以劫持整个对象，并返回一个新对象，操作新的对象达到响应式目的。解决之前vue2的无法监听新增属性的问题，性能更好。

vue中用了哪些设计模式

1. MVVM模式：全称为model-view-viewModel，各部分通信都是双向的。采用双向数据绑定。

2. 观察者模式：观察者模式也称为 发布-订阅模式 。当数据变化时，发布者会通知所有订阅者执行回调函数，从而实现对数据变化的监听。

3. 工厂模式：工厂模式主要用于 对象的创建和实例化。在Vue中，组件是一种特殊类型的对象，通过工厂模式来创建和实例化组件。Vue组件库中的每一个组件都可以看作是一个工厂。

4. 原型模式：将方法挂载到构造函数的原型对象上，从而使得通过构造函数创建的所有对象都能够共享这个方法。

MVVM框架和MVC框架区别是什么

定义：
MVVM：全称为model-view-viewModel，各部分通信都是双向的。采用双向数据绑定，View的变动，自动反映在 ViewModel，反之亦然。
MVC：全称为model-view-controller。各部分之间的通信都是单向的。View 传送指令到 Controller,Controller 完成业务逻辑后，要求 Model 改变状态，将新的数据发送到 View，用户得到反馈。

区别：
1. MVC数据是单向的，MVVM是双向的。
2. 在MVC里，View是可以直接访问Model的。MVVM的页面与数据逻辑是分离模式。

vue和react有什么区别

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

说一说路由

路由的本质就是一种对应关系。比如说在 url 地址中输入要访问的url后，浏览器要去请求这个 url 地址对应的资源。

路由分为前端路由和后端路由。
后端路由：根据不同的url请求分发不同的资源。
前端路由：前端应用大多都是 SPA（单页应用程序）。为了有效的使用单个页面来管理多页面的功能，就有了前端路由。通过不同的用户事件显示不同页面内容。

在vue中使用的是vue-router，reacr中使用react-router-dom。
vue-router两种模式：HashRouter和HistoryRouter；
reacr-router两种模式：HashRouter 和 BrowserRouter。（HashRouter带#号，BrowserRouter 是使用 React-Router 的应用推荐的 history方案。）

react组件设计模式：

1. 高阶组件：参数为组件，返回值为新组件的函数。高阶组件本质就是一个函数。
2. Render Props：将 props 传入的函数，用来渲染界面。
3. 剥离有状态组件与无状态组件：把一个功能分配到两个组件中，形成父子关系，外层的父组件负责管理数据状态，内层的子组件只负责展示。做到责任分离，让一个模块专注于一个功能。

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组件间传值的方法有哪些

1. props
2. context
3. refs

setState是同步还是异步

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

React事件绑定原理

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

采用合成事件的原因：
1. 兼容所有浏览器，实现跨平台开发。
2. 统一挂载在document上，减少内存消耗。方便组件 挂载/销毁 时统一 订阅/移除 事件。
3. 方便统一管理。

React类组件和函数组件

函数组件是以函数形式存在的组件，更加轻便灵活，便于逻辑拆分。类组件有生命周期，可以获取实例化的this，函数组件不行。在hooks出现之前函数组件和类组件最大区别是状态的有无。

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

常用hooks：
useState：设置和使用状态属性。
useEffect：副作用钩子，可以用来模拟部分生命周期。
useCallBack：记忆函数，防止组件重新渲染，起到缓存作用。
useRef：保存引用值。
useContext：共享状态。（组件传值）

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

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

react中useState和useRef有什么区别

useState: 
1. 值发生改变，会render，视图发生更新。
2. setState是异步的，同一个函数里面设置，拿到的是更新之前的值。
3. 当状态改变需要重新渲染视图的时候，用useState。

useRef:
1. 值发生改变，不会render，视图不会更新。
2. 设置值是同步的，在同一函数内设置，能拿到最新设置的值。
3. 当只想更新状态，不想影响视图，使用useRef。