最近在写元素周期表时，发现 svg 很多属性不是记得十分清楚，导致角度出问题，现在特来总结回顾一下

# 一、path 路径是什么？

path 路径是 svg 中最强大的图形

路径是由一系列命令所组成。 包括以下基本指令：

PS：如果指令字母是大写的，例如 M, 则表示坐标位置是绝对位置；如果指令字母小写的，例如 m, 则表示坐标位置是相对位置。

# 虚拟 DOM

虚拟 DOM（Virtual DOM），就是一个 JS 对象，用来描述我们希望在页面中看到的 HTML 结构内容.

为什么使用虚拟 DOM？ 真实 DOM 对象属性多，处理起来繁琐、效率低。更重要的原因：React 要做跨平台开发，而不是被束缚在浏览器端。

• 原生 DOM 对象： 也是一个 JS 对象，是浏览器默认提供的
• DOM 对象 和 HTML 元素之间是一一对应的关系

# 一、animation 属性也是一个简写属性，用于设置六个动画属性。

用法：animation: name duration timing-function delay iteration-count direction;

这六个属性值分别为：

# 1、什么是微前端

微前端是一种架构风格，旨在通过将前端应用程序拆分为更小、更可管理的部分，使团队能够独立开发、部署和维护这些部分。微前端的目标是将前端应用程序拆分成多个更小的、独立的部分，这些部分可以由不同的团队开发和部署，同时还可以组合成一个完整的前端应用程序。

# 面试题 1

Vue 打包后，assets 和 static 的区别是什么？

道为专家解析：

相同点：assets 和 static 两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点。

不相同点：assets 中存放的静态资源文件在项目打包时，也就是运行 npm run build 时会将 assets 中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在 static 文件中跟着 index.html 一同上传至服务器。static 中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。

因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是 static 中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于 assets 中打包后的文件提交较大点。在服务器中就会占据更大的空间。

建议：将项目中 template 需要的样式文件 js 文件等都可以放置在 assets 中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如 iconfoont.css 等文件可以放置在 static 中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。

我们都知道，Vue 是一套用于构建用户界面的渐进式框架，是目前前端领域主流框架之一，作为前端框架，它有两大核心：

1. 数据双向绑定：当数据发生改变，视图可以自动更新，可以不用关心 dom 操作，而专心数据操作；
2. 可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试。

Vue 从之前的 1 版本到现在基本所有公司都用到的 2 版本经历了一次重大变革，到 2020 年 10 月 5 日，Vue3 的源码正式发布。3 版本的发布其中比较变化大的一个点就是 Vue 的数据双向绑定的原理发生了变化，那么我们知道，** 数据双向绑定的原理在前端的面试中基本上是必问的，可见其重要性。** 那么接下来我们着重讨论一下 Vue2 和 Vue3 版本的数据双向绑定原理的区别及其各自的优缺点。

# 前言

最近跨标签页数据传输这类功能点比较火，因为现在跨标签同步数据共享的需求越来越多了，所以大家伙也就都探讨这类功能点的实现方式

今天我就在 Vue3 项目中，给大家演示一下纯前端如何实现跨标签通信：

1. BroadCast Channel
2. Service Worker
3. LocalStorage + onstorage
4. open + postMessage

为什么用这个，首先想要手写仓库，那么你使用的数据就必须是响应式数据，不然你改变了，页面却没有改。
而 Vue.observable 和 reactive 都是把数据变成响应式的方法

# transition-group

transition-group 是表示的一组动画，一般常配合 v-for 动态渲染使用，由于 transition 中只能是单个的元素，因此如果需要多个元素添加动画效果需要加入 transition-group 使用。