js
- 函数有 arguments、this 这两个特殊对象。 ES6新增了 new.target 属性，用来判断函数是否是使用 new 关键字调用的。不是的话会返回undefined。
- 函数有声明和赋值两种定义方法，只有函数声明才会提升。箭头函数只有赋值这种定义方式，因此箭头函数不会变量提升。
- 动画实现方式：
- css动画 transition：过渡动画；animation:直接动画（搭配@keyframes）
- js 动画 定时器实现(不断改变dom位置，使其运动起来）、canvas＋定时器实现（canvas只是一个画笔，我们通过定时器使用这个画笔去画画）、rAF
- SVG 动画
- rAF是宏任务（还有一种说法，表现的既不像宏任务，也不像微任务，但是会在GUI线程调起之后执行。GUI唤起的时间间隔大约为15ms）
- 动画为什么会卡顿？
- 定时器做动画存在一个问题，因为浏览器的计时器本身就是不精准的，会导致计时越来越不精准，会导致错过大量的渲染帧，或者同一帧变化很大，这也就导致了动画的卡顿或者抖动，而且动画有可能不会在规定时间内完成。
封装组件之前看看
juejin.cn/post/736538… juejin.cn/post/727526…
一些封装组件的案例
juejin.cn/post/716606… （vue3+el-table）
juejin.cn/post/743489… （vue2+el-table）
不要过度封装组件
vue模板编译的概念
Vue 的模板编译，是将模板字符串（如 HTML）转化为可执行的 JavaScript 渲染函数的过程。编译后的函数会用于生成 Virtual DOM 节点，并在后续更新中提升渲染性能。 juejin.cn/post/722585… （vue的模板编译过程和原理）
只会在初始时编译一次，生成渲染函数（h，render），后续页面更新就使用渲染函数来生成新的虚拟DOM，进行diff比较，然后更新页面。
vue3的静态变量的提升
什么是静态提升？静态提升是Vue3编译优化中的其中一个优化点。所谓的静态提升，就是指在编译器编译的过程中，将一些静态的节点或属性提升到渲染函数之外。
编译过程是什么样的？ vue2.x的编译过程：开始->parse阶段，编译模板生成原始AST（这是一个描述模板结构的树状数据结构。）->optimize阶段，优化原始AST,对每一个AST Element为静态根节点（- 如果一个静态节点的所有子节点也都是静态节点，则该节点为静态根。）或静态节点（如果一个节点不包含动态绑定，则标记为静态节点）->generate阶段，根据优化后的AST，生成render函数 vue3.x的编译过程：开始->parse阶段，编译模板生成原始AST->transform阶段，优化原始AST,对每一个AST Element进行转换，例如文本元素、指令元素、动态元素等等的转化->generate阶段，根据优化后的AST，生成render函数
transform对静态变量提升具有重要的作用。
在vue中，每次响应式变量更新后都会执行render函数，每次执行render函数都会执行createElementVNode方法生成h1标签的虚拟DOM。但是我们这个h1标签明明就是一个静态节点，根本就不需要每次执行render函数都去生成一次h1标签的虚拟DOM。vue3对此做出的优化就是将“执行createElementVNode方法生成h1标签虚拟DOM的代码”提取到render函数外面去，这样就只有初始化的时候才会去生成一次h1标签的虚拟DOM，也就是“静态提升” 。生成h1标签虚拟DOM的createElementVNode函数被提取到render函数外面去执行了，只有初始化时才会执行一次将生成的虚拟DOM赋值给_hoisted_1变量。在render函数中直接使用_hoisted_1变量即可，无需每次执行render函数都去生成h1标签的虚拟DOM，这就是我们这篇文章中要讲的“静态提升”。
在生成的render函数中h1标签静态节点已经变成了_hoisted_1变量，_hoisted_1变量中存的是静态节点h1的虚拟DOM，所以每次页面更新重新执行render函数时就不会每次都去生成一遍静态节点h1的虚拟DOM。
静态节点提升在整个 compile 编译阶段体现，从最初的 baseCompile 到 transform 转化原始 AST、再到 generate 的优先 render 函数处理生成可执行代码，最后交给 Runtime 时的 Render 执行，这种设计可以说是非常精妙！所以，这样一来，就完成了我们经常看到在一些文章提及的「Vue3」对于静态节点在整个生命周期中它只会执行一次创建，这在一定程度上降低了性能上的开销。经过静态提升后，在渲染函数内只会持有对静态节点的引用。当响应式数据发生变化，并使得渲染函数重新执行时，并不会重新创建静态的虚拟节点，从而避免了额外的性能开销。
css动画
juejin.cn/post/728976… （animation属性和tansition属性）
