Vue、React重点大全

Tammyhlf

已于 2023-04-03 17:04:12 修改

阅读量979

点赞数 2

文章标签： vue.js react.js 前端

于 2023-01-09 13:46:29 首次发布

本文链接：https://blog.csdn.net/weixin_38984030/article/details/126464949

版权

Vue

vue揭秘
1、生命周期
vue2:
总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreate阶段，由于还未初始化，vue实例的挂载元素el和数据对象data都为undefined。在created阶段，vue实例的数据对象data有了，el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但挂载之前还是为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。
vue3:
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

2、MVVM
mvvm是一种设计思想。Model代表数据模型，可以在model中定义数据修改和操作的业务逻辑;view表示ui组件，负责将数据模型转换为ui展现出来，它做的是数据绑定的声明、指令的声明、事件绑定的声明。;而viewModel是一个同步view和model的对象。在mvvm框架中，view和model之间没有直接的关系，它们是通过viewModel来进行交互的。mvvm不需要手动操作dom，只需要关注业务逻辑就可以了。mvvm 的核心是数据劫持、数据代理、数据编译和"发布订阅模式"。

mvvm和mvc的区别在于：mvvm是数据驱动的，而MVC是dom驱动的。mvvm的优点在于不用操作大量的dom，不需要关注model和view之间的关系，而MVC需要在model发生改变时，需要手动的去更新view。大量操作dom使页面渲染性能降低，使加载速度变慢，影响用户体验。
详情

3、双向绑定原理
vue2是利用ES5的Object.defineProperty，
局限：只能监听对象属性的变化；不能利用索引直接设置一个数组项,也不能修改数组的长度

Object.defineProperty(object, "key", {
  get() { return bValue; },
  set(newValue) { bValue = newValue; },
  enumerable : true,
  configurable : true
});

Vue3.0中的响应式采用了ES6中的 Proxy 方法，可以监听对象某个属性值的变化，还可以监听对象属性的新增和删除，而且还可以监听数组。

var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
  set: function(obj, prop, value) {
	obj[prop] = value;
    return true;
  }
});

4、虚拟dom
虚拟dom详解
包括几个步骤：

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
当状态变更的时候，重新构造一棵新的对象树。然后用diff算法新旧两棵虚拟树的差异
用pach算法将两个虚拟DOM对象的差异应用到真实的DOM树，视图就更新了

dom本质是将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的 DOM 与之保持同步。在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分。
虚拟DOM在vue中主要提供与真实节点对应的虚拟节点vnode,然后需要将vnode和oldVnode进行比对，然后更新视图，对比两个虚拟节点的算法是patch算法。（在 vue 里面diff 算法就是通过 patch 函数来完成的，所有有的时候也叫 patch 算法。）

Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在下一个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。所以如果你用一个for循环来动态改变数据100次，其实它只会应用最后一次改变，如果没有这种机制，DOM就要重绘100次，这固然是一个很大的开销。
Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver，如果都不支持，就会采用setTimeout代替。
5、v-for为什么要用key
Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
key能提高diff效率其实是需要分情况的。
不用 key：
就地复用节点。在比较新旧两个节点是否是同一个节点的过程中会判断成新旧两个节点是同一个节点，因为 a.key 和 b.key 都是 undefined。所以不会重新创建节点和删除节点，只会在节点的属性层面上进行比较和更新。所以可能在某种程度上（创建和删除节点方面）会有渲染性能上的提升；
无法维持组件的状态。由于就地复用节点的关系，可能在维持组件状态方面会导致不可预知的错误，比如无法维持改组件的动画效果、开关等状态；
也有可能会带来性能下降。因为是直接就地复用节点，如果修改的组件，需要复用的很多节点，顺序又和原来的完全不同的话，那么创建和删除的节点数量就会比带 key 的时候增加很多，性能就会有所下降；
用 key：
维持组件的状态，保证组件的复用。因为有 key 唯一标识了组件，不会在每次比较新旧两个节点是否是同一个节点的时候直接判断为同一个节点，而是会继续在接下来的节点中找到 key 相同的节点去比较，能找到相同的 key 的话就复用节点，不能找到的话就增加或者删除节点。
查找性能上的提升。有 key 的时候，会生成 hash，这样在查找的时候就是 hash 查找了，基本上就是 O(1) 的复杂度。
节点复用带来的性能提升。因为有 key 唯一标识了组件，所以会尽可能多的对组件进行复用（尽管组件顺序不同），那么创建和删除节点数量就会变少，这方面的消耗就会下降，带来性能的提升。

