![[灵光一现]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_25.51e6984.png)
鑫的第七章
前端工程师
获得徽章 6
#每天一个知识点#
Vue 页面渲染流程：
初始化调用 $mount 挂载组件。
_render 开始构建 VNode，核心方法为 createElement，一般会创建普通的 VNode ，遇到组件就创建组件类型的 VNode，否则就是未知标签的 VNode，构建完成传递给 _update。
patch 阶段根据 VNode 创建真实节点树，核心方法为 createElm，首先遇到组件类型的 VNode，内部会执行 $mount，再走一遍相同的流程。普通节点类型则创建一个真实节点，如果它有子节点开始递归调用 createElm，使用 insert 插入子节点，直到没有子节点就填充内容节点。最后递归完成后，同样也是使用 insert 将整个节点树插入到页面中，再将旧的根节点移除。
Vue 页面渲染流程：
初始化调用 $mount 挂载组件。
_render 开始构建 VNode，核心方法为 createElement，一般会创建普通的 VNode ，遇到组件就创建组件类型的 VNode，否则就是未知标签的 VNode，构建完成传递给 _update。
patch 阶段根据 VNode 创建真实节点树，核心方法为 createElm，首先遇到组件类型的 VNode，内部会执行 $mount，再走一遍相同的流程。普通节点类型则创建一个真实节点，如果它有子节点开始递归调用 createElm，使用 insert 插入子节点，直到没有子节点就填充内容节点。最后递归完成后，同样也是使用 insert 将整个节点树插入到页面中，再将旧的根节点移除。
展开
1
2
#每天一个知识点#
vue路由中，history和hash两种模式的区别？
hash 模式：
hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。
优点：浏览器兼容性较好
缺点：路径在 # 的后面，比较丑
history 模式：
history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。线上部署基于 history API 的时候，一定要后端配合支持才行，否则会出现大量的 404。
优点：路径比较正规，没有 #
缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了
vue路由中，history和hash两种模式的区别？
hash 模式：
hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。
优点：浏览器兼容性较好
缺点：路径在 # 的后面，比较丑
history 模式：
history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。线上部署基于 history API 的时候，一定要后端配合支持才行，否则会出现大量的 404。
优点：路径比较正规，没有 #
缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了
展开
评论
点赞
#每天一个知识点#
vue中，key的作用和原理：
在 Vue 中，key 是用于帮助 Vue 识别和跟踪虚拟 DOM 的变化的特殊属性。当 Vue 更新渲染真实 DOM 时，它使用 key 属性来比较新旧节点，并尽可能地复用已存在的真实 DOM 节点，以提高性能。
Vue 在进行虚拟 DOM 的 diff 算法时，会使用 key 来匹配新旧节点，以确定节点的更新、移动或删除。它通过 key 属性来判断两个节点是否代表相同的实体，而不仅仅是根据它们的内容是否相同。这样可以保留节点的状态和避免不必要的 DOM 操作。
key 的工作原理如下：
当 Vue 更新渲染真实 DOM 时，它会对新旧节点进行比较，找出它们之间的差异。
如果两个节点具有相同的 key 值，则 Vue 认为它们是相同的节点，会尝试复用已存在的真实 DOM 节点。
如果节点具有不同的 key 值，Vue 会将其视为不同的节点，并进行适当的更新、移动或删除操作。
使用 key 可以提供更准确的节点识别和跟踪，避免出现一些常见的问题，比如在列表中重新排序时导致的元素闪烁、输入框内容丢失等。
总结：key 必须是唯一且稳定的，最好使用具有唯一标识的值，例如使用数据的唯一 ID。同时，不推荐使用随机数作为 key，因为在每次更新时都会生成新的 key，导致所有节点都重新渲染，无法复用已有的节点，降低性能。
vue中，key的作用和原理：
在 Vue 中，key 是用于帮助 Vue 识别和跟踪虚拟 DOM 的变化的特殊属性。当 Vue 更新渲染真实 DOM 时，它使用 key 属性来比较新旧节点，并尽可能地复用已存在的真实 DOM 节点，以提高性能。
Vue 在进行虚拟 DOM 的 diff 算法时，会使用 key 来匹配新旧节点，以确定节点的更新、移动或删除。它通过 key 属性来判断两个节点是否代表相同的实体，而不仅仅是根据它们的内容是否相同。这样可以保留节点的状态和避免不必要的 DOM 操作。
key 的工作原理如下：
当 Vue 更新渲染真实 DOM 时，它会对新旧节点进行比较，找出它们之间的差异。
如果两个节点具有相同的 key 值，则 Vue 认为它们是相同的节点，会尝试复用已存在的真实 DOM 节点。
如果节点具有不同的 key 值，Vue 会将其视为不同的节点，并进行适当的更新、移动或删除操作。
使用 key 可以提供更准确的节点识别和跟踪，避免出现一些常见的问题，比如在列表中重新排序时导致的元素闪烁、输入框内容丢失等。
总结：key 必须是唯一且稳定的，最好使用具有唯一标识的值，例如使用数据的唯一 ID。同时，不推荐使用随机数作为 key，因为在每次更新时都会生成新的 key，导致所有节点都重新渲染，无法复用已有的节点，降低性能。
展开
评论
2
#每天一个知识点#
symbol 有什么用处？
ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入 Symbol 的原因。
Symbol 值通过 Symbol 函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。
symbol 有什么用处？
ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入 Symbol 的原因。
Symbol 值通过 Symbol 函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。
展开
评论
点赞
#每天一个知识点#
为什么 Vue 中的 data 属性是一个函数而不是一个对象？
实例和组件定义 data 的区别：
vue 实例的时候定义 data 属性既可以是一个对象，也可以是一个函数；
而组件中定义 data 属性，只能是一个函数，如果为组件 data 直接定义为一个对象，会出现警告信息。
那为什么只有组件中不能定义成对象呢，在 vue 中我们定义好一个组件，最终都会通过Vue.extend() 构成组件实例，那我们就模仿组件构造函数，定义data属性，采用对象的形式创建两个组件实例：
const componentA = new Component()
const componentB = new Component()
想一下，修改 componentA 组件中属性的值，componentB 中的值也会发生改变。
这就是对象共用了同一个内存地址，componentA 修改的内容，同样对 componentB 产生了影响。
如果我们采用函数的形式，就不会出现这种情况。
简单来说，就是在根实例对象 data 可以是对象也可以是函数（根实例是单例），不会产生数据污染情况。
组件实例对象 data 必须为函数，目的是为了防止多个组件实例对象之间共用一个 data，产生数据污染。
为什么 Vue 中的 data 属性是一个函数而不是一个对象？
实例和组件定义 data 的区别：
vue 实例的时候定义 data 属性既可以是一个对象，也可以是一个函数；
而组件中定义 data 属性，只能是一个函数，如果为组件 data 直接定义为一个对象，会出现警告信息。
那为什么只有组件中不能定义成对象呢，在 vue 中我们定义好一个组件，最终都会通过Vue.extend() 构成组件实例，那我们就模仿组件构造函数，定义data属性，采用对象的形式创建两个组件实例：
const componentA = new Component()
const componentB = new Component()
想一下，修改 componentA 组件中属性的值，componentB 中的值也会发生改变。
这就是对象共用了同一个内存地址，componentA 修改的内容，同样对 componentB 产生了影响。
如果我们采用函数的形式，就不会出现这种情况。
简单来说，就是在根实例对象 data 可以是对象也可以是函数（根实例是单例），不会产生数据污染情况。
组件实例对象 data 必须为函数，目的是为了防止多个组件实例对象之间共用一个 data，产生数据污染。
展开
2
点赞
#每天一个知识点#
vue2 和 vue3 中 diff 计算区别：
vue2 diff 算法就是进行虚拟节点对比，并返回一个 patch 对象，用来存储两个节点不同的地方，最后用 patch 记录的消息去局部更新 Dom。 vue2 diff 算法会比较每一个vnode,而对于一些不参与更新的元素，进行比较是有点消耗性能的。
vue3 diff 算法在初始化的时候会给每个虚拟节点添加一个 patchFlags，patchFlags 就是优化的标识。 只会比较 patchFlags 发生变化的 vnode，进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用。
vue2 和 vue3 中 diff 计算区别：
vue2 diff 算法就是进行虚拟节点对比，并返回一个 patch 对象，用来存储两个节点不同的地方，最后用 patch 记录的消息去局部更新 Dom。 vue2 diff 算法会比较每一个vnode,而对于一些不参与更新的元素，进行比较是有点消耗性能的。
vue3 diff 算法在初始化的时候会给每个虚拟节点添加一个 patchFlags，patchFlags 就是优化的标识。 只会比较 patchFlags 发生变化的 vnode，进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用。
展开
2
1
#每天一个知识点#
Promise then 第二个参数和catch的区别是什么？
Promise 的 then 方法和 catch 方法都是用于处理 Promise 的 rejected 状态的情况。它们的区别在于：
1. then 方法的第二个参数
如果 Promise 的状态变为 rejected，then 方法的第二个参数会被调用。该参数是一个函数，可以接收一个参数，即 Promise 返回的错误信息。
2. catch 方法
catch 方法相当于 then 方法的第二个参数，也是用于处理 Promise 的 rejected 状态的情况。不同之处在于，catch 方法可以链式调用，而不需要在每次调用 then 方法时都传递第二个参数。
Promise then 第二个参数和catch的区别是什么？
Promise 的 then 方法和 catch 方法都是用于处理 Promise 的 rejected 状态的情况。它们的区别在于：
1. then 方法的第二个参数
如果 Promise 的状态变为 rejected，then 方法的第二个参数会被调用。该参数是一个函数，可以接收一个参数，即 Promise 返回的错误信息。
2. catch 方法
catch 方法相当于 then 方法的第二个参数，也是用于处理 Promise 的 rejected 状态的情况。不同之处在于，catch 方法可以链式调用，而不需要在每次调用 then 方法时都传递第二个参数。
展开
3
2
#每天一个知识点#
canvas 和 webgl 有什么区别？
渲染方式：
Canvas：Canvas 使用2D渲染上下文来绘制图形和图像。它基于像素的绘图系统，通过JavaScript脚本控制渲染过程。
WebGL：WebGL 是基于OpenGL ES标准的JavaScript API，它可以利用GPU进行硬件加速的3D图形渲染。WebGL 使用着色器编程，允许更复杂和高性能的图形渲染。
功能和复杂性：
Canvas：Canvas 提供了简单的2D图形绘制功能，包括绘制基本形状、路径、文本和图像等。它适用于绘制简单的图形和动画。
WebGL：WebGL 提供了强大的3D图形渲染功能，包括高级的着色器编程、纹理映射、深度缓冲、光照效果等。它适用于创建复杂的3D图形、游戏和交互式可视化。
编程难度：
Canvas：使用 Canvas 进行2D图形绘制相对简单，仅需基本的 JavaScript 知识和绘图API的了解即可开始绘制。
WebGL：WebGL 的编程相对复杂，需要了解着色器编程和3D图形渲染的概念。使用 WebGL 需要掌握OpenGL ES或类似的图形编程知识。
canvas 和 webgl 有什么区别？
渲染方式：
Canvas：Canvas 使用2D渲染上下文来绘制图形和图像。它基于像素的绘图系统，通过JavaScript脚本控制渲染过程。
WebGL：WebGL 是基于OpenGL ES标准的JavaScript API，它可以利用GPU进行硬件加速的3D图形渲染。WebGL 使用着色器编程，允许更复杂和高性能的图形渲染。
功能和复杂性：
Canvas：Canvas 提供了简单的2D图形绘制功能，包括绘制基本形状、路径、文本和图像等。它适用于绘制简单的图形和动画。
WebGL：WebGL 提供了强大的3D图形渲染功能，包括高级的着色器编程、纹理映射、深度缓冲、光照效果等。它适用于创建复杂的3D图形、游戏和交互式可视化。
编程难度：
Canvas：使用 Canvas 进行2D图形绘制相对简单，仅需基本的 JavaScript 知识和绘图API的了解即可开始绘制。
WebGL：WebGL 的编程相对复杂，需要了解着色器编程和3D图形渲染的概念。使用 WebGL 需要掌握OpenGL ES或类似的图形编程知识。
展开
评论
点赞
![[石化]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_73.55516c0.png)
，去趟医院太贵了 #每天一个知识点#
es5 中的类和 es6 中的 class 的区别：
1. class 类必须 new 调用，不能直接执行。
2. class 类不存在变量提升
3. class 类无法遍历它实例原型链上的属性和方法
4. new.target 属性（es6 为 new 命令引入了一个 new.target 属性，它会返回 new 命令作用于的那个构造函数）
5. class 类有 static 静态方法
es5 中的类和 es6 中的 class 的区别：
1. class 类必须 new 调用，不能直接执行。
2. class 类不存在变量提升
3. class 类无法遍历它实例原型链上的属性和方法
4. new.target 属性（es6 为 new 命令引入了一个 new.target 属性，它会返回 new 命令作用于的那个构造函数）
5. class 类有 static 静态方法
展开
评论
点赞