复习3

89 阅读6分钟

1.new操作符都做了些什么

  1. 创建新对象‌:首先,new操作符会创建一个全新的空对象。这个新对象的原型链(__proto__)被设置为构造函数的prototype属性,这样新对象就可以访问构造函数原型上的所有方法和属性‌12。
  2. 绑定this到新对象‌:接下来,构造函数被调用,并且this关键字被绑定到新创建的对象上。这意味着在构造函数内部声明的所有属性和方法都会成为新对象的属性‌12。
  3. 执行构造函数代码‌:构造函数内部的代码会执行,可能包括为this添加新的属性和方法。如果构造函数返回一个对象,那么这个返回值会被忽略,new操作符会返回步骤1中创建的新对象;如果构造函数返回一个原始值(如数字、字符串、布尔值),new操作符也会返回步骤1中创建的新对象‌12。
  4. 返回新对象‌:如果构造函数没有显式地返回一个对象,或者返回的是一个基本数据类型,那么new操作符会返回步骤1中创建的新对象‌12。

2.什么是事件委托,什么是事件冒泡

事件委托(Event Delegation) ‌是一种利用事件冒泡原理的技术,通过在父元素上设置事件监听器来管理所有子元素的相同事件

事件冒泡(Event Bubbling) ‌是指当一个元素上的事件被触发后,这个事件会从触发事件的元素开始,逐级向上传播到它的父级元素,直到传播到最顶层的window对象

3.undefined和null的区别

  • undefined:表示一个变量被声明了但没有赋值,或者一个变量、对象属性、数组元素等未定义或不存在。例如,变量被声明了但没有赋值,或者函数没有返回值时,默认返回undefined。‌
  • null:表示一个空值或没有对象。它常被用来表示一个空引用或不存在的对象。null是有意为之的,表示“没有对象”或“对象是空的”,而不是由于未定义或未初始化而产生的。

4.CSRF和XSS

image.png

image.png

5.Vue中的$nextTick有什么作用?

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM

在Vue 中更新DOM 是异步的, nextTick的主要应用的场景及原因。

1.1: 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

在 Vue生命周期函数中 created钩子函数中: DOM 并没有进行任何渲染, 而此时进行DOM 操作无异于是徒劳的, 所以此处一定将DOM 操作的js 代码放进Vue.nextTick 回调函数中, 与之对应的就是mounted()

钩子函数, 因为该钩子函数执行时所有的DOM 挂载和渲染都已经完成, 此时在该钩子函数中进行任何操作都不会有问题。

1.2: 在数据变化后要执行某个回调函数,而这个操作需要使用随数据改变而改变的DOM结构的时候, 这个操作都应该放进Vue.nextTick () 回调函数中。

6.Vue中的计算属性和监听的区别?

对于 computed

  • computed 监控的数据在 data 中没有声明
  • computed 不支持异步,当 computed 中有异步操作时,无法监听数据的变化
  • computed 具有缓存,页面重新渲染,值不变时,会直接返回之前的计算结果,不会重新计算
  • 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,一般使用 computed
  • computed 计算属性值是函数时,默认使用get方法。如果属性值是属性值时,属性有一个get和set方法,当数据发生变化时会调用set方法。

对于 watch

  • 监测的数据必须在 data 中声明或 props 中数据
  • 支持异步操作
  • 没有缓存,页面重新渲染时,值不改变时也会执行
  • 当一个属性值发生变化时,就需要执行相应的操作
  • 监听数据发生变化时,会触发其他操作,函数有两个参数:
immediate :组件加载立即触发回调函数
deep:深度监听,主要针对复杂数据,如监听对象时,添加深度监听,任意的属性值改变都会触发。
注意:对象添加深度监听之后,输出的新旧值是一样的。

computed 页面重新渲染时,不会重复计算,而 watch 会重新计算,所以 computed 性能更高些。

7.哈希和history路由的区别?

image.png

8.vue中的服务端渲染SSR?

image.png

image.png

9.webpack

webpack的工作原理?

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。

webpack打包原理

把一切都视为模块:不管是 css、JS、Image 还是 html 都可以互相引用,通过定义 entry.js,对所有依赖的文件进行跟踪,将各个模块通过 loader 和 plugins 处理,然后打包在一起。

按需加载:打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks,还可以将重复的部分单独提取出来作为 commonChunk,从而实现按需加载。把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。

webpack的核心概念

Entry: 入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点,默认为./src/index.js

output : 出口,告诉webpack在哪里输出它打包好的代码以及如何命名,默认为./dist

Module: 模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

Chunk: 代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

Loader: 模块转换器,用于把模块原内容按照需求转换成新内容。

Plugin: 扩展插件,在 Webpack 构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情。

10.vue 中的 keep-alive

keep-alive 是 vue 中的内置组件,能够在组件切换过程中将状态保留在内存中,防止重复的渲染 DOM; keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们; 设置了 keep-alive 缓存的组件,会多出两个生命周期(activated 和 deactivated )钩子

image.png