您现在的位置是：首页 > 关键词排名关键词排名

vue.js技术介绍？

江湖快报网2023-05-22 10:59:43【关键词排名】人已围观

简介一、vue.js技术介绍？
Vue是一套用于构建用户界面的渐进式的JavaScript框架。它具有体积小，更高的运行效率，双向数据绑定，生态丰富、学习成本低等优点，所以Vue也被广泛用在移动端

一、vue.js技术介绍？

Vue是一套用于构建用户界面的渐进式的JavaScript框架。它具有体积小，更高的运行效率，双向数据绑定，生态丰富、学习成本低等优点，所以Vue也被广泛用在移动端跨平台框架上。接下来，我将为大家梳理10个实现Vue.js极致性能优化的技巧，以供大家在实际运用中使用。

Vue框架通过数据双向绑定和虚拟DOM技术，帮我们处理了前端开发中最脏最累的DOM操作部分，我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM，但是我们仍然需要去关注Vue在跨平台项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。

二、vue 首屏页面性能优化

访问

目前采用引入依赖包生产环境的 js 文件方式加载，直接通过 window 可以访问余陪暴露出的全局变量，不必通过 import 引入，Vue.use 去注册弊毁宽

在 vue.config.js 中配置 externals

npm install babel-plugin-transform-remove-console --save-dev

（1）租亮安装依赖

npm i compression-webpack-plugin@5.0.1 --save-dev

（2）在 vue.config.js 配置

三、Vue单页面如何做seo页面优化

1、服务端渲染

服务端渲染对于刚接触vue的新手来说，并不是那袭带么友好，虽然已有官方SSR中文文档。但是对于一个已经开发完毕的vue项目去接SSR无论是从工作量还是技术角度来说，都是一种挑战。

2、预渲染方式

在构建时(buildtime)简或空单地生成针对特定路由的静态HTML文件。优点是设置预渲拍团芦染更简单，并可以将您的前端作为一个完全静态的站点。如果您使用webpack，您可以使用prerender-spa-plugin轻松地添加预渲染。它已经被Vue应用程序广泛测试。

四、整理涵盖很全很广的前端知识点

HTML、CSS相关

html5新特性、指陪语义化

浏览器渲染机制、重绘、重排

网页生成过程：

