面试题1205

w_cyj

于 2020-12-05 09:50:56 发布

阅读量113

点赞数

分类专栏：面试题文章标签： javascript

本文链接：https://blog.csdn.net/w_cyj/article/details/110677221

版权

面试题专栏收录该内容

21 篇文章 0 订阅

订阅专栏

mixin

局部混入和全局混入；

局部混入：

顾名思义就是部分混入，也就是只有引入了mixin的混入对象才可以使用，并且只有在引入了mixin混入对象的组件中才生效；

//这里注意：属性名为mixins，值为数组类型
  mixins:[mixin],

由此，我们可以知道mixin混入对象的变量是不会共享的；也就是你page1发生了变化，并不会通知mixin进行实时刷新数据，发生的变化只会在page1.vue中生效，不影响其他组件；

全局混入：

全局混入我们只需要把mixin.js引入到main.js中，然后将mixin放入到Vue.mixin()方法中即可；

import mixin from "./mixin/mixin.js"
Vue.mixin(mixin)

是的，全局混入更为便捷，我们将不用在子组件声明，全局混入将会影响每一个组件的实例，使用的时候需要小心谨慎；这样全局混入之后，我们可以直接在组件中通过this.变量/方法来调用mixin混入对象的变量/方法；

mixin混入对象和Vuex的区别：

Vuex是状态共享管理，所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的；

mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；

mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；

mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖；

原型protptype

construtor

proto

原型方式创建类实例化会将构造函数的prototype对象下的所有方法和属性添加到实例化对象下

object.asssign() —ES6

类的原型等同于实例化对象的原型链

HTMLDivElement.prototype.方法=function(){

}

Object.definePropertype(HTMLDivElement.prototype,{
    
})

Array.prototype.some=function(fn){

for(var i=0;i<this.length;i++)}{

if(fn(this[i],i,this))   return true}

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念

自定义HOOK

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook

CSS动画

3个属性：transition,animation,transform

实现步骤：

1.css定位 2.rgba设置颜色透明度 3.转换＋动画 transform＋animation 4.动画平滑过渡 transition

JS动画

有3种方法
setTimeout、setInterval、requestAnimationFrame

前两种方法的缺陷是需要自己设置动画帧的刷新时间。时间太短，浏览器来不及处理，时间太长，动画又不流畅。requestAnimationFrame方法是h5提供的一种专门解决动画更新的API，浏览器会自动以最合适的频率去刷新动画。

url-loader 和 file-loader的区别

file-loader

file-loader 返回的是图片的url

url-loader

url-loader可以通过limit属性对图片分情况处理，当图片小于limit（单位：byte）大小时转base64，大于limit时调用file-loader对图片进行处理。

相同点：都是在webpack中处理图片、字体图标等文件。
关系：url-loader封装了file-loader，但url-loader并不依赖于file-loader。

webpack常用loader

style-loader 将css添加到DOM的内联样式标签style里
css-loader 允许将css文件通过require的方式引入，并返回css代码
less-loader 处理less
sass-loader 处理sass
postcss-loader 用postcss来处理CSS
autoprefixer-loader 处理CSS3属性前缀，已被弃用，建议直接使用postcss
file-loader 分发文件到output目录并返回相对路径
url-loader 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url
html-minify-loader 压缩HTML
babel-loader 用babel来转换ES6文件到ES5

webpack优化

在配置 Loader 时通过 include 去缩小命中范围
优化 resolve.modules 配置，指明存放第三方模块的绝对路径，以减少寻找，配置如下：
优化 resolve.extensions 配置后缀名
- 频率出现最高的文件后缀要优先放在最前面
HappyPack的核心原理就是把这部分任务分解到多个进程去并行处理，从而减少了总的构建时间。
ParallelUglifyPlugin 会开启多个子进程，把对多个文件的压缩工作分配给多个子进程去完成，每个子进程其实还是通过 UglifyJS去压缩代码，但是变成了并行执行。所以 ParallelUglifyPlugin 能更快的完成对多个文件的压缩工作。
使用 webpack 模块负责监听文件，webpack-dev-server 模块则负责刷新浏览器。

