vue知识总结(三)

1.Vue模版编译原理知道吗，能简单说一下吗？

• 简单说，Vue的编译过程就是将template转化为render函数的过程。
• 会经历以下阶段：生成AST树(抽象语法树) --> 优化 --> codegen(代码生成器)
• （1）首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。
• （2）Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。
• （3）编译的最后一步是将优化后的AST树转换为可执行的代码

如何从真实DOM到虚拟DOM?

• 涉及到Vue中的模板编译原理，主要过程：

1. 将模板转换成ast 树，ast 用对象来描述真实的JS语法（将真实DOM转换成虚拟DOM）
2. 优化树
3. 将ast 树生成代码

2.Vue2.x和Vue3.x渲染器的diff算法分别说一下

• Vue2.x中的虚拟dom 是进行全量的对比。
• Vue3.0 中新增了静态标记(PatchFlag):在与上次虚拟结点进行对比的时候，值对比 带有 patch flag的节点，并且可以通过 flag的信息得知当前节点要对比的具体内容化

1. Vue中hash模式和history模式的区别

• 在最明显的显示上：hash模式的URL中会夹杂着#号，而history没有。
• Vue底层对它们的实现方式不同:
  hash模式是依靠onhashchange事件(监听location.hash的改变)
  history模式是主要是依靠的HTML5 history中新增的两个方法，pushState()可以改变url地址且不会发送请求，replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。

window.onhashchange = function(event){
 // location.hash获取到的是包括#号的，如"#heading-3"
 // 所以可以截取一下
  let hash = location.hash.slice(1);
}

• 当真正需要通过URL向后端发送HTTP请求的时候，比如常见的用户手动输入URL后回车，或者是刷新(重启)浏览器，这时候history模式需要后端的支持。因为history模式下，前端的URL必须和实际向后端发送请求的URL一致，例如有一个URL是带有路径path的(例如www.libai.wang/blogs/id)，如果后端没有对这个路径做处理的话，就会返回404错误。所以需要后端增加一个覆盖所有情况的候选资源，一般会配合前端给出的一个404页面。

1. 说说你对 proxy 的理解
   vue的数据劫持有两个缺点:

• 无法监听通过索引修改数组的值的变化
• 无法监听object 也就是对象的值的变化
  所以vue2.x中才会有$set 属性的存在
  proxy是 es6中推出的新 api，可以弥补以上两个缺点，所以 vue3.x版本用 proxy 替换object.defineproperty。

3.Vue 的响应式原理中 Object.defineProperty 有什么缺陷?

• Object.defineProperty 无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
• Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy 可以劫持整个对象，并返回一个新的对象
• Proxy 不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性

4.Proxy 相比于 defineProperty 的优势?

• 数组变化也能监听到
• 不需要深度遍历监听