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。

你可能感兴趣的:(vue.js,前端,react.js)