1.Vue模版编译原理知道吗,能简单说一下吗?
- 简单说,
Vue
的编译过程就是将template
转化为render
函数的过程。- 会经历以下阶段:生成
AST
树(抽象语法树) --> 优化 -->codegen
(代码生成器)- (1)首先解析模版,生成
AST
语法树(一种用JavaScript
对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析,遇到标签、文本的时候都会执行对应的钩子进行相关处理。- (2)
Vue
的数据是响应式的,但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化,对应的DOM
也不会变化。那么优化过程就是深度遍历AST
树,按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对,对运行时的模板起到很大的优化作用。- (3)编译的最后一步是将优化后的
AST
树转换为可执行的代码如何从真实DOM到虚拟DOM?
- 涉及到Vue中的模板编译原理,主要过程:
- 将模板转换成ast 树,ast 用对象来描述真实的JS语法(将真实DOM转换成虚拟DOM)
- 优化树
- 将ast 树生成代码
2.Vue2.x和Vue3.x渲染器的diff算法分别说一下
Vue2.x
中的虚拟dom
是进行全量的对比。Vue3.0
中新增了静态标记(PatchFlag):
在与上次虚拟结点进行对比的时候,值对比 带有patch flag
的节点,并且可以通过flag
的信息得知当前节点要对比的具体内容化
- 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
页面。
- 说说你对 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 的优势?
- 数组变化也能监听到
- 不需要深度遍历监听