总结：性能提升不能只考虑一方面，不是 diff 快了性能就快，不是增删节点少了性能就快，不考虑量级的去评价性能，都只是泛泛而谈。
key也不能是li元素的index，因为假设我们给数组前插入一个新元素，它的下标是0，那么和原来的第一个元素重复了，整个数组的key都发生了改变，这样就跟没有key的情况一样了。

6、nextTick
vue 采用的异步更新策略，当监听到数据发生变化的时候不会立即去更新DOM，而是开启一个任务队列，并缓存在同一事件循环中发生的所有数据变更;这种做法带来的好处就是可以将多次数据更新合并成一次，减少操作DOM的次数，如果不采用这种方法，假设数据改变100次就要去更新100次DOM，而频繁的DOM更新是很耗性能的。
nextTick 接收一个回调函数作为参数，并将这个回调函数延迟到DOM更新后才执行；
使用场景：想要操作基于最新数据生成的DOM 时，就将这个操作放在 nextTick 的回调中；
实现原理：将传入的回调函数包装成异步任务，异步任务又分微任务和宏任务，为了尽快执行所以优先选择微任务；
nextTick实现

7、v-show、v-if的区别
v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。
总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。
实现方式：v-if会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染；
v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display；

8、vue单页面应用如何首页优化
VUE首页加载过慢，其原因是因为它是一个单页应用，需要将所有需要的资源都下载到浏览器端并解析。

cdn加速
路由懒加载
首页加 loading 或骨架屏（仅仅是优化体验）
首页使用SSR，其他页面前端渲染
优化js体积，使用分包等策略减少chunk-vendors.js的体积
优化第三方库，按需引入，减少不必要的引入
图片压缩，使用字体图标等
开启gizp压缩；使网站的css、js 、xml、html 等静态资源在传输时进行压缩，经过Gzip压缩后资源可以变为原来的30%甚至更小，尽管这样会消耗一定的cpu资源，但是会节约大量的出口带宽来提高访问速度

9、Vue 的父组件和子组件生命周期钩子执行顺序是什么
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程父beforeUpdate->父updated
销毁过程父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

10、Vue 中的 computed 是如何实现的
实现原理
 技术揭秘
这两篇文章说得挺清晰的，耐心多看几遍就懂啦
总结：computed本身是通过代理的方式代理到组件实例上的，所以读取计算属性的时候，执行的是一个内部的getter，而不是用户定义的方法。
computed内部实现了一个惰性的watcher，在实例化的时候不会去求值，其内部通过dirty属性标记计算属性是否需要重新求值。当computed依赖的任一状态（不一定是return中的）发生变化，都会通知这个惰性watcher，让它把dirty属性设置为true。所以，当再次读取这个计算属性的时候，就会重新去求值。

11、diff算法
数据发生变化，会生成新的虚拟dom，diff 算法会比较两个树形结构之间的差异，然后更新差异部分的内容，而不必重新渲染整个页面。

Vue.js的diff算法主要分为以下几个步骤：

首先，对比新旧节点的根节点是否相同，如果不同直接替换整个节点，结束diff过程。
如果根节点相同，则对比节点的类型，如果类型不同直接替换节点，结束diff过程。
如果类型相同，则对比节点的属性，对于不同的属性进行更新操作，结束diff过程。
如果属性相同，则对比子节点，这里采用了双指针的方式进行遍历，对比过程中如果遇到不同的节点，则对其进行添加、移动、删除等操作。Vue会在同层级的子节点中寻找相同的节点进行比较。如果都没有找到相同的节点，那么Vue会直接删除旧节点并添加新节点，不再进行后续比较。

在实现diff算法的过程中，Vue.js使用了一些优化策略，例如在进行对比时使用了key来标识节点，从而减少了不必要的节点操作，提高了性能。
需要注意的是，由于diff算法是一种近似算法，因此可能会存在一些无法预料的问题，例如在节点比较复杂、嵌套层次较深的情况下，可能会出现性能问题。因此，在开发过程中需要结合具体情况进行优化，避免不必要的性能损失。

12、vue路由原理
vue是采用SPA的模式，SPA 全称 Single Page Application，即单页面应用。一般也称为 CSR（Client Side Render），即客户端渲染。它所需的资源，如 HTML、CSS 和 JS 等，在一次请求中就加载完成，也就是不需刷新地动态加载。对于 SPA 来说，页面的切换就是组件或视图之间的切换。

SPA的优点：
1.页面切换快
页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送时延，我们在切换页面的时候速度很快。
2.用户体验好
页面片段间的切换快，包括移动设备, 尤其是在网络环境差的时候, 因为组件已经预先加载好了, 并不需要发送网络请求, 所以用户体验好

