defineProperty 和 Proxy 的区别

Object.defineProperty 和 Proxy 的区别如下:
1、Proxy 可以直接监听对象而非属性；
2、Proxy 可以直接监听数组的变化；
3、Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等
是 Object.defineProperty 不具备的
4、Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而
Object.defineProperty 只能遍历对象属性直接修改
5、Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准
的性能红利
6、Object.defineProperty 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,
而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重
写
————————————————
Vue2在实现响应式的时候会在初始化阶段判断对象的属性是否是Object类型,如果是的话就会递归的调用Observer将子对象也变成响应式。
Vue3的实现流程则是在初始化阶段的时候只对第一层的属性进行响应式，当返回proxy的属性被访且是对象的话再进行递归响应式，Proxy劫持的是对象本身，并不能劫持子对象的变化，正是利用这种特性可以延时定义子对象响应式的实现，在初始化的时候性能也会得到提升。

你对 Vue.js 的 template 编译的理解

简而言之，就是先转化成 AST 树，再得到的 render 函数返回 Vnode（Vue 的虚拟 DOM 节
点）
1、首先通过 compile 编译器把 template 编译成 AST 语法树（abstract syntax tree 即 源代
码的抽象语法结构的树状表现形式），compile 是 createCompiler 的返回值，createCompiler 是
用以创建编译器的，另外 compile 还负责合并 option
2、然后 AST 会经过 generate（将 AST 语法树转化成 render funtion 字符串的过程）得到
render 函数，render 的返回值是 Vnode，Vnode 是 Vue 的虚拟 DOM 节点，里面有（标签名、
子节点、文本等等）
————————————————

VNone 是什么？什么是虚拟 DOM

1、Vnode 是什么

Vnode 是 JavaScript 对象，Vnode 表示 Virtual DOM，用 JavaScript 对象来描述真实的
DOM 把 DOM 标签，属性，内容都变成对象的属性。就像使用 JavaScript 对象对一种动物进行
说明一样{name: ‘Hello Kitty’, age: 1, children: null}。

Vnode 的作用

通过 render 将 template 模版描述成 Vnode，然后进行一系列操作之后形成真实
的 DOM 进行挂载。

Vnode 的优点

2-1) 兼容性强，不受执行环境的影响。Vnode 因为是 JS 对象，不管 node 还是
浏览器，都可以统一操作，从而获得了服务端渲染、原生渲染、手写渲染函数等能力。
2-2) 减少操作 DOM，任何页面的变化，都只使用 Vnode 进行操作对比，只需要
在最后一步挂载更新 DOM，不需要频繁操作 DOM，从而提高页面性能。

什么是虚拟 DOM?

1、文档对象模型或 DOM 定义了一个接口，该接口允许 JavaScript 之类的语言访问和操
作 HTML 文档。元素由树中的节点表示，并且接口允许我们操纵它们。但是此接口需要付出
代价，大量非常频繁的 DOM 操作会使页面速度变的非常缓慢
2、Vue 通过在内存中实现文档结构的虚拟表示来解决此问题，其中虚拟节点（Vnode）
表示 DOM 树中的节点。当需要操纵时，可以在虚拟 DOM 的 内存中执行计算和操作，而不
是在真实 DOM 上进行操纵。这自然会更快，并且允许虚拟 DOM 算法计算出最优化的方式
来更新实际 DOM 结构,一旦计算出，就将其应用于实际的 DOM 树，这就提高了性能，这就
是为什么基于虚拟 DOM 的框架（例如 Vue 和 react）如此突出的原因。
————————————————

Vue 3.0 性能提升主要是通过哪几方面体现的？

响应式系统提升

  • vue2在初始化的时候，对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象，还会递归调用defineproperty使之变为响应式对象。
  • vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。

优势：
可以监听动态新增的属性；
可以监听删除的属性 ；
可以监听数组的索引和 length 属性；

编译优化

  • 优化编译和重写虚拟dom，让首次渲染和更新dom性能有更大的提升
    vue2 通过标记静态根节点,优化 diff 算法
    vue3 标记和提升所有静态根节点,diff 的时候只比较动态节点内容
  • Fragments, 模板里面不用创建唯一根节点,可以直接放同级标签和文本内容
  • 静态提升
  • patch flag, 跳过静态节点,直接对比动态节点

  • 缓存事件处理函数

    源码体积的优化

  • vue3移除了一些不常用的api，例如：inline-template、filter等

  • 使用tree-shaking

Composition Api 与 Vue 2.x使用的Options Api 有什么区别

Options Api
包含一个描述组件选项（data、methods、props等）的对象 options；
API开发复杂组件，同一个功能逻辑的代码被拆分到不同选项 ；
使用mixin重用公用代码，也有问题：命名冲突，数据来源不清晰；
composition Api
vue3 新增的一组 api，它是基于函数的 api，可以更灵活的组织组件的逻辑。
解决options api在大型项目中，options api不好拆分和重用的问题。

Proxy 相对于 Object.defineProperty 有哪些优点？

proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。
可以监听数组变化
可以劫持整个对象
操作时不是对原对象操作,是 new Proxy 返回的一个新对象
可以劫持的操作有 13 种

Vue 3.0 在编译方面有哪些优化？

  • vue.js 3.x中标记和提升所有的静态节点，diff的时候只需要对比动态节点内容；
  • Fragments（升级vetur插件): template中不需要唯一根节点，可以直接放文本或者同级标签
  • 静态提升(hoistStatic),当使用 hoistStatic 时,所有静态的节点都被提升到 render 方法之外.只会在应用启动的时候被创建一次,之后使用只需要应用提取的静态节点，随着每次的渲染被不停的复用。
  • patch flag, 在动态标签末尾加上相应的标记,只能带 patchFlag 的节点才被认为是动态的元素,会被追踪属性的修改,能快速的找到动态节点,而不用逐个逐层遍历，提高了虚拟dom diff的性能。
  • 缓存事件处理函数cacheHandler,避免每次触发都要重新生成全新的function去更新之前的函数
  • tree shaking 通过摇树优化核心库体积,减少不必要的代码量

    Vue.js 3.0 响应式系统的实现原理

    1.reactive

    设置对象为响应式对象。接收一个参数，判断这个参数是否是对象。不是对象则返回这个参数，不做响应式处理。创建拦截器handler,设置 get,set,deleteproperty.
    get
    收集依赖（track)
    如果当前的key的值是对象，则为当前key的对象创建拦截器handler,设置，get/set/deleteProperty;
    如果当前的key值不是对象，则返回当前key的值。
    set
    设置的新值和老值不相等时，更新为新值，并触发更新（trigger).
    deleteProperty
    当前对象有这个key的时候，删除这个key并触发更新（trigger).

    2.effect

    接受一个函数作为参数，作用是：访问响应式对象属性时去收集依赖

    3.track

    接受两个参数： target, key
    如果没有activeEffect,则说明没有创建effect依赖
    如果有actvieEffect,则去判断weackMap集合中是否有target属性
    WeakMap集合中没有target属性，则 set(target, (depsMap = new Map()))
    WeakMap集合中有target属性，则判断targe属性的map值的depsMap中是否有key属性
    depsMap中没有key属性，则set(key, (dep = new Set()))
    depsMap中有key属性，则添加这个activeEffect

    4.trigger

    判断WeakMap中是否有target属性，WeakMap中有target属性，则判断target属性的map值中是否有key属性，有的话循环触发收集的effect().