关于前端:校招前端vue面试题边面边更

简略说，Vue 的编译过程就是将 template 转化为 render 函数的过程。会经验以下阶段：

生成 AST 树
优化
codegen

首先解析模版，生成AST 语法树(一种用 JavaScript 对象的模式来形容整个模板)。应用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相干解决。

Vue 的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变动，对应的 DOM 也不会变动。那么优化过程就是深度遍历 AST 树，依照相干条件对树节点进行标记。这些被标记的节点 (动态节点) 咱们就能够 跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最初一步是 将优化后的 AST 树转换为可执行的代码。

对于 runtime 来说，只须要保障组件存在 render 函数即可，而有了预编译之后，只须要保障构建过程中生成 render 函数就能够。在 webpack 中，应用 vue-loader 编译.vue 文件，外部依赖的 vue-template-compiler 模块，在 webpack 构建过程中，将 template 预编译成 render 函数。与 react 相似，在增加了 jsx 的语法糖解析器 babel-plugin-transform-vue-jsx 之后，就能够间接手写 render 函数。

所以，template 和 jsx 的都是 render 的一种表现形式，不同的是：JSX 绝对于 template 而言，具备更高的灵活性，在简单的组件中，更具备劣势，而 template 尽管显得有些僵滞。然而 template 在代码构造上更合乎视图与逻辑拆散的习惯，更简略、更直观、更好保护。

（1）mixin 和 extends mixin 和 extends 均是用于合并、拓展组件的，两者均通过 mergeOptions 办法实现合并。

mixins 接管一个混入对象的数组，其中混入对象能够像失常的实例对象一样蕴含实例选项，这些选项会被合并到最终的选项中。Mixin 钩子依照传入程序顺次调用，并在调用组件本身的钩子之前被调用。
extends 次要是为了便于扩大单文件组件，接管一个对象或构造函数。

（2）mergeOptions 的执行过程
规范化选项（normalizeProps、normalizelnject、normalizeDirectives)
对未合并的选项，进行判断

if (!child._base) {if (child.extends) {parent = mergeOptions(parent, child.extends, vm);
  }
  if (child.mixins) {for (let i = 0, l = child.mixins.length; i < l; i++) {parent = mergeOptions(parent, child.mixins[i], vm);
    }
  }
}

合并解决。依据一个通用 Vue 实例所蕴含的选项进行分类逐个判断合并，如 props、data、methods、watch、computed、生命周期等，将合并后果存储在新定义的 options 对象里。
返回合并后果 options。

思路剖析：

首先思考 vue 路由要解决的问题：用户点击跳转链接内容切换，页面不刷新。

借助 hash 或者 h istory api实现 url 跳转页面不刷新
同时监听 hashchange 事件或者 popstate 事件处理跳转
依据 hash 值或者 state 值从 routes 表中匹配对应 component 并渲染

答复范例：

一个 SPA 利用的路由须要解决的问题是 页面跳转内容扭转同时不刷新，同时路由还须要以插件模式存在，所以：

首先我会定义一个 createRouter 函数，返回路由器实例，实例外部做几件事
保留用户传入的配置项
监听 hash 或者 popstate 事件
回调里依据 path 匹配对应路由
将 router 定义成一个 Vue 插件，即实现 install 办法，外部做两件事
实现两个全局组件：router-link和router-view，别离实现页面跳转和内容显示
定义两个全局变量：$route和$router，组件内能够拜访以后路由和路由器实例

vue 的模版编译过程次要如下：template -> ast -> render 函数

vue 在模版编译版本的码中会执行 compileToFunctions 将 template 转化为 render 函数：

// 将模板编译为 render 函数 const {render, staticRenderFns} = compileToFunctions(template,options// 省略}, this)

CompileToFunctions 中的次要逻辑如下∶ （1）调用 parse 办法将 template 转化为 ast（形象语法树）

constast = parse(template.trim(), options)

parse 的指标：把 tamplate 转换为 AST 树，它是一种用 JavaScript 对象的模式来形容整个模板。
解析过程：利用正则表达式程序解析模板，当解析到开始标签、闭合标签、文本的时候都会别离执行对应的回调函数，来达到结构 AST 树的目标。

AST 元素节点总共三种类型：type 为 1 示意一般元素、2 为表达式、3 为纯文本

（2）对动态节点做优化

optimize(ast,options)