SPA的缺点
1.首屏加载速度慢
首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。
2.不易于SEO
SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致SPA应用做出来的网页在百度和谷歌上的排名差。

Vue 路由的核心是路由器（Router），它是 Vue 实例，负责管理路由规则和控制视图的渲染。路由器通过监听浏览器的 URL 变化来匹配路由规则，并将匹配到的组件渲染到视图中。
Vue 路由提供了三种模式：

hash 模式：hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。
history 模式：history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。由于改变了地址, 刷新时会按照修改后的地址请求后端, 需要后端配置处理, 将地址访问做映射, 否则会404
abstract 模式：一种不依赖浏览器的实现方式，主要用于测试和非浏览器环境下。

SPA的实现：
Vue路由使用了HTML5 History API，通过对URL的监听和管理，实现了前端路由的功能。当用户访问一个路由时，Vue路由会根据路由配置和参数，渲染对应的组件，并将该组件插入到HTML文档中，从而实现页面的更新，而不需要重新加载整个页面。

那基于Vue的SPA如何优化页面加载速度呢？
前端性能优化

13、vue中的data为什么是一个函数

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data(类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据)
Object是引用数据类型，里面保存的是内存地址，单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
详情

14、ssr和csr的区别，nuxt.js的生命周期
在这里插入图片描述
以上是 nuxt.js 的生命周期流程图，红框内的是Nuxt 的生命周期(运行在服务端)，黄框内同时运行在服务端&&客户端上，绿框内则运行在客户端。
因为红框、黄框内的周期都不存在Window对象，所以不能直接使用window

下面详细讲一下每个钩子函数执行情况：

incoming request 这个阶段是服务器收到请求，开始走流程
nuxtServerInit
1.服务器初始化
2.只能够在store/index.js中使用
3.用于在渲染页面之前存储数据到vuex中
参数：
第一个参数是：vuex上下文
第二个参数是：Nuxt上下文
middleware
这个阶段会执行一些预定义的中间件，自己定义的中间件也会在这个阶段执行
validate
可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。(具体实现请参考官方文档)
asyncData
这个方法可以使得你能够在渲染组件之前异步获取数据。好比你在vue组件中用created获取数据一样，不同的是asyncData是在服务端执行的
还有要注意的是：asyncData只是在首屏的时候调用一次（即页面渲染之前，所以事件触发不了它）
fetch
fetch 方法用于在渲染页面前填充应用的状态树（store）数据，与 asyncData 方法类似，不同的是它不会设置组件的数据。
如果页面组件设置了 fetch 方法，它会在组件每次加载前被调用（在服务端或切换至目标路由之前）。
fetch 方法的第一个参数是页面组件的上下文对象 context，我们可以用 fetch 方法来获取数据填充应用的状态树。为了让获取过程可以异步，你需要返回一个 Promise，Nuxt.js 会等这个 promise 完成后再渲染组件。
注意，在fetch阶段是无法使用this获取组件实例，fetch是在组件初始化之前被调用（好像fetch函数也会在created和beforeMount之间执行一次）
render
这个阶段开始准备客户端渲染，如果过程中有通过nuxt-link跳转，会退回至middleware阶段重新执行
beforeCreat和created阶段
这个和vue中的钩子函数功能基本类似，有一个小的差别，vue的这两个钩子只在客户端执行，nuxt的这两个钩子在客户端和服务端都会执行一遍

其他阶段
之后的阶段都是在客户端中执行，比如beforeMount和mounted阶段等等

14、vue2和vue3的区别

选项式 API (Options API)和组合式 API (Composition API)
选项式 API：我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
组合式 API ：核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。
vue2中的生命周期

beforeCreate 组件创建之前
created 组件创建之后
beforeMount 组价挂载到页面之前执行
mounted 组件挂载到页面之后执行
beforeUpdate 组件更新之前
updated 组件更新之后
vue3中的生命周期

setup 开始创建组件
onBeforeMount 组价挂载到页面之前执行
onMounted 组件挂载到页面之后执行
onBeforeUpdate 组件更新之前
onUpdated 组件更新之后

双向数据绑定原理不同
vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。
相比与vue2，使用proxy API 优势有：defineProperty只能监听某个属性，不能对全对象进行监听；可以省去for in 、闭包等内容来提升效率（直接绑定整个对象即可）；可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部数据的变化。
diff算法实现的不同
1）静态提升
Vue 3中引入了静态提升的概念，即将静态节点提升为常量，避免了重复的静态节点的创建和比较，从而减少了diff算法的运行时间。
2）长列表优化
Vue 3中引入了长列表优化，即将长列表拆分为多个小列表，每个小列表单独进行比较和更新，避免了不必要的比较和更新操作，从而提高了性能。
3）动态组件优化
Vue 3中对动态组件进行了优化，通过缓存动态组件的模板和实例，避免了多次创建和销毁组件的开销，从而提高了性能。
4）更精细的异步更新控制
Vue 3中增强了异步更新控制，通过更细粒度的控制更新的优先级和批量更新，避免了不必要的更新操作，从而减少了diff算法的运行时间。
以及其他特性，获取dom的方式、teleport、定义变量方式、vue3根结点个数可以多个、天然支持ts等等

