❶ 前端跨域通信的⼏几种⽅方式
自定义事件组件间通信深入理解：
自定义事件：自己定义的事件：事件类型（自己定义）和回调函数（自己定义自己触发）
系统定义的事件：事件类型（固定几个）和回调函数（自己定义系统触发）
做法：在父组件当中可以看到子组件对象，给子组件对象绑定自定义事件$on 回调函数在父组件中
在子组件当中，我们需要传递数据的地方，去触发自己身上的事件$emit，调用回调函数中传参给父
适用：子向父通信
原因：因为父组件内部可以看到子组件对象，可以给子组件对象绑定事件，回调函数在父组件定义
而子组件内部看不到父组件对象，没法给父组件对象绑定事件，子组件没法定义回调函数，但是可以看到自己，可以触发
接受数据的组件必须能看到预绑定事件的组件对象，才能绑定
发送数据的组件必须能看到绑定了事件的组件对象，才能触发事件
$on
$emit
$off //解绑事件
$once //绑定只能触发一次的事件
vm和组件对象的关系
全局事件总线组件间通信
适用于任意组件间传递 必须理解必须搞定
利用了自定义事件
创建一个中间人，让所有的组件都可以看到这个人，并且这个人可以使用$on和$emit （vm添加到Vue原型当中作为总线）
在想要接受数据的组件内 找中间人去绑定事件
在想要发送数据的组件内 触发中间人绑定的事件
通信方式 props
父子之间传递
父向子传递属性，通过属性把数据交给子组件
子向父传递数据，子组件通过调用父组件的行为函数，把数据当参数交给父组件使用场合：
父子最好
父向非子后代传递，必须逐层去传递 麻烦
不是父子关系的组件，必须借助相同的父组件去通信 麻烦
通信方式 vue自定义事件 子向父传递，只是适合这个场合
理解原生dom事件：
事件类型 ： 固定的有限的几个
回调函数 ： 谁调用（浏览器） 调用时候的默认参数（事件对象event）
vue自定义事件
事件类型 : 无数个
回调函数 ： 谁调用 （自己调用） 调用时候默认的参数 （有可能有也可能没有 如果调用时候传了参数，默认参数就有
如果没有传，那就没有（undefined））
父组件当中去给子组件对象绑定事件监听
@直接在组件标签对象当中去绑定，和绑定系统事件一致
$on，在mounted当中去绑定，但是需要获取到子组件标签对象（通过ref指定，然后获取到）
$once()和$on（）类似，但是只能触发一次
在子组件当中适当的位置去触发事件并传递参数
$emit(),在子组件当中去触发，子组件对象触发
$off()可以在销毁之前解绑事件
使用场合：子向父传递数据，其余情况都不能用
通信方式 全局事件总线
适用场合： 任何场合
事件总线(对象)满足的两个条件：1、所有的组件对象都能找到它 2、可以调用$on和$emit
vm对象和组件对象的关系
vm的原型对象 === 组件对象的原型对象的原型对象
本身自定义事件可以完成子向父之间的传递，因为父组件中可以看到子组件，可以为子组件绑定事件，子组件中可以触发事件
但是如果不是子向父，那么其余的就没办法了，因为两个组件互相是看不到的，没办法再其中一个给另外一个绑定事件
此时我们可以借助中间人，也就是他们都可以同时看到的一个人，就是全局事件总线（所有的组件对象都能看到）
在接收数据的组件中，获取总线绑定事件
在发送数据的组件中，获取总线触发事件
全局事件总线说到底就是个对象，我们通常就是用vm对象作为全局事件总线使用
把vm对象添加到Vue原型对象 就形成全局事件总线（vm）
通信方式 消息订阅和发布（类似于全局事件总线，vue当中几乎不用）
github查阅 PubSubJS第三方库
订阅者是接收数据的组件
发布者是发送数据的组件
坑： 订阅者的回调函数里面形参第一个必须有，而且是为了接受发布者的消息类型的，实际意义没有，但是必须写上
通信方式 slot插槽
一个组件会多次使用，但是又有少部分结构数据会发生变化，（当然可以用不同的子组件）
那么就得通过父组件告诉子组件变化的内容是什么，此时就要用到这个插槽
子组件当中<slot></slot>其实就是占位用的，让父元素给它填充内容，可以带标签
具名插槽
默认插槽
作用域插槽
子组件的slot可以通过 属性传递值给父组件，然后父组件可以根据不同需求改变这个slot内部的显示结构
把子组件的值，传给父组件固定的区域进行操作
❷ 大前端和前端在就业方向上有什么差别
所谓的大前端其实就是前端+终端（android+ios）,大前端是这几年才开始的叫法，以前前端是指web前端，终端就是android,ios等。
因为现在技术的进步，web的体验也有很大的提升，基本可以媲美终端原生的体验，所以很多公司开始考虑用一套代码，在各个端上来跑，这样就可以减少很多工作量，同时降低企业的研发成本。
所以，现在就出现了各种大前端开发框架，很多公司也积极参与其中，对自己原有的业务进行重构升级，所以，大前端的叫法就越来越普遍了。
前端是指传统意义上的web端，而大前端是指前端+终端，这两个是不一样的。
❸ 老铁们，用java做前端开发实涉及到的tpl为后缀名的文件有什么好处，相比html格式的有什么不同
java 前端开发基本上就3种技术 jsp，freemarker ，Velocity 分别以 jsp vm ftl 结尾
区别： jsp（可以写java代码，支持一抹多东西，不是严格的MVC，每次都要编译配置tomcat什么的） vm（不能编写java代码，可以实现严格的mvc分离，不是官方标准，标签支持不好）
ftl（不能编写java代码，可以实现严格的mvc分离，搞摸版很好，用户群体和支持不如jsp）
所谓的tpl就是html,
只不过里面作为模板文件(tpl)的html中添加了smarty的变量或逻辑判断.这些变量的在程序运行时由smarty替换成真正的数据.
❹ 整理涵盖很全很广的前端知识点
HTML、CSS相关
html5新特性、语义化
浏览器渲染机制、重绘、重排
网页生成过程：
重排(也称回流): 当 DOM 的变化影响了元素的几何信息( DOM 对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。 触发：
重绘： 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。 触发：
重排优化建议：
transform 不重绘，不回流 是因为 transform 属于合成属性，对合成属性进行 transition/animate 动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。
css盒子模型
所有 HTML 元素可以看作盒子，在CSS中， "box model" 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
css样式优先级
!important>style>id>class
什么是BFC？BFC的布局规则是什么？如何创建BFC？BFC应用？
BFC 是 Block Formatting Context 的缩写，即块格式化上下文。 BFC 是CSS布局的一个概念，是一个环境，里面的元素不会影响外面的元素。 布局规则：Box是CSS布局的对象和基本单位，页面是由若干个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的 Formatting Context 。 创建：浮动元素 display：inline-block position:absolute 应用: 1.分属于不同的 BFC 时,可以防止 margin 重叠 2.清除内部浮动 3.自适应多栏布局
DOM、BOM对象
BOM（Browser Object Model） 是指浏览器对象模型，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。 使 JavaScript 有能力与浏览器"对话"。 DOM （Document Object Model） 是指文档对象模型，通过它，可以访问 HTML 文档的所有元素。 DOM 是 W3C （万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： "W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。" W3C DOM 标准被分为 3 个不同的部分：
什么是 XML DOM ？ XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。 什么是 HTML DOM？ HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
JS相关
js数据类型、typeof、instanceof、类型转换
闭包(高频)
闭包是指有权访问另一个函数作用域中的变量的函数 ——《JavaScript高级程序设计》
当函数可以记住并访问所在的词法作用域时，就产生了闭包，
即使函数是在当前词法作用域之外执行 ——《你不知道的JavaScript》
原型、原型链(高频)
原型: 对象中固有的 __proto__ 属性，该属性指向对象的 prototype 原型属性。
原型链: 当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是我们新建的对象为什么能够使用 toString() 等方法的原因。
特点: JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
this指向、new关键字
this 对象是是执行上下文中的一个属性，它指向最后一次调用这个方法的对象，在全局函数中， this 等于 window ，而当函数被作为某个对象调用时，this等于那个对象。 在实际开发中， this 的指向可以通过四种调用模式来判断。
new
作用域、作用域链、变量提升
继承(含es6)、多种继承方式
（1）第一种是以 原型链的方式来实现继承 ，但是这种实现方式存在的缺点是，在包含有引用类型的数据时，会被所有的实例对象所共享，容易造成修改的混乱。还有就是在创建子类型的时候不能向超类型传递参数。
（2）第二种方式是使用 借用构造函数 的方式，这种方式是通过在子类型的函数中调用超类型的构造函数来实现的，这一种方法解决了不能向超类型传递参数的缺点，但是它存在的一个问题就是无法实现函数方法的复用，并且超类型原型定义的方法子类型也没有办法访问到。
（3）第三种方式是 组合继承 ，组合继承是将原型链和借用构造函数组合起来使用的一种方式。通过借用构造函数的方式来实现类型的属性的继承，通过将子类型的原型设置为超类型的实例来实现方法的继承。这种方式解决了上面的两种模式单独使用时的问题，但是由于我们是以超类型的实例来作为子类型的原型，所以调用了两次超类的构造函数，造成了子类型的原型中多了很多不必要的属性。
（4）第四种方式是 原型式继承 ，原型式继承的主要思路就是基于已有的对象来创建新的对象，实现的原理是，向函数中传入一个对象，然后返回一个以这个对象为原型的对象。这种继承的思路主要不是为了实现创造一种新的类型，只是对某个对象实现一种简单继承，ES5 中定义的 Object.create() 方法就是原型式继承的实现。缺点与原型链方式相同。
（5）第五种方式是 寄生式继承 ，寄生式继承的思路是创建一个用于封装继承过程的函数，通过传入一个对象，然后复制一个对象的副本，然后对象进行扩展，最后返回这个对象。这个扩展的过程就可以理解是一种继承。这种继承的优点就是对一个简单对象实现继承，如果这个对象不是我们的自定义类型时。缺点是没有办法实现函数的复用。
（6）第六种方式是 寄生式组合继承 ，组合继承的缺点就是使用超类型的实例做为子类型的原型，导致添加了不必要的原型属性。寄生式组合继承的方式是使用超类型的原型的副本来作为子类型的原型，这样就避免了创建不必要的属性。
EventLoop
JS 是单线程的，为了防止一个函数执行时间过长阻塞后面的代码，所以会先将同步代码压入执行栈中，依次执行，将异步代码推入异步队列，异步队列又分为宏任务队列和微任务队列，因为宏任务队列的执行时间较长，所以微任务队列要优先于宏任务队列。微任务队列的代表就是， Promise.then ， MutationObserver ，宏任务的话就是 setImmediate setTimeout setInterval
原生ajax
ajax 是一种异步通信的方法,从服务端获取数据,达到局部刷新页面的效果。 过程：
事件冒泡、捕获(委托)
event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡
ES6
Vue
简述MVVM
MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型， View 代表UI组件， ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。
谈谈对vue生命周期的理解？
每个 Vue 实例在创建时都会经过一系列的初始化过程， vue 的生命周期钩子，就是说在达到某一阶段或条件时去触发的函数，目的就是为了完成一些动作或者事件
computed与watch
watch 属性监听 是一个对象，键是需要观察的属性，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作,监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用
computed 计算属性 属性的结果会被缓存，当 computed 中的函数所依赖的属性没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取。除非依赖的响应式属性变化时才会重新计算，主要当做属性来使用 computed 中的函数必须用 return 返回最终的结果 computed 更高效，优先使用
使用场景 computed ：当一个属性受多个属性影响的时候使用，例：购物车商品结算功能 watch ：当一条数据影响多条数据的时候使用，例：搜索数据
v-for中key的作用
vue组件的通信方式
父子组件通信
父->子 props ，子->父 $on、$emit` 获取父子组件实例 parent、 parent 、children Ref 获取实例的方式调用组件的属性或者方法 Provide、inject` 官方不推荐使用，但是写组件库时很常用
兄弟组件通信
Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() Vuex
跨级组件通信
$attrs、$listeners Provide、inject
常用指令
双向绑定实现原理
当一个 Vue 实例创建时，Vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher重新计算，从而致使它关联的组件得以更新。
v-model的实现以及它的实现原理吗？
nextTick的实现
vnode的理解，compiler和patch的过程
new Vue后整个的流程
思考：为什么先注入再提供呢？？
答：1、首先来自祖辈的数据要和当前实例的data,等判重，相结合，所以注入数据的initInjections一定要在 InitState 的上面。2. 从上面注入进来的东西在当前组件中转了一下又提供给后代了，所以注入数据也一定要在上面。
vm.[Math Processing Error]mount(vm.mount(vm.options.el) ：挂载实例。
keep-alive的实现
作用：实现组件缓存
钩子函数：
原理： Vue.js 内部将 DOM 节点抽象成了一个个的 VNode 节点， keep-alive 组件的缓存也是基于 VNode 节点的而不是直接存储 DOM 结构。它将满足条件 （pruneCache与pruneCache） 的组件在 cache 对象中缓存起来，在需要重新渲染的时候再将 vnode 节点从 cache 对象中取出并渲染。
配置属性：
include 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存
max 数字、最多可以缓存多少组件实例
vuex、vue-router实现原理
vuex 是一个专门为vue.js应用程序开发的状态管理库。 核心概念：
你怎么理解Vue中的diff算法?
在js中,渲染真实 DOM 的开销是非常大的, 比如我们修改了某个数据,如果直接渲染到真实 DOM , 会引起整个 dom 树的重绘和重排。那么有没有可能实现只更新我们修改的那一小块dom而不要更新整个 dom 呢？此时我们就需要先根据真实 dom 生成虚拟 dom ， 当虚拟 dom 某个节点的数据改变后会生成有一个新的 Vnode , 然后新的 Vnode 和旧的 Vnode 作比较，发现有不一样的地方就直接修改在真实DOM上，然后使旧的 Vnode 的值为新的 Vnode 。
diff 的过程就是调用 patch 函数，比较新旧节点，一边比较一边给真实的 DOM 打补丁。在采取 diff 算法比较新旧节点的时候，比较只会在同层级进行。 在 patch 方法中，首先进行树级别的比较 new Vnode 不存在就删除 old Vnode old Vnode 不存在就增加新的 Vnode 都存在就执行diff更新 当确定需要执行diff算法时，比较两个 Vnode ，包括三种类型操作：属性更新，文本更新，子节点更新 新老节点均有子节点，则对子节点进行 diff 操作，调用 updatechidren 如果老节点没有子节点而新节点有子节点，先清空老节点的文本内容，然后为其新增子节点 如果新节点没有子节点，而老节点有子节点的时候，则移除该节点的所有子节点 老新老节点都没有子节点的时候，进行文本的替换
updateChildren 将 Vnode 的子节点Vch和oldVnode的子节点oldCh提取出来。 oldCh和vCh 各有两个头尾的变量 StartIdx和EndIdx ，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了 key ，就会用 key 进行比较，在比较的过程中，变量会往中间靠，一旦 StartIdx>EndIdx 表明 oldCh和vCh 至少有一个已经遍历完了，就会结束比较。
你都做过哪些Vue的性能优化？
你知道Vue3有哪些新特性吗？它们会带来什么影响？
更小巧、更快速 支持自定义渲染器 支持摇树优化：一种在打包时去除无用代码的优化手段 支持Fragments和跨组件渲染
模板语法99%保持不变 原生支持基于class的组件，并且无需借助任何编译及各种stage阶段的特性 在设计时也考虑TypeScript的类型推断特性 重写虚拟DOM 可以期待更多的编译时提示来减少运行时的开销 优化插槽生成 可以单独渲染父组件和子组件 静态树提升 降低渲染成本 基于Proxy的观察者机制 节省内存开销
检测机制 更加全面、精准、高效,更具可调试式的响应跟踪
实现双向绑定 Proxy 与 Object.defineProperty 相比优劣如何?
React
1、react中key的作用，有key没key有什么区别，比较同一层级节点什么意思？
2、你对虚拟dom和diff算法的理解，实现render函数
虚拟DOM 本质上是 JavaScript 对象,是对 真实DOM 的抽象表现。 状态变更时，记录新树和旧树的差异 最后把差异更新到真正的 dom 中 render函数:
3、React组件之间通信方式？
Context 提供了一个无需为每层组件手动添加 props ，就能在组件树间进行数据传递的方法.如果你只是想避免层层传递一些属性，组件组合（ component composition ）有时候是一个比 context 更好的解决方案。 5. 组件组合缺点：会使高层组件变得复杂
4、如何解析jsx
5、生命周期都有哪几种，分别是在什么阶段做哪些事情？为什么要废弃一些生命周期？
componentWillMount、componentWillReceiveProps、componentWillUpdate在16版本被废弃，在17版本将被删除，需要使用UNSAVE_前缀使用，目的是向下兼容。
6、关于react的优化方法
使用return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少。
不要使用数组下标作为key 利用 shouldComponentUpdate 和 PureComponent 避免过多 render function ; render 里面尽量减少新建变量和bind函数，传递参数是尽量减少传递参数的数量。 尽量将 props 和 state 扁平化，只传递 component 需要的 props （传得太多，或者层次传得太深，都会加重 shouldComponentUpdate 里面的数据比较负担），慎将 component 当作 props 传入
使用 babel-plugin-import 优化业务组件的引入，实现按需加载 使用 SplitChunksPlugin 拆分公共代码 使用动态 import ，懒加载 React 组件
7、绑定this的几种方式
8、对fiber的理解
9、setState是同步还是异步的
10、Rex、React-Rex
Rex的实现流程
用户页面行为触发一个 Action ，然后 Store 调用 Recer ，并且传入两个参数：当前 State 和收到的 Action 。 Recer 会返回新的 State 。每当 state 更新之后， view 会根据 state 触发重新渲染。
React-Rex:
Provider ：从最外部封装了整个应用，并向 connect 模块传递 store 。 Connect ：
11、对高阶组件的理解
高阶组件是参数为组件，返回值为新组件的函数。 HOC 是纯函数，没有副作用。 HOC 在 React 的第三方库中很常见，例如 Rex 的 connect 组件。
高阶组件的作用：
12、可以用哪些方式创建 React 组件？
React.createClass()、ES6 class 和无状态函数
13、 React 元素与组件的区别？
组件是由元素构成的。元素数据结构是普通对象，而组件数据结构是类或纯函数。
Vue与React对比？
数据流：
react 主张函数式编程，所以推崇纯组件，数据不可变，单向数据流，
vue 的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。
监听数据变化实现原理 ：
组件通信的区别：jsx和.vue模板。
性能优化
vuex 和 rex 之间的区别？
从实现原理上来说，最大的区别是两点：
Rex 使用的是不可变数据，而 Vuex 的数据是可变的。 Rex 每次都是用新的 state 替换旧的 state ，而 Vuex 是直接修改
Rex 在检测数据变化的时候，是通过 diff 的方式比较差异的，而 Vuex 其实和Vue的原理一样，是通过 getter/setter 来比较的(如果看 Vuex 源码会知道，其实他内部直接创建一个 Vue 实例用来跟踪数据变化)
浏览器从输入url到渲染页面，发生了什么？
网络安全、HTTP协议
TCP UDP 区别
Http和Https区别（高频）
GET和POST区别（高频）
理解xss，csrf，ddos攻击原理以及避免方式
XSS ( Cross-Site Scripting ， 跨站脚本攻击 )是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens ，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。
CSRF （ Cross-site request forgery ） 跨站请求伪造 ：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
XSS避免方式：
CSRF 避免方式：
DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service ，其原理就是利用大量的请求造成资源过载，导致服务不可用。
❺ mvc和mvvm是前端还是后端
你这个说法其实不严密，MVC这种三层结构本身与前后端无关，仅仅前端自己，也可以用MVVM三层来实现，像React、Vue都是这样的。
如果你是从整个服务角度宏观来看的话，MVC里面的M和C在后端，V在前端；MVVM中的M和VM在后端，V在前端（也有人认为VM不一定在后端，我倾向于VM和M的关系更紧密，实现也一般都在后端）
❻ 什么是基于数据驱动的前端框架
首先，“数据驱动” 是一种编程范式(Programming Paradigm)，相似的有很多，详情可以参考这里：https://en.wikipedia.org/wiki...
如果只谈前端，那么问题就会简化很多，一般来说，会比较 “数据驱动” 与 “事件驱动”。数据驱动思想的出现一定程度上弥补了事件驱动的不足。
先说事件驱动，一个很典型的例子就是 jQuery。用 jQuery 开发的页面执行初期就像这样：
通过特定的选择器查找到需要操作的节点 -> 给节点添加相应的事件监听
响应用户操作，效果是这样：
用户执行某事件（点击，输入，后退等等） -> 调用 JavaScript 来修改节点
这种模式，对于业务需求简单的页面来说没什么问题。只是现在前端越来越复杂，光用这样的模式已经满足不了很多大型项目的需求。另一方面，找节点和修改节点这件事儿，效率本身就很低。因此出现了数据驱动模式，我们就拿其中的一种，MVVM 来举例子，执行初期就像这样：
读取模板，同时获得数据，并建立 VM(view-model) 的抽象层 -> 在页面进行填充
要注意的是，MVVM 对应了三个层，M - Model，可以简单的理解为数据层；V - View，可以理解为视图，或者网页界面；VM - ViewModel，一个抽象层，简单来说可以认为是 V 层中抽象出的数据对象，并且可以与 V 和 M 双向互动（一般实现是基于双向绑定，双向绑定的处理方式在不同框架中不尽相同）。
针对用户的操作，大致是这样：
用户执行某个操作 -> 反馈到 VM 处理（可以导致 Model 变动） -> VM 层改变，通过绑定关系直接更新页面对应位置的数据
总结一下，可以简单的这么去理解：数据驱动不是操作节点的，而是通过虚拟的抽象数据层来直接更新页面。我觉得，主要就是因为这一点，数据驱动框架才得以有较快的运行速度（因为不需要去折腾节点），并且可以应用到大型项目。
❼ MVVM是前端还是后端范畴
如果你是从整个服务角度宏观来看的话，MVVM中的M和VM在后端，V在前端（也有人认为VM不一定在后端，我倾向于VM和M的关系更紧密，实现也一般都在后端）。
❽ 你遇到的前端面试题都有什么
大家好，我是王我。
随着春节的结束，各个行业也普遍开始了上班的节奏， 不过本人17号才上班。为什么？因为长得帅的都上班比较晚。 当然，每到新年结束，又迎来了一批招聘者与面试者，我来说说作为一年工作经验应该知道的面试题。
HTML篇
1.doctype是什么？有哪些类型？
2.input有哪些新类型？简要说明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
4.bootstrap响应式的原理是什么？
5.多移动终端页面适配是如何实现的？
CSS篇
1.如何实现两列布局，左边自适应，右边固定宽度？
2.用CSS画一个三角形
3.CSS实现字体大写
4.display有哪些常用的属性值？分别是什么意思？
5.position为absolute，relative，fixed的定点位置
6.用三种方法清除浮动
7.请介绍一下margin塌陷问题
js篇
1.什么是事件冒泡和捕获？如何阻止事件冒泡？(分别用原生和jquery实现)
2.js创建对象，至少使用三种方法
3.简述一下事件穿透以及解决办法
4.用三种方式判断变量类型是否是数组
5.如何实现对象的拷贝？
6.什么是闭包？闭包的优缺点。
7.简述一下ajax请求的过程。
8.简述一下new一个人构造函数的人过程。
9.为什么会有跨域？是怎么解决跨域问题的？简述一下原理。
10.js原始数据类型有哪些？
11.学一个函数，判断一个变量是否是字符串
12.typeof有哪些结果？
13.剪头函数和普通函数有什么区别？
14.请用三种方法实现数组去重
15.href和src有什么区别？
jquery篇
1.attr()和prop()有什么区别？
2.on和bind有什么区别？js动态添加的dom元素是通过on还是bind？
3.touch和click有什么区别？
4.window.onload和jquery的ready有什么区别？
vue篇
1.简述一下vue的生命周期及其特点
2.vue双向绑定的原理是什么？
3.vue的特点有哪些？和jquery有什么区别？
4.父子组件之间传递数据的方法
5.子组件如何共享数据？
6.一般有什么工具进行数据交互？
7.webpack的原理是什么？
8.简述一下$nextTick的用法
浏览器篇
1.cookie、sessionStorage、localStorage的区别是什么？
2.有用过浏览器缓存吗？简述一下基本的缓存机制
网络篇
1.http和https之间的区别
2.从服务器的安全考虑，是使用get请求还是post请求？
3.URL请求的过程有哪些？
项目经验篇
1.项目中遇到的最大挑战以及解决办法
2.常见的网页优化有哪些？
作为一个面试一年以内工作经验的前端程序员来说，以上的问题能够倒答如流月薪6k应该不成问题啦。这些面试题也是我在很多面试中感觉经常被问到的题目。
希望大家年后找工作能够顺顺利利， 千万不要跟我一样哦，只有帅气就一无所有了。
大家好，我是王我，中国最帅的前端程序员。
前几次都是各种培训公司，各种忽悠就不提了，说说后面4次面试的经历。
第一次是面一个小公司，不过他们好像没有厉害的前端，来面我的是个后端，一来没有问我关于js的知识，直接问我以前做过什么，有没有经验，我本人不会吹牛，简历也没怎么包装，就是自己把自学的知识和做的几个小demo弄在上面，也用github挂在页面上了，不过他根本不点开看，也不问，问我会不会vue，我当时对框架还不了解，他就说他们需要能直接上手开始写的，所以我第一个就直接挂了。
第二次面试是一个国企，这个问了很多问题，都很基础，js数据类型，数组操作，事件，大概就是高程的前面几章看看就差不多都能答到，然后因为他们主要用jq，所以问了很多jq的操作，关于节点的，动画的，我看锋利的jq大概看了3遍，也练过多次，所以我答的很熟。然后问了些布局方面的，bootstrap我了解过，又看过css3，所以这方面也没啥问题，最后在现场做了个题目，主要就是布局然后通过ajax呈现数据。后面听介绍我面试的说面试官比较满意，说我jq很熟，一面就过了。可惜后面电话面试不知怎么回事可能表现的不够自信，虽然没问技术，但是我没啥自信，把没项目经验什么的也不知怎么就一五一十交代了，估计因为这个挂掉了。
第三次没问问题，直接就是一套题开做，我在那做了一个多小时。题目就是按照要求一步一步做一个页面出来，我也搞忘了我当时卡在哪个地方了，坐在那得时候就是做不出来，没有设计图，要根据他的描述自己找个设计图然后做，我第一次遇到这个有点懵，虽然当时没做出来，不过回来我自己花了几个小时把它做了。所以这个也是凉了。
第四个问的比较多，数据类型，数组操作，跨域，ajax，闭包，原型链，继承，深拷贝，浅拷贝，模块amd cmd，基本都是问的js。然后问了html5的新特性 css3 的新特性，遇到过什么浏览器的兼容性问题，怎么解决的，以后想往什么方面发展。这个时候我已经会点vue了，照着做了个小demo，不过后来知道公司用的angularjs，面试官也没看我做的，问也没问。。以前听网上说要带上自己的项目去面试感觉没起多大效果。
最后总结下如果面的比较初级的岗位，应该主要问js，原型链，继承，闭包，深浅拷贝，ajax，跨域，然后js的基础知识，对了还有apply和call也问了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一点的，暂时还没面过，等以后面过在来回答
1. cookie session 的用途和区别，以及有效期
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
2. vue的数据绑定原理，mvvm与mvc的区别
MVVM：
m:model数据模型层 v:view视图层 vm:ViewModel
vue中采用的是mvvm模式，这是从mvc衍生过来的
MVVM让视图与viewmodel直接的关系特别的紧密，就是为了解决mvc反馈不及时的问题
图片说明一下：
说到MVVM就要说一下双向绑定和数据劫持的原理，
MVC：
m:model数据模型层 v:view视图层 c:controller控制器
原理： c层需要控制model层的数据在view层进行显示
MVC两种方式，图片说明：
总结：
mvvm与mvc最大的区别：
MVVM实现了view与model的自动同步，也就是model属性改变的时候， 我们不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。
不懂得可以复制链接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的区别 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性
sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的
有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性
传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性
但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值
所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可
【数据为尊 ----数据映射到浏览器 如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面 ----映射关系统称】
缓存路由组件
使用的是vue的一个组件，参考vue的官方文档
使用这个东西可以保证我们在切换组件的时候，原来显示的组件不被销毁
-----【保障组件的数据不会被切换路由而销毁数据】
Home是对应的组件对象的名字，不是路由的名字
6.多维数组拍平
数组拍平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组
一红六种方法吧……
了解的请看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解决方案
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
这样就可以说同源策略----协议---端口---域名
原生的src和href可以解决跨域
代理可以解决
请求头也可以携带浏览器提示的也可以解决
一般都是后端解决跨域问题
【别的需要了解看下方链接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容问题§ 如果你使用cli创建项目（即项目根目录是package.json），不管用什么ide，即便是用HBuilderX，切记cli项目的编译器是在项目下的，HBuilderX不管怎么升级都不会影响编译器版本。你需要手动npm update来升级编译器。以及如果你想要安装less、scss等预编译器，也需要自己npm安装在项目下，而不是在HBuilderX的插件管理里安装。
§ 如果你使用离线打包，请注意HBuilderX升级后，真机运行基座和云打包对应引擎跟随HBuilderX升级，而你的sdk需要手动升级。sdk的版本升级一般滞后HBuilderX正式版升级一两天。
§ 如果你使用自定义基座，之前制作的自定义基座是不会跟随HBuilderX升级的，升级HBuilderX后你应该重新制作新版自定义基座。
§ 如果你使用wgt升级，新版HBuilderX编译的wgt，运行到之前的runtime上，一定要先测试好，看有没有兼容性问题。如果有问题，就不要wgt升级，整包升级。
§ 考虑到向下兼容，uni-app编译器在升级为新的自定义组件模式后，同时保留了对老编译模式的向下兼容。
在HBuilderX alpha版中，App端一定会使用新编译器，不理会manifest配置。
在HBuilderX 正式版中，新创建的项目会使用新编译器，老项目不会强制使用，而是开发者自己在manifest里配置开启。
§ 如果你使用其他ide开发uni-app，会经常因为拼错单词而运行失败，因为经过webpack编译一道，很多错误反应的不够直观，排错时间很长，不如从开始就依赖有良好提示的HBuilderX，避免敲错单词。
§ 云打包的引擎版本说明
HBuilderX Alpha，只有1套云打包机，不管你的HBuilderX alpha版本多少，对应的打包机一定是最新的alpha版的客户端引擎。
HBuilderX正式版，有2套打包机，一个是最新正式版，一个是次新正式版。
中间的紧急更新版本没有独立打包机。
举个例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1这几个正式版。
那么当前可用的打包机有1.9.1和1.8.2这2台。（即每个大版本的最后一个版本）
除了这2个HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版对应的打包机。（即只保留2个大版本的云打包机）
【详情请看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML书写规范
H5新增标签
HTML渲染过程
二、CSS
css盒子模型概念
css弹性布局概念
三、JavaScript
事件模型
DOM2级事件模型
闭包
原型链
四、移动Web开发
常见的布局方案
移动端前端常见的触摸相关事件touch、tap、swipe等整理
移动端前端手势事件
移动端页面渲染优化
GPU渲染
GPU核心渲染过程
五、调试
常用的调试工具
Chrome控制台调试js使用
移动端测试
六、HTTP网络知识
常见的HTTP状态码
不同请求类型的区别
WEB缓存方案
——————————
牛客网（www.nowcoder.com）
- 专业IT笔试面试备考平台
- 最全C++JAVA前端等互联网技术求职题库
- 全面提升IT编程能力
- 程序员交友圣地
分享了一些Web前端的面试题，限时一小时，你看看自己能够答出多少道！
放心，这些面试题都是一些非常基础的知识，只要你在平时认真听课、学习了，那么这些面试题肯定不会难道你。
建议：虽然没有人监督你，但还是希望你不要去寻找答案，脱离网络，拿起纸笔，你试一下自己究竟能够答出个什么水平！有没有真本领？答案尽在这些面试题里！那么，你准备好了吗？OK！计时开始！
一、HTML常见题目01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
02、HTML5为什么只需要写？
03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
04、页面导入样式时，使用link和@import有什么区别？
05、介绍一下你对浏览器内核的理解？
06、常见的浏览器内核有哪些？
07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
08、如何区分HTML和HTML5？
09、简述一下你对HTML语义化的理解？
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
二、CSS类的题目01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
02、CSS选择符有哪些？哪些属性可以继承？
03、CSS优先级算法如何计算？
04、CSS3新增伪类有那些？
05、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？
06、display有哪些值？说明他们的作用。
07、position的值relative和absolute定位原点是？
08、CSS3有哪些新特性？
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
三、Java类的题目
01、介绍Java的基本数据类型。
02、说说写Java的基本规范？
03、Java原型，原型链？有什么特点？
04、Java有几种类型的值？(堆：原始数据类型和栈：引用数据类型)，你能画一下他们的内存图吗？
05、Java如何实现继承？
06、Java创建对象的几种方式？
07、Java作用链域？
08、谈谈This对象的理解。
09、eval是做什么的？
10、什么是window对象？什么是document对象？
OK，一小时到了，这个时间可不算短了，那么这些面试题你答出了几道呢？你写的答案正确了吗？现在你可以去翻看答案了。
如果你答出了绝大多数的或者是全部的题，并且答案也正确了，那么恭喜你……
你这时心里是不是有点小窃喜，认为自己有能力拿高薪了？虽然我也很想这么告诉你，但事实上这只能表明你的基础扎实，毕竟这只是一些非常基础的面试题。骚年~继续努力吧！
如果你只答出了小部分或者答出了大部分题但答案不正确，那么我只想说：“骚年，你的水平还差的远呢。”连这么基础的题你都打不出来，还想拿高薪？回去再练一段时间吧！
扎实的基础是你拿高薪的重要武器，如果你连基础都不扎实，那么想要攻克“高薪”这个厚实的堡垒，那只是痴人说梦罢了。
1.前端框架类问题，问你会不会用vue react啊
2.语言类，问你一些JavaScript语言的问题
3.项目经验，让你讲讲做过的项目，遇到的问题和解决之道