这个过程次要剖析出哪些是动态节点，给其打一个标记，为后续更新渲染能够间接跳过动态节点做优化

深度遍历 AST，查看每个子树的节点元素是否为动态节点或者动态节点根。如果为动态节点，他们生成的 DOM 永远不会扭转，这对运行时模板更新起到了极大的优化作用。

（3）生成代码

const code = generate(ast, options)

generate 将 ast 形象语法树编译成 render 字符串并将动态局部放到 staticRenderFns 中，最初通过 new Function(` render`) 生成 render 函数。

mutation 是同步更新， $watch 严格模式下会报错
action 是异步操作，能够获取数据后调用 mutation 提交最终数据

参考前端进阶面试题具体解答

渲染程序：先父后子，实现程序：先子后父

更新程序：父更新导致子更新，子更新实现后父

销毁程序：先父后子，实现程序：先子后父

Vue.js 是采纳 数据劫持 联合 发布者 - 订阅者模式 的形式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时公布音讯给订阅者，触发相应的监听回调。次要分为以下几个步骤：

须要 observe 的数据对象进行递归遍历，包含子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变动
compile 解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，增加监听数据的订阅者，一旦数据有变动，收到告诉，更新视图
Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，次要做的事件是: ①在本身实例化时往属性订阅器 (dep) 外面增加本人 ②本身必须有一个 update()办法 ③待属性变动 dep.notice()告诉时，能调用本身的 update()办法，并触发 Compile 中绑定的回调，则功成身退。
MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听本人的 model 数据变动，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变动 -> 视图更新；视图交互变动(input) -> 数据 model 变更的双向绑定成果。

如果不应用 key，Vue 会应用一种最大限度缩小动静元素并且尽可能的尝试就地批改 / 复用雷同类型元素的算法。key 是为 Vue 中 vnode 的惟一标记，通过这个 key，咱们的 diff 操作能够更精确、更疾速

更精确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 比照中能够防止就地复用的状况。所以会更加精确。

更疾速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历形式更快

MVC

MVC 全名是 Model View Controller，是模型 (model)-视图(view)-控制器(controller) 的缩写，一种软件设计榜样

Model（模型）：是应用程序中用于解决应用程序数据逻辑的局部。通常模型对象负责在数据库中存取数据
View（视图）：是应用程序中解决数据显示的局部。通常视图是根据模型数据创立的
Controller（控制器）：是应用程序中解决用户交互的局部。通常控制器负责从视图读取数据，管制用户输出，并向模型发送数据

MVC 的思维：一句话形容就是 Controller 负责将 Model 的数据用 View 显示进去，换句话说就是在 Controller 外面把 Model 的数据赋值给 View。

MVVM

MVVM 新增了 VM 类

ViewModel 层：做了两件事达到了数据的双向绑定一是将【模型】转化成【视图】，行将后端传递的数据转化成所看到的页面。实现的形式是：数据绑定。二是将【视图】转化成【模型】，行将所看到的页面转化成后端的数据。实现的形式是：DOM 事件监听。

MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的主动同步，也就是当 Model 的属性扭转时，咱们不必再本人手动操作 Dom 元素，来扭转 View 的显示，而是扭转属性后该属性对应 View 层显示会主动扭转（对应 Vue 数据驱动的思维）

整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不必再用选择器操作 DOM 元素。因为在 MVVM 中，View 不晓得 Model 的存在，Model 和 ViewModel 也察看不到 View，这种低耦合模式进步代码的可重用性

留神：Vue 并没有齐全遵循 MVVM 的思维这一点官网本人也有阐明

那么问题来了为什么官网要说 Vue 没有齐全遵循 MVVM 思维呢？

严格的 MVVM 要求 View 不能和 Model 间接通信，而 Vue 提供了 $refs 这个属性，让 Model 能够间接操作 View，违反了这一规定，所以说 Vue 没有齐全遵循 MVVM。

Vue2： Object.defineProperty 从新定义 data 中所有的属性， Object.defineProperty 能够使数据的获取与设置减少一个拦挡的性能，拦挡属性的获取，进行依赖收集。拦挡属性的更新操作，进行告诉。

具体的过程：首先 Vue 应用 initData 初始化用户传入的参数，而后应用 new Observer 对数据进行观测，如果数据是一个对象类型就会调用 this.walk（value） 对对象进行解决，外部应用 defineeReactive 循环对象属性定义响应式变动，外围就是应用 Object.defineProperty 从新定义数据。

