概念

原理

难度：⭐⭐⭐⭐

答案

Vue 的 scoped 样式原理主要是通过在编译阶段给每个标签生成唯一的哈希标识符，并将这个哈希标识符添加到样式类名中，以实现样式的局部作用域。这样，样式只会影响到具有相同哈希标识符的元素。

具体原理步骤如下：

这样做的好处是，样式类名的唯一性确保了样式的局部性，不会污染全局样式。这对于组件化开发非常有用，防止了样式冲突的问题。

例如，如果原本的样式是这样的：

cssCopy code/* 全局样式 */
.your-class {
  color: red;
}

经过 scoped 处理后，变成了：

cssCopy code/* 编译后的样式 */
.scoped-xxxxxx .your-class {
  color: red;
}

这样，.your-class 样式只会影响到拥有相同哈希标识符的元素。这就是 Vue 的 scoped 样式的基本原理

难度：⭐⭐

答案

当虚拟 DOM 渲染到页面时，框架通常会执行以下主要处理步骤：

比对更新：
- 框架会将虚拟 DOM 与上一次渲染的虚拟 DOM 进行比对，找出发生变化的部分。这一过程通常称为“虚拟 DOM 的 diff 操作”。
- 比对的目的是找出需要更新的部分，以便最小化实际 DOM 的操作次数，提高渲染效率。
生成更新补丁：
- 比对完成后，框架会根据发生变化的部分生成更新补丁（patch）。
- 更新补丁通常包含了需要对实际 DOM 进行的操作，比如新增节点、删除节点、修改节点属性等。
应用更新补丁：
- 框架会根据生成的更新补丁，按照一定的顺序依次对实际 DOM 进行操作。
- 这些操作会被批量执行，以提高性能。
更新组件状态：
- 如果在渲染过程中需要更新组件的状态（比如状态驱动的框架中），框架会执行相应的状态更新操作。
- 这可能会触发组件的重新渲染过程，从而形成一个渲染循环。
触发生命周期钩子：
- 在更新完成后，框架会触发相应的生命周期钩子，通知应用程序更新完成或者执行其他操作。
- 这些生命周期钩子可以用于执行一些额外的逻辑，比如在更新完成后执行一些副作用操作。