重排(也称回流): 当 DOM 的变化影响了元素的几何信息( DOM 对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。触发：

重绘：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。触发：

重排优化建议：

transform 不重绘，不回流是因为 transform 属于合成属性，对合成属性进行 transition/animate 动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。

css盒子模型

所有 HTML 元素可以看作盒子，在CSS中， box model 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

css样式优先级

!important>style>id>class

什么是BFC？BFC的布局规则是什么？如何创建BFC？BFC应用？

BFC 是 Block Formatting Context 的缩写，即块格式化上下文。 BFC 是CSS布局的一个概念，是一个环境，里面的元素不会影响外面的元素。布局规则：Box是CSS布局的对象和基本单位，页面是由若干个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的 Formatting Context 。创建：浮动元素 display：inline-block position:absolute 应用: 1.分属于不同的 BFC 时,可以防止 margin 重叠 2.清除内部浮动 3.自适应多栏布局

DOM、BOM对象

BOM（Browser Object Model）是指浏览器对象模型，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 JavaScript 有能力与浏览器对话。 DOM （Document Object Model）是指文档对象模型，通过它，可以访问 HTML 文档的所有元素。 DOM 是 W3C （万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 W3C DOM 标准被分为 3 个不同的部分：

什么是 XML DOM ？ XML DOM 定义了所有 XML 元素的对象和属性，以及访铅锋问它们的方法。什么是 HTML DOM？ HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

JS相关

js数据类型、typeof、instanceof、类型转换

闭包(高频)

闭包是指有权访问另一个函数作用域中的变量的函数 ――《JavaScript高级程序设计》

当函数可以记住并访问所在的词法作用域时，就产生了闭包，

即使函数是在当前词法作用域之外执行 ――《你不知道的唯激蠢JavaScript》

原型、原型链(高频)

原型: 对象中固有的 __proto__ 属性，该属性指向对象的 prototype 原型属性。

原型链: 当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是我们新建的对象为什么能够使用 toString() 等方法的原因。

特点: JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

this指向、new关键字

this 对象是是执行上下文中的一个属性，它指向最后一次调用这个方法的对象，在全局函数中， this 等于 window ，而当函数被作为某个对象调用时，this等于那个对象。在实际开发中， this 的指向可以通过四种调用模式来判断。

new

作用域、作用域链、变量提升

继承(含es6)、多种继承方式

（1）第一种是以原型链的方式来实现继承，但是这种实现方式存在的缺点是，在包含有引用类型的数据时，会被所有的实例对象所共享，容易造成修改的混乱。还有就是在创建子类型的时候不能向超类型传递参数。

（2）第二种方式是使用借用构造函数的方式，这种方式是通过在子类型的函数中调用超类型的构造函数来实现的，这一种方法解决了不能向超类型传递参数的缺点，但是它存在的一个问题就是无法实现函数方法的复用，并且超类型原型定义的方法子类型也没有办法访问到。

（3）第三种方式是组合继承，组合继承是将原型链和借用构造函数组合起来使用的一种方式。通过借用构造函数的方式来实现类型的属性的继承，通过将子类型的原型设置为超类型的实例来实现方法的继承。这种方式解决了上面的两种模式单独使用时的问题，但是由于我们是以超类型的实例来作为子类型的原型，所以调用了两次超类的构造函数，造成了子类型的原型中多了很多不必要的属性。

（4）第四种方式是原型式继承，原型式继承的主要思路就是基于已有的对象来创建新的对象，实现的原理是，向函数中传入一个对象，然后返回一个以这个对象为原型的对象。这种继承的思路主要不是为了实现创造一种新的类型，只是对某个对象实现一种简单继承，ES5 中定义的 Object.create() 方法就是原型式继承的实现。缺点与原型链方式相同。

（5）第五种方式是寄生式继承，寄生式继承的思路是创建一个用于封装继承过程的函数，通过传入一个对象，然后复制一个对象的副本，然后对象进行扩展，最后返回这个对象。这个扩展的过程就可以理解是一种继承。这种继承的优点就是对一个简单对象实现继承，如果这个对象不是我们的自定义类型时。缺点是没有办法实现函数的复用。

（6）第六种方式是寄生式组合继承，组合继承的缺点就是使用超类型的实例做为子类型的原型，导致添加了不必要的原型属性。寄生式组合继承的方式是使用超类型的原型的副本来作为子类型的原型，这样就避免了创建不必要的属性。

EventLoop

JS 是单线程的，为了防止一个函数执行时间过长阻塞后面的代码，所以会先将同步代码压入执行栈中，依次执行，将异步代码推入异步队列，异步队列又分为宏任务队列和微任务队列，因为宏任务队列的执行时间较长，所以微任务队列要优先于宏任务队列。微任务队列的代表就是， Promise.then ， MutationObserver ，宏任务的话就是 setImmediate setTimeout setInterval

原生ajax

ajax 是一种异步通信的方法,从服务端获取数据,达到局部刷新页面的效果。过程：

事件冒泡、捕获(委托)

event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡

ES6

Vue

简述MVVM

MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型， View 代表UI组件， ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。

谈谈对vue生命周期的理解？

每个 Vue 实例在创建时都会经过一系列的初始化过程， vue 的生命周期钩子，就是说在达到某一阶段或条件时去触发的函数，目的就是为了完成一些动作或者事件

computed与watch

watch 属性监听是一个对象，键是需要观察的属性，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作,监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用

computed 计算属性属性的结果会被缓存，当 computed 中的函数所依赖的属性没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取。除非依赖的响应式属性变化时才会重新计算，主要当做属性来使用 computed 中的函数必须用 return 返回最终的结果 computed 更高效，优先使用

使用场景 computed ：当一个属性受多个属性影响的时候使用，例：购物车商品结算功能 watch ：当一条数据影响多条数据的时候使用，例：搜索数据

v-for中key的作用

vue组件的通信方式

父子组件通信

父->子 props ，子->父 $on、$emit` 获取父子组件实例 parent、 parent 、children Ref 获取实例的方式调用组件的属性或者方法 Provide、inject` 官方不推荐使用，但是写组件库时很常用

兄弟组件通信

Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() Vuex

跨级组件通信

$attrs、$listeners Provide、inject

常用指令

双向绑定实现原理

当一个 Vue 实例创建时，Vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher重新计算，从而致使它关联的组件得以更新。

v-model的实现以及它的实现原理吗？

nextTick的实现

vnode的理解，compiler和patch的过程

new Vue后整个的流程

思考：为什么先注入再提供呢？？

答：1、首先来自祖辈的数据要和当前实例的data,等判重，相结合，所以注入数据的initInjections一定要在 InitState 的上面。2. 从上面注入进来的东西在当前组件中转了一下又提供给后代了，所以注入数据也一定要在上面。

vm.[Math Processing Error]mount(vm.mount(vm.options.el) ：挂载实例。

keep-alive的实现

作用：实现组件缓存

钩子函数：

原理： Vue.js 内部将 DOM 节点抽象成了一个个的 VNode 节点， keep-alive 组件的缓存也是基于 VNode 节点的而不是直接存储 DOM 结构。它将满足条件（pruneCache与pruneCache）的组件在 cache 对象中缓存起来，在需要重新渲染的时候再将 vnode 节点从 cache 对象中取出并渲染。

配置属性：

include 字符串或正则表达式。只有名称匹配的组件会被缓存

exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存

max 数字、最多可以缓存多少组件实例

vuex、vue-router实现原理

vuex 是一个专门为vue.js应用程序开发的状态管理库。核心概念：

你怎么理解Vue中的diff算法?

在js中,渲染真实 DOM 的开销是非常大的, 比如我们修改了某个数据,如果直接渲染到真实 DOM , 会引起整个 dom 树的重绘和重排。那么有没有可能实现只更新我们修改的那一小块dom而不要更新整个 dom 呢？此时我们就需要先根据真实 dom 生成虚拟 dom ，当虚拟 dom 某个节点的数据改变后会生成有一个新的 Vnode , 然后新的 Vnode 和旧的 Vnode 作比较，发现有不一样的地方就直接修改在真实DOM上，然后使旧的 Vnode 的值为新的 Vnode 。

diff 的过程就是调用 patch 函数，比较新旧节点，一边比较一边给真实的 DOM 打补丁。在采取 diff 算法比较新旧节点的时候，比较只会在同层级进行。在 patch 方法中，首先进行树级别的比较 new Vnode 不存在就删除 old Vnode old Vnode 不存在就增加新的 Vnode 都存在就执行diff更新当确定需要执行diff算法时，比较两个 Vnode ，包括三种类型操作：属性更新，文本更新，子节点更新新老节点均有子节点，则对子节点进行 diff 操作，调用 updatechidren 如果老节点没有子节点而新节点有子节点，先清空老节点的文本内容，然后为其新增子节点如果新节点没有子节点，而老节点有子节点的时候，则移除该节点的所有子节点老新老节点都没有子节点的时候，进行文本的替换

updateChildren 将 Vnode 的子节点Vch和oldVnode的子节点oldCh提取出来。 oldCh和vCh 各有两个头尾的变量 StartIdx和EndIdx ，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了 key ，就会用 key 进行比较，在比较的过程中，变量会往中间靠，一旦 StartIdx>EndIdx 表明 oldCh和vCh 至少有一个已经遍历完了，就会结束比较。

你都做过哪些Vue的性能优化？

你知道Vue3有哪些新特性吗？它们会带来什么影响？

更小巧、更快速支持自定义渲染器支持摇树优化：一种在打包时去除无用代码的优化手段支持Fragments和跨组件渲染

模板语法99%保持不变原生支持基于class的组件，并且无需借助任何编译及各种stage阶段的特性在设计时也考虑TypeScript的类型推断特性重写虚拟DOM 可以期待更多的编译时提示来减少运行时的开销优化插槽生成可以单独渲染父组件和子组件静态树提升降低渲染成本基于Proxy的观察者机制节省内存开销

检测机制更加全面、精准、高效,更具可调试式的响应跟踪

实现双向绑定 Proxy 与 Object.defineProperty 相比优劣如何?

React

1、react中key的作用，有key没key有什么区别，比较同一层级节点什么意思？

2、你对虚拟dom和diff算法的理解，实现render函数

虚拟DOM 本质上是 JavaScript 对象,是对真实DOM 的抽象表现。状态变更时，记录新树和旧树的差异最后把差异更新到真正的 dom 中 render函数:

3、React组件之间通信方式？

Context 提供了一个无需为每层组件手动添加 props ，就能在组件树间进行数据传递的方法.如果你只是想避免层层传递一些属性，组件组合（ component composition ）有时候是一个比 context 更好的解决方案。 5. 组件组合缺点：会使高层组件变得复杂

4、如何解析jsx

5、生命周期都有哪几种，分别是在什么阶段做哪些事情？为什么要废弃一些生命周期？

componentWillMount、componentWillReceiveProps、componentWillUpdate在16版本被废弃，在17版本将被删除，需要使用UNSAVE_前缀使用，目的是向下兼容。

6、关于react的优化方法

使用return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少。

不要使用数组下标作为key 利用 shouldComponentUpdate 和 PureComponent 避免过多 render function ; render 里面尽量减少新建变量和bind函数，传递参数是尽量减少传递参数的数量。尽量将 props 和 state 扁平化，只传递 component 需要的 props （传得太多，或者层次传得太深，都会加重 shouldComponentUpdate 里面的数据比较负担），慎将 component 当作 props 传入

使用 babel-plugin-import 优化业务组件的引入，实现按需加载使用 SplitChunksPlugin 拆分公共代码使用动态 import ，懒加载 React 组件

7、绑定this的几种方式

8、对fiber的理解

9、setState是同步还是异步的

10、Redux、React-Redux

Redux的实现流程

用户页面行为触发一个 Action ，然后 Store 调用 Reducer ，并且传入两个参数：当前 State 和收到的 Action 。 Reducer 会返回新的 State 。每当 state 更新之后， view 会根据 state 触发重新渲染。

React-Redux:

Provider ：从最外部封装了整个应用，并向 connect 模块传递 store 。 Connect ：

11、对高阶组件的理解

高阶组件是参数为组件，返回值为新组件的函数。 HOC 是纯函数，没有副作用。 HOC 在 React 的第三方库中很常见，例如 Redux 的 connect 组件。

高阶组件的作用：