虚构 DOM 的实现原理次要包含以下 3 局部：

用 JavaScript 对象模仿实在 DOM 树，对实在 DOM 进行形象；
diff 算法 — 比拟两棵虚构 DOM 树的差别；
pach 算法 — 将两个虚构 DOM 对象的差别利用到真正的 DOM 树。

当一个 Vue 实例创立时，Vue 会遍历 data 中的属性，用 Object.defineProperty（vue3.0 应用 proxy）将它们转为 getter/setter，并且在外部追踪相干依赖，在属性被拜访和批改时告诉变动。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会告诉 watcher 从新计算，从而以致它关联的组件得以更新。

轻量级框架：只关注视图层，是一个构建数据的视图汇合，大小只有几十 kb；

简略易学：国人开发，中文文档，不存在语言障碍，易于了解和学习；

双向数据绑定：保留了 angular 的特点，在数据操作方面更为简略；

组件化：保留了 react 的长处，实现了 html 的封装和重用，在构建单页面利用方面有着独特的劣势；

视图，数据，构造拆散：使数据的更改更为简略，不须要进行逻辑代码的批改，只须要操作数据就能实现相干操作；

虚构 DOM：dom 操作是十分消耗性能的，不再应用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种形式；

运行速度更快: 相比拟与 react 而言，同样是操作虚构 dom，就性能而言，vue 存在很大的劣势。

MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，次要通过拆散关注点的形式来组织代码构造，优化开发效率。

在开发单页面利用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简略我的项目时，可能看不出什么问题，如果我的项目变得复杂，那么整个文件就会变得简短、凌乱，这样对我的项目开发和前期的我的项目保护是十分不利的。

（1）MVC

MVC 通过拆散 Model、View 和 Controller 的形式来组织代码构造。其中 View 负责页面的显示逻辑，Model 负责存储页面的业务数据，以及对相应数据的操作。并且 View 和 Model 利用了观察者模式，当 Model 层产生扭转的时候它会告诉无关 View 层更新页面。Controller 层是 View 层和 Model 层的纽带，它次要负责用户与利用的响应操作，当用户与页面产生交互的时候，Controller 中的事件触发器就开始工作了，通过调用 Model 层，来实现对 Model 的批改，而后 Model 层再去告诉 View 层更新。

（2）MVVM

MVVM 分为 Model、View、ViewModel：

Model 代表数据模型，数据和业务逻辑都在 Model 层中定义；
View 代表 UI 视图，负责数据的展现；
ViewModel 负责监听 Model 中数据的扭转并且管制视图的更新，解决用户交互操作；

Model 和 View 并无间接关联，而是通过 ViewModel 来进行分割的，Model 和 ViewModel 之间有着双向数据绑定的分割。因而当 Model 中的数据扭转时会触发 View 层的刷新，View 中因为用户交互操作而扭转的数据也会在 Model 中同步。

这种模式实现了 Model 和 View 的数据主动同步，因而开发者只须要专一于数据的保护操作即可，而不须要本人操作 DOM。

（3）MVP

MVP 模式与 MVC 惟一不同的在于 Presenter 和 Controller。在 MVC 模式中应用观察者模式，来实现当 Model 层数据发生变化的时候，告诉 View 层的更新。这样 View 层和 Model 层耦合在一起，当我的项目逻辑变得复杂的时候，可能会造成代码的凌乱，并且可能会对代码的复用性造成一些问题。MVP 的模式通过应用 Presenter 来实现对 View 层和 Model 层的解耦。MVC 中的 Controller 只晓得 Model 的接口，因而它没有方法管制 View 层的更新，MVP 模式中，View 层的接口裸露给了 Presenter 因而能够在 Presenter 中将 Model 的变动和 View 的变动绑定在一起，以此来实现 View 和 Model 的同步更新。这样就实现了对 View 和 Model 的解耦，Presenter 还蕴含了其余的响应逻辑。

SSR 也就是服务端渲染，也就是将 Vue 在客户端把标签渲染成 HTML 的工作放在服务端实现，而后再把 html 间接返回给客户端

SSR 的劣势：

更好的 SEO
首屏加载速度更快

SSR 的毛病：