减少用户能感知到的加载时间，也就是首屏加载时间。
- 4-7 区分环境
- 4-8 压缩代码
- 4-9 CDN 加速
- 4-10 使用 Tree Shaking
  Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码（没用到的代码）。它依赖静态的 ES6 模块化语法，例如通过 import 和 export 导入导出。
- 4-11 提取公共代码
- 4-12 按需加载
提升流畅度，也就是提升代码性能。
- 4-13 使用 Prepack
- 4-14 开启 Scope Hoisting
- Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
- Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
- Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
- Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
- Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
- Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

react生命周期

shouldComponentUpdate(nextProps,nextState)

shouldComponentUpdate函数是重渲染时render()函数调用前被调用的函数，它接受两个参数：nextProps和nextState，分别表示下一个props和下一个state的值。并且**，当函数返回false时候，阻止接下来的render()函数的调用，阻止组件重渲染**，而返回true时，组件照常重渲染。

主要用于性能优化(部分更新)
唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新
因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断

值更新时才会被触发
返回true是才会

新增生命周期

getDerivedStateFromProps(nextProps, prevState)

代替componentWillReceiveProps()。

老版本中的componentWillReceiveProps()方法判断前后两个 props 是否相同，如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会增加组件的重绘次数。

getSnapshotBeforeUpdate(prevProps, prevState)

代替componentWillUpdate。
常见的 componentWillUpdate 的用例是在组件更新前，读取当前某个 DOM 元素的状态，并在 componentDidUpdate 中进行相应的处理。
这两者的区别在于：

在 React 开启异步渲染模式后，在 render 阶段读取到的 DOM 元素状态并不总是和 commit 阶段相同，这就导致在
componentDidUpdate 中使用 componentWillUpdate 中读取到的 DOM 元素状态是不安全的，因为这时的值很有可能已经失效了。
getSnapshotBeforeUpdate 会在最终的 render 之前被调用，也就是说在 getSnapshotBeforeUpdate 中读取到的 DOM 元素状态是可以保证与 componentDidUpdate 中一致的。
此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。

immutable方法

fromJS(obj)把传入的obj封装成immutable对象，在赋值给新对象时传递的只有本身的值而不是指向内存的地址。
obj.set(属性名，属性值)给obj增加或修改属性，但obj本身并不变化，只返回修改后的对象
obj.get(属性名)从immutable对象中取得属性值

setState

它的工作除了要更动this.state之外，还要负责触发重新渲染(render)，这里面要经过React核心中diff演算法，最终才能决定是否要进行重渲染，以及如何渲染。而且为了批次与效能的理由，多个setState呼叫有可能在执行过程中还需要被合并，所以它被设计以异步的或延时的来进行执行是相当合理的。
state(状态)是独立于每个组件内部的，而且它是个不能直接更动的对象，
可以同步，在ajax、原生事件与setTimeout中是同步的

PureComponent、Component、纯函数组件的区别

TS

接口和类的区别

interface – 接口只声明成员方法，不做实现。

class – 类声明并实现方法。

泛型

泛型：一种抽象类型的能力
TS中泛型的实现使我们能够创建可重用的组件，一个组件可以支持多种类型的数据，为代码添加额外的抽象层和可重用性。泛型可以应用于TS中的函数、接口和类。

接口的作用：在面向对象编程中，接口是一种规范的定义，它定义行为和动作的规范。
在程序设计里面，接口起到一定的限制和规范作用。接口定义某一些类所遵守的规范，接口不关心这些类的内部状态数据，也不关心类里面方法的实现细节
它只规定这批类中必须提供某些方法，提供的这些方法就可以满足某些需求。
ts的接口同时增加更灵活的接口类型，包括属性，函数，可索引和类等。

类型的数据，为代码添加额外的抽象层和可重用性。泛型可以应用于TS中的函数、接口和类。

w_cyj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题1205

mixin局部混入和全局混入；局部混入：顾名思义就是部分混入，也就是只有引入了mixin的混入对象才可以使用，并且只有在引入了mixin混入对象的组件中才生效；//这里注意：属性名为mixins，值为数组类型 mixins:[mixin],由此，我们可以知道mixin混入对象的变量是不会共享的；也就是你page1发生了变化，并不会通知mixin进行实时刷新数据，发生的变化只会在page1.vue中生效，不影响其他组件；全局混入：全局混入我们只需要把mixin.js引入到main.js中，
复制链接

扫一扫