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 模块