开发条件会受到限制，服务器端渲染只反对 beforeCreate 和 created 两个钩子；
当须要一些内部扩大库时须要非凡解决，服务端渲染应用程序也须要处于 Node.js 的运行环境；
更多的服务端负载。

（1）代码层面的优化

v-if 和 v-show 辨别应用场景
computed 和 watch 辨别应用场景
v-for 遍历必须为 item 增加 key，且防止同时应用 v-if
长列表性能优化
事件的销毁
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化有限列表性能
服务端渲染 SSR or 预渲染

（2）Webpack 层面的优化

Webpack 对图片进行压缩
缩小 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建后果输入剖析
Vue 我的项目的编译优化

（3）根底的 Web 技术的优化

开启 gzip 压缩
浏览器缓存
CDN 的应用
应用 Chrome Performance 查找性能瓶颈

Vue3.x改用 Proxy 代替 Object.defineProperty。因为Proxy 能够间接监听对象和数组的变动，并且有多达 13 种拦挡办法。并且作为新规范将受到浏览器厂商重点继续的性能优化。

proxy 根本用法

// proxy 默认只会代理第一层对象，只有取值再次是对象的时候再次代理，不是一上来就代理，进步性能。不像 vue2.x 递归遍历每个对象属性
let handler = {set(target, key, value) {return Reflect.set(target, key, value);
    },
    get(target, key) {if (typeof target[key] == 'object' && target[key] !== null) {return new Proxy(target[key], handler); // 懒代理，只有取值再次是对象的时候再次代理，进步性能
        }
        return Reflect.get(target, key);
    }
}
let obj = {school: { name: 'poetry', age: 20} };
let proxy = new Proxy(obj, handler);

// 返回对象的代理
proxy.school

咱们在 vue 我的项目中次要应用 v-model 指令在表单 input、textarea、select 等元素上创立双向数据绑定，咱们晓得 v-model 实质上不过是语法糖，v-model 在外部为不同的输出元素应用不同的属性并抛出不同的事件：

text 和 textarea 元素应用 value 属性和 input 事件；
checkbox 和 radio 应用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

以 input 表单元素为例：

<input v-model='something'>

相当于

<input v-bind:value="something" v-on:input="something = $event.target.value">

如果在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件，如下所示：

父组件：<ModelChild v-model="message"></ModelChild>

子组件：<div>{{value}}</div>

props:{value: String},
methods: {test1(){this.$emit('input', '小红')
  },
},

编码优化：

事件代理
keep-alive
拆分组件
key 保障唯一性
路由懒加载、异步组件
防抖节流

Vue 加载性能优化

第三方模块按需导入（ babel-plugin-component）
图片懒加载

用户体验

app-skeleton 骨架屏
shellap p 壳
pwa

SEO 优化

预渲染

关于前端:校招前端vue面试题边面边更

Vue 模版编译原理晓得吗，能简略说一下吗？

template 和 jsx 的有什么别离？

简述 mixin、extends 的笼罩逻辑

如果让你从零开始写一个 vue 路由，说说你的思路

Vue template 到 render 的过程

action 与 mutation 的区别

父子组件生命周期调用程序（简略）

双向数据绑定的原理

v-for 为什么要加 key

MVC 和 MVVM 区别

vue 是如何实现响应式数据的呢？（响应式数据原理）

虚构 DOM 实现原理？

Vue 的基本原理

vue 的长处

MVVM、MVC、MVP 的区别

对 SSR 的了解

你有对 Vue 我的项目进行哪些优化？

Vue3.x 响应式数据原理

v-model 的原理？

Vue 性能优化

Just My Socks（注册教程内含优惠码）

关于前端:校招前端vue面试题边面边更

Vue 模版编译原理晓得吗，能简略说一下吗？

template 和 jsx 的有什么别离？

简述 mixin、extends 的笼罩逻辑

如果让你从零开始写一个 vue 路由，说说你的思路

Vue template 到 render 的过程

action 与 mutation 的区别

父子组件生命周期调用程序（简略）

双向数据绑定的原理

v-for 为什么要加 key

MVC 和 MVVM 区别

vue 是如何实现响应式数据的呢？（响应式数据原理）

虚构 DOM 实现原理？

Vue 的基本原理

vue 的长处

MVVM、MVC、MVP 的区别

对 SSR 的了解

你有对 Vue 我的项目进行哪些优化？

Vue3.x 响应式数据原理

v-model 的原理？

Vue 性能优化

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）