vue知识储备

1. vue3效率的提升

1. 静态提升：vite中内置了模板预编译器，会将vue文件中的template模板编译为render函数。静态元素节点和静态属性会被提升，减少了内存占用。

2. 预字符串化：当编译器遇到template模板中大量连续的静态内容（比如20个节点）时，会直接将其编译为一个普通的字符串节点。节点树减少了超多~

3. 缓存事件处理函数：保证事件处理函数只生成一次，下一次使用就不用再生成了。

4. Block Tree：新旧两颗树对比的时候，提升对比(patch)的效率。

        之前vue2对每个对应的节点都进行对比，其中包含大量无用的静态节点对比。

        vue3依托他强大的编译器，能够对每一个节点进行标记他是静态的还是动态的。并把所有动态节点提取到根节点里面去，根节点会存储一个所有动态节点的数组。对比的时候直接找到根（block）节点记录的动态节点数组，直接对比新旧两棵树的动态节点数组。（ps：如果树不稳定，会将树的上一级节点也记录为一个block）

5. PatchFlag：vue3编译器在进行标记动态节点的时候，会具体标记这个动态节点的哪些信息是动态的

2. vue3数据响应式

1. vue3直接使用proxy代理来实现响应式，所以对数据的访问是动态的。当访问某一个属性的时候，再动态的获取和设置，极大的提升了组件初始化阶段效率（new Proxy即可）

但vue2需要在组件初始化阶段使用Object.defineProperty递归遍历所有的属性。

2. proxy本身效率就比Object.defineProperty快，且能监听到属性的新增、删除，以及数组的索引访问。Object.defineProperty很难监听到属性的增删和数组的索引访问

3. 为什么vue3中去掉了Vue构造函数

1. 调用构造函数Vue的静态方法会对所有vue应用生效，不利于隔离不同的应用

2. Vue构造函数集成了太多的功能，不利于tree shaking。而vue3把这些功能作为普通函数导出，能够充分利用tree shaking优化打包体积。

3. vue2中没有把组件和vue实例概念区分开。vue2中，使用new Vue创建的对象即是一个vue实例，也是一个特殊的组件。vue3，使用createApp创建的对象是一个vue应用，它内部提供的方法是针对整个应用的，而不再是一个特殊的组件。

4. watch和watchEffect的区别

1. watch需要指定监听的数据和回调函数，watchEffect则会自动手收集依赖

2. watch监测到数据变化时， 能收集到旧值。watchEffect不能

3. watchEffect回调函数会立即执行一次