vue3性能提升主要体现出来的点-优快云博客

1. 响应式系统提升
    1.1  
        vue2在初始化的时候，对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象，还会递归调用defineproperty使之变为响应式对象。
    1.2  
        vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。
    优势：
        可以监听动态新增的属性；
        可以监听删除的属性 ；
        可以监听数组的索引和 length 属性；
2. 编译优化
    2.1 在Vue2中，模板编译过程是在运行时进行的，每个组件的模板都需要被编译成渲染函数，然后才能进行渲染。这种方式虽然灵
    活，但会增加运行时的性能开销。
    2.2 Vue3则将模板编译过程提前到了构建时，通过静态分析将模板转换成了纯JavaScript代码文件。这种方式极大地提高了渲染性能。

3. 源码体积的优化
    3.1  vue3移除了一些不常用的api，例如：inline-template、filter等
    3.2  使用tree-shaking
4. Proxy 相对于 Object.defineProperty 有哪些优点
    4.1  proxy的性能本来比defineproperty好
        proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。
        使用 Object.defineProperty 监听数据变化，需要为每个属性都创建一个 setter 和 getter，这会带来一定的性能问题，特别是当数据对象较大时。
        基于以上缺陷，Vue 在新版本中使用了更快、更强大的响应式引擎，即 Proxy。与 Object.defineProperty 不同，Proxy 可以监听到新增属性和删除属性，也可以监听到数组下标的变化，并且具有更好的性能。
    4.2  无法监听新增属性和删除属性
        使用 Object.defineProperty 可以监听已有属性的变化，但是它无法监听新增属性和删除属性。例如，我新增一个属性的时候就无法监听到
    4.3  无法监听数组下标的变化
        使用 Object.defineProperty 监听数组时，只能监听到数组元素的值的变化，而无法监听数组下标的变化。
    4.4  操作时不是对原对象操作,是 new Proxy 返回的一个新对象
    4.5 比如说一个对象，对象里面定义了 a:1  这个时候操作这个对象 b:2 就不是响应式的了
    4.6 比如说一个数组操作数组的下标，操作数组的长度都不是响应式的
5.Vue.js 3.0 响应式系统的实现原理
    5.1. reactive
        设置对象为响应式对象。接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理。
        创建拦截器handerler，设置get/set/deleteproperty。
    5.2  effect
        接收一个函数作为参数。作用是：访问响应式对象属性时去收集依赖
6. diff算法的优化
    6.1  Vue2的Dif算法采用了双向指针遍历算法，与React中的Diff算法类似， 不过由于Vue2中的虚拟DOM并没有真实的JavaScript对
    象来表示，而是去重后的HTML字符串，所以它并没有使用React的Fiber算法。相比于React中的Diff算法，Vue2的Diff算法具
    有更高效的性能，但仍存在一些性能问题。
    6.2  Vue3的iff算法则引入了全新的静态分析和渲染优化机制，采用了单向遍历算法，同时也支持了函数式组件，在性能和功能上都
    有了极大的提升。
7.组件状态驱动的动态 CSS 值
	在样式里面 height: v-bind(logoHeight) + 'px';