1.vue3与vue2区别
vue2是监听每个属性，需要遍历；vue3监听的的是整个对象，由于监听的不是属性了，对属性的新增，删除是可以收到通知的，是针对对象的，https://www.bilibili.com/video/BV1Y9pjenEu4/?spm_id_from=333.1007.tianma.2-3-6.click&vd_source=132e3eb390ba4e240943d6870c656cff
响应式原理不同，Vue2 响应式原理基础是 Object.defineProperty；Vue3 响应式原理基础是 Proxy。主要原因：无法监听对象或数组新增、删除的元素。
Vue3 支持多个根节点，也就是 fragment
Vue3 在组合式API，需要先引入
Vue3 提供 Suspense 组件， Teleport 组件
2.vue当中父子组件生命周期的调用顺序
挂载阶段
一定得等子组件挂载完毕后，父组件才能挂在完毕，所以父组件的mounted在最后。
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted；
更新阶段 父peforeUpdate->子beforeUpdate->子updated->父updated
销毁阶段 父beforeDestroy->子peforeDestroy->子destroyed->父destroyed
3.vue事件绑定原理
Vue中通过v-on或其语法糖@指令来给元素绑定事件，Vue绑定事件的原理是通过Vue的响应式系统和虚拟DOM，在DOM元素上进行事件监听，并将其转化为Vue的自定义事件，然后调用相应的事件处理方法来实现事件响应和处理。
4.如何自定义一个v-model
v-model是v-on和v-bind的语法糖
v-on用于事件绑定，给当前组件绑定一个input事件。
v-bind用于属性绑定，给当前组件绑定一个value属性。
在自定义组件中，我们可以通过在组件内部使用 value 属性和手动触发 input 事件来实现 v-model 的双向绑定效果
5.作用域插槽
作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据。
在一个组件中除了一个小地方显示的东西不同，其他的内容都是一样的！为了实现业务效果,有几个状态写几个组件或者直接写在页面中(不利于维护).这个时候就会用到作用域插槽
6.组件间如何通信
父子组件通信的常用方法：Props 属性传递：父组件通过 props 将数据或方法传递给子组件，子组件通过 props 接收并使用传递过来的数据或方法，Emit 事件触发：子组件通过 refs访问子组件的数据和方法。
Vuex：集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
7.描述组件的渲染和更新过程
初始化组件、渲染组件、更新过程；
渲染组件：在初始化完成后，Vue会调用组件的渲染函数来生成虚拟DOM树。计算属性和侦听器会在组件实例化后初始化，确保它们可以正确响应数据变化。执行渲染函数使用_c(create element)和_v(create text node)方法来构建虚拟DOM树。
更新过程：
当组件中的数据发生变化时，Vue的响应式系统会检测到这些变化，并触发更新。
Vue会重新调用组件的渲染函数，生成新的虚拟DOM树。
新旧虚拟DOM树会被进行比较，找出需要更新的部分。
根据虚拟DOM的差异，Vue只会更新实际DOM中真正需要改变的部分，从而提高性能。
8.diff算法的原理
Diff算法通过比较节点属性、子节点和key，找出新旧节点之间的差异，然后根据差异来更新实际DOM节点。在对比子节点时，Diff算法采用了一些优化策略，尽可能地复用已有的DOM节点，减少对实际DOM的操作，从而提高渲染效率。
9.详细虚拟dom，自定义实现虚拟Dom怎么做
虚拟dom就是虚拟的dom对象，通过JavaScript 对象来模拟dom对象。Virtual DOM 是真实 DOM 的映射；DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的，当虚拟 DOM 树中的某些节点改变时，会得到一个新的虚拟树。算法对这两棵树(新树和旧树)进行比较，找出差异，然后只需要在真实的 DOM 上做出相应的改变
通过引入vdom我们可以获得如下好处：
将真实元素节点抽象成 虚拟DOM，有效减少直接操作 dom 次数，从而提高程序性能方便实现跨平台。
操作 dom 是很耗性能的操作，频繁的dom操作容易引起页面的重绘和回流，但是通过抽象 VNode 进行中间处理，可以有效减少直接操作dom的次数，从而减少页面重绘和回流。
createElement 创建 VNode 的过程，每个 VNode 有 children，children 每个元素也是一个VNode，这样就形成了一个虚拟树结构，用于描述真实的DOM树结构
用 JS 对象模拟 DOM 树：
用JS表示DOM结构，DOM节点包括标签、属性和子节点；为元素添加渲染函数render。render方法会根据tagName构建一个真正的DOM节点，然后设置这个节点的属性，最后递归地把自己的子节点也构建起来，用appendChild插入到body里面，到这里，我们已经可以将真实的DOM，用JS对象模拟出来。比较两棵虚拟DOM树的差异：记录差异性。有哪些类型的差异？
给我设计的话，我会从三方面去考虑： 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中。 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异。 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。此阶段会利用到Diff算法。因为挂载过程结束后，vue程序进入更新流程。如果某些响应式数据发生变化，将会引起组件重新render，此时就会生成新的vdom，和上一次的渲染结果diff就能得到变化的地方，从而转换为最小量的dom操作，高效更新视图。
10.项目中复用逻辑，怎么抽取如何操作
我们把系统中通用的代码逻辑抽取出来，变成公共方法或公共类，然后在多个地方调用，这就是最简单的技术上的复用。
11.对Keep-alive的理解
keep-alive是用于缓存组件状态，避免重复渲染。这样可以提高性能，减少不必要的渲染操作。
keep-alive是Vue中内置的一个抽象组件。它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。生命周期钩子
keep-alive提供了两个生命钩子，分别是activated与deactivated。
因为keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。
组件一旦被keep-alive缓存，那么再次渲染的时候就不会执行 created、mounted 等钩子函数。使用keep-alive组件后，被缓存的组件生命周期会多activated和deactivated 两个钩子函数，它们的执行时机分别是keep-alive包裹的组件激活时调用和停用时调用。
keep-alive的工作原理可以分为两个方面来理解：
缓存组件：
当keep-alive包裹的组件第一次被渲染时，Vue会将其渲染成一个标签，同时会创建一个缓存对象，用于存储包裹组件的实例和虚拟DOM。之后，当这个组件被卸载时，Vue并不会立即销毁实例，而是将其保存在缓存对象中，同时保留其虚拟DOM。
优化渲染：
当包裹的组件再次需要被渲染时，Vue会先判断缓存对象中是否已存在组件的实例和虚拟DOM。如果存在，则直接从缓存中获取，并通过复用之前的实例和虚拟DOM，省去了重新创建和挂载组件的过程，从而提高了渲染性能。
比如我们有个列表页，在点击详情页之后，如果返回之后不想刷新列表页，就可以用keep-alive组件进行缓存。
但是，keep-alive也会带来一些问题，比如内存泄漏、缓存过多等问题，需要根据具体情况进行权衡。
12.action与mutation的区别
Mutation：专注于修改State，理论上是修改State的唯一途径。
Action：业务代码、异步请求。Action通过提交mutation来间接改变State，最后是通过提交mutation实现的。Action的触发通过store.dispatch进行，而mutation的触发通过store.commit进行。
13.hash路由与history路由是如何实现的
Hash路由：
Hash路由通过改变URL中的#后面的部分来实现无需向服务器发送请求的页面内跳转。在JavaScript中，我们可以监听hashchange事件来处理路由变化。
History路由是HTML5引入的新特性，可以通过history.pushState和history.replaceState方法操作浏览器的历史记录栈来改变URL，同时不会导致页面刷新。
14.Vue常见优化
- 使用
v-once减少不必要的更新 - 使用
key来提高列表渲染性能 - 使用
v-if与v-show正确控制元素的显示隐藏 - 利用
keep-alive缓存组件 - 使用计算属性(computed properties)
- 使用
lazy特性 - 采用合理的异步组件加载策略
- 使用
v-lazy指令加载图片 - 利用Webpack进行代码分割
- 优化网络请求
- 性能监测工具的使用
https://blog.csdn.net/Schaffer_W/article/details/111152067
https://blog.csdn.net/Trouvailless/article/details/128199583
网友评论