共计 1153 个字符，预计需要花费 3 分钟才能阅读完成。
1. 响应式数据的了解
♥ 外围点：数组和对象类型当值变动时如何劫持到。对象外部通过 defineReactive 办法，应用 Object.defineProperty 将属性进行劫持（只会劫持曾经存在的属性），数组则是通过重写数组办法来实现。这里在答复时能够带出一些相干知识点（比方多层对象是通过递归来实现劫持，顺带提出 Vue3 中是应用 proxy 来实现响应式数据）♥ 补充答复，外部依赖收集是怎么做到的，每个属性都领有本人的 dep 属性，寄存他所依赖的 watcher，当属性变动后会告诉本人对应的 watcher 去更新（其实前面会讲到每个对象类型本人自身也领有一个 dep 属性，这个在 $set 面试题中在进行解说）♥这里能够引出性能优化相干的内容（1）对象层级过深，性能就会差（2）不须要响应数据的内容不要放到 data 中（3）Object.freeze() 能够解冻数据
2.Vue 中如何检测数据的变动
♥ 外围点：数组思考性能起因没有用 defineProperty 对数组的每一项进行拦挡，而是抉择重写数组（push,shift,pop,splice,unshift,sort,reverse）办法进行重写。♥ 补充答复，在 Vue 中批改数组的索引和长度是无奈监控到的。须要通过以上 7 种变异办法批改数组才会触发数组对应的 watcher 进行更新。数组中如果是对象数据类型也会进行递归劫持。♥ 引发出的问题，那如果想更改索引更新数据怎么办？能够通过 Vue.$set() 来进行解决 -> 外围外部用的是 splice 办法
3.Vue 中模板编译原理
♥ 外围点：如何将 template 转换成 render 函数 (这里要留神的是咱们在开发时尽量不要应用 template，因为将 template 转化成 render 办法须要在运行时进行编译操作会有性能损耗，同时援用带有 compiler 包的 vue 体积也会变大。默认.vue 文件中的 template 解决是通过 vue-loader 来进行解决的并不是通过运行时的编译 - 前面咱们会说到默认 vue 我的项目中引入的 vue.js 是不带有 compiler 模块的)。1. 将 template 模板转换成 ast 语法树 - parserHTML
2. 对动态语法做动态标记 - markUp
3. 从新生成代码 - codeGen
♥ 补充答复（模板引擎的实现原理就是 new Function + with 来进行实现的）1. 将 AST 语法数转化为 render 函数 通过 new Function(with(this) {return 'xxx'} ) 生成 rander 函数
1. 将 render 函数转化为虚构 Dom
2. 将虚构 DOM 转化为实在 DOM 插入到原 DOM 的下一个兄弟节点，再将原 DOM 删除
♥ vue-loader 中解决 template 属性次要靠的是 vue-template-compiler 模块
正文完