15、vue父子传值方式

props、emit（）
eventbus
1）初始化

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 或者定义在全局 main.js
Vue.prototype.$EventBus = new Vue()

2）发送信息

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))

// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

3）移除监听

EventBus.$off()

provide、inject（可以跨层级）
父组件provide(‘storeCode’, storeCode)、子组件const storeCode = inject(‘storeCode’)
$attrs && $listeners

 <child :name="name" :age="name" :infoObj="infoObj" @updateInfo="updateInfo" @delInfo="delInfo" />
 // 在child内部，可以$attrs可以获取到name、name、infoObj；listeners可以获取到updateInfo、delInfo

$refs
$p a re n t 和$ children， $p a re n t 可以访问上一级父组件，$ children返回子组件数组， $c hi l d re n 属性是不保证子组件的顺序的，因为$ children是根据你页面加载组件的顺序去确定子组件在 $children数组中的顺序。如果A组件在B组件先加载，那么A组件的下标就是0，B组件的下标就是1。可以通过_uid 属性作为唯一标识识别元素
vuex
state：统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
mutations ：使用它来修改数据(commit)
getters：类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )
actions：发起异步请求(dispatch)
modules：模块拆分
v-model 实现父子组件传值
其实它是一个语法糖
v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

<input v-model="message">
<input v-bind:value="message" v-on:input="message = $event.target.value">

input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，通过 $event 把最新的 value 传递给 something。我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论：在给 input 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 input 事件作为实时传递 value 的触发事件

React

不同之处

vue和react的区别
1、vuex、redux
两者都是管理全局状态的工具库，总的来说都是让 View 通过某种方式触发 Store 的事件或方法，Store 的事件或方法对 State 进行修改或返回一个新的 State，State 改变之后，View 发生响应式改变。
Redux： view——>actions——>reducer——>state变化——>view变化（同步异步一样）
Vuex： view——>commit——>mutations——>state变化——>view变化（同步操作） view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操作）

vuex:
对于简单应用来说，使用 Vuex 是繁琐冗余，可以使用用响应式 API 做简单状态管理，用 reactive() 来创建一个响应式对象，并在不同组件中导入它。详见
State
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照.Vuex通过 store 选项，把 state 注入到了整个应用中，这样子组件能通过 this.$store 访问到 state 了
Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。注意：mutation 必须是同步函数
Action
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作
Action 通过 store.dispatch 方法触发

Vue 和 React 的区别：

模板语法：Vue 使用基于 HTML 的模板语法，而 React 则使用 JavaScript 的 JSX 语法。
数据绑定：Vue 提供了双向数据绑定，而 React 则是单向数据流。在 React 中，数据流是从父组件向子组件单向传递的，如果需要修改数据，需要向父组件发出事件通知父组件修改数据，而在 Vue 中，数据修改自动反映在模板中。
组件定义方式：Vue 组件可以通过对象定义，也可以通过单文件组件 (.vue 文件) 定义，而 React 组件只能通过类或函数定义。
状态管理：Vue 有一个内置的状态管理器 Vuex，而 React 则使用第三方库 Redux 管理状态。
渲染方式：Vue 使用模板引擎将组件渲染成真正的 DOM，而 React 使用虚拟 DOM 实现高效的渲染。
生命周期：Vue 和 React 的生命周期有些相似，但也有很多不同之处。例如，Vue 的生命周期中包含 beforeCreate 和 created 钩子函数，而 React 中则没有这些钩子函数。
社区和生态系统：Vue 和 React 的生态系统都非常丰富，但是 React 的社区更加活跃，拥有更多的开发者和库。

Tammyhlf

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
Vue、React重点大全

1、生命周期vue2:总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。2、MVVMmvvm是一种设计思想。Model代表数据模型，可以在model中定义数据修改和操作的业务逻辑;view表示ui组件，负责将数据模型转换为ui展现出来，它做的是数据绑定的声明、指令的声明、事件绑定的声明。;而viewModel是一个同步view和model的对象。在mvvm框架中，view和model之间没有直接的关系，它们是通过viewModel来进行交互的。
复制链接

扫一扫