获取异步调用返回的数据。
使用和DOM实现部分刷新。
13.请解释一下同源策略？
概念：同源策略是客户端脚本（尤其是.0，其目的是防止一个文档或脚本从多个不同的来源加载。这里的同源策略是指：同一个协议, 域名, 端口 , 同源策略是一种安全协议。指的是只能读取同源窗口和文档属性的脚本。
14.介绍闭包和闭包的常见场景？
应用场景、设置私有变量的方法
不适用：返回闭包的函数是一个非常大的函数
闭包的缺点是常驻内存，使用不当会增加内存使用量，导致内存泄漏
内存（垃圾）收集机制
15.?
16. 原型，原型链？有什么特点？
五、Vue 文章
1.谈谈你对MVVM开发模型的理解？
2. v-if 和 v-show 有什么区别？
3.你用过Vuex吗？
Vuex 是为 Vue.js 应用程序开发的状态管理模式。每个 Vuex 应用程序的核心是 store。 “存储”基本上是一个容器，用于保存应用程序中的大部分状态。
主要包括以下模块：
4.说说你对SPA单页的理解，它的优缺点是什么？
SPA ( -page ) 仅在网页初始化时加载相应的 HTML、 和 CSS。一旦页面>页面加载完毕，SPA不会因用户操作重新加载或跳转页面；而是通过路由机制实现 HTML 内容、UI 和用户交互的转换，避免页面重载。
5.如何动态绑定Class和Style？
类可以通过对象语法和数组语法动态绑定：
6.如何理解Vue的单向数据流？
所有的 props 在它们的 和 child props 之间形成一个单向的下行绑定：对 prop 的更新会向下流向子组件，但不是相反。这可以防止子组件意外更改父级的状态，这可能使您的应用程序的数据流难以理解。另外，每次父组件更新时，子组件中的所有 props 都会刷新到最新的值。这意味着您不应该更改子组件内的道具。如果你这样做了，Vue 将在浏览器的控制台中发出警告。当子组件要修改时，只能通过 $emit 派发一个自定义事件。父组件收到后，会被父组件修改。
put和watch有什么区别，有哪些使用场景？
8. 直接给数组项赋值，Vue能检测到变化吗？
由于 的限制，Vue 无法检测到对以下数组的更改：
// Array.prototype.splice
vm.items.splice(newLength)9.说说你对Vue生命周期的理解？
Vue实例有一个完整的生命周期，即从开始创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染、卸载等一系列流程，我们称之为生命周期Vue 的。
生命周期说明
组件实例创建时，组件属性生效前
组件实例已经完全创建并绑定了属性，但是真正的dom还没有生成，$el还不可用
挂载开始前调用：第一次调用关联函数
el被新创建的vm.$el替换，挂载到实例后调用hook
在组件数据更新之前调用，在修补虚拟 DOM 之前调用
组件数据更新后
keep-alive独占，组件激活时调用
keep-alive独占，组件销毁时调用
在组件销毁之前调用
组件销毁后调用
10.Vue的父组件和子组件生命周期钩子函数执行顺序？
Vue的父组件和子组件生命周期钩子函数执行顺序可以分为以下4个部分：
11.父组件能否监控子组件的生命周期？
例如，如果有一个父组件和一个子组件Child，如果父组件监听子组件的挂载，它会做一些逻辑处理css中的关闭按钮，可以通过下面的写法来实现：
// Parent.vue
// Child.vue
mounted() {
this.$emit("mounted");
}以上需要通过$emit手动触发父组件的事件。当父组件引用子组件时，可以通过@hook 进行更简单的监控，如下所示：
// Parent.vue
doSomething() {
console.log('父组件监听到 mounted 钩子函数 ...');
},
// Child.vue
mounted(){
console.log('子组件触发 mounted 钩子函数 ...');
},
// 以上输出顺序为：
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...
当然@hook方法不仅可以监听，还可以监听其他生命周期事件，比如：等
12.告诉我们你对keep-alive了解多少？
keep-alive是Vue的内置组件，可以保持被包含组件的状态，避免重新渲染。它具有以下特点：
为什么数据在
13. 组成一个函数？
14. v-model的原理？
我们主要使用vue项目中的v-model指令来创建表单输入、、、等元素的双向数据绑定。我们知道v-model本质上是语法糖，而v-model内部是针对不同的输入元素使用不同的属性并抛出不同的事件：
相当于
如果在自定义组件中，v-model 将默认使用一个名为 value 的 prop 和一个名为 input 的事件，如下所示：
父组件：
子组件：
{{value}}
props:{
value: String
},
methods: {
test1(){
this.$emit('input', '小红')
},
},
15.Vue组件之间的通信方式有哪些？
Vue 组件之间的通信是面试中的常见知识点之一。这个问题类似于一个开放式问题。当然，你回答的方法越多，得到的分数就越多，说明你对Vue的熟练程度更高。
Vue组件之间的通信仅指以下三种通信：父子组件通信、代际组件通信、兄弟组件通信。下面我们分别介绍每种通信方式，并说明该方式适用于哪种类型的组件间通信。
(1）props / $emit 用于父子组件通信
(2）ref 和 $/$ 用于父子组件通信
(3） ($emit / $on)：用于父子、代际、兄弟组件通信
(4）$attrs/$: 用于代际组件通信
(5） / 用于代际组件通信
(6）Vuex适合父子、代际、兄弟组件通信
16. 用过 Vue SSR 吗？说说SSR？
服务端渲染SSR的优缺点如下：
(2)服务端渲染的缺点：
17. vue- 路由模式有几种？
vue-有3种路由方式：hash, ，对应源码如下：
switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base)
break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case 'abstract':
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE_ENV !== 'production') {
assert(false, `invalid mode: ${mode}`)
}
}
其中，三种路由模式的说明如下：
18.能说说vue-中常用的hash和路由模式的实现原理吗？
1）Hash模式实现原理 前端路由的早期实现都是基于.hash。实现原理非常简单。 .hash 的值是 URL 中# 之后的内容。比如下面这个网站，它的.hash值为’#’：#hash路由模式的实现主要基于以下几个特点：
(2）模式HTML5的实现原理提供了实现URL变化的API。最重要的API有以下两个：.()和.()。这两个API可以在不刷新的情况下使用，操作浏览器的历史，唯一的区别是前者是添加新的历史，后者是直接替换当前的历史，如下图：..(null, null, path);..( null, null, path); 路由模式的实现主要基于以下特征的存在：
19.Vue框架如何实现对象和数组监控？
Vue数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。那就是：
其中View变化更新Data，可以通过事件监听来实现，所以Vue的双向数据绑定的工作主要是如何根据Data变化更新View。 Vue主要通过以下4个步骤实现数据双向绑定：
20.Vue如何实现双向数据绑定？
如果被问到 Vue 是如何实现双向数据绑定的，大家肯定会回答通过 .() 劫持数据，但是 .() 只能劫持属性的数据，不能劫持整个对象。同样的，数组也不能被劫持，但是我们都知道在Vue框架中，Vue可以检测到对象和数组的变化（一些方法的操作），那么它是如何实现的呢？我们看下相关代码如下：
/**
* Observe a list of Array items.
*/
observeArray (items: Array) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i]) // observe 功能为监测数据的变化
}
}
/**
* 对属性进行递归遍历
*/
let childOb = !shallow && observe(val) // observe 功能为监测数据的变化
通过查看上面的vue源码部分，可以知道vue框架遍历数组，递归遍历对象，从而使用.()监控对象和数组（一些方法的操作）。
21.vue如何使用vm.$set()解决对象新增属性无法响应的问题？
在现代约束下，Vue 无法检测到对象属性的添加或删除。由于 Vue 在实例初始化时执行/转换属性，因此该属性必须存在于数据对象上，以便 Vue 将其转换为反应式。但是 Vue 提供了
Vue.set(, , value) / vm.$set(, prope
要实现为对象添加响应式属性，框架本身是如何实现的？
export function set (target: Array | Object, key: any, val: any): any {
// target 为数组
if (Array.isArray(target) && isValidArrayIndex(key)) {
// 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
target.length = Math.max(target.length, key)
// 利用数组的splice变异方法触发响应式
target.splice(key, 1, val)
return val
}
// key 已经存在，直接修改属性值
if (key in target && !(key in Object.prototype)) {
target[key] = val
return val
}
const ob = (target: any).__ob__
// target 本身就不是响应式数据, 直接赋值
if (!ob) {
target[key] = val
return val
}
// 对属性进行响应式处理
defineReactive(ob.value, key, val)
ob.dep.notify()
return val
}
从上面的源码我们可以看出，vm.$set的实现原理是：
22.虚拟DOM的优缺点是什么？
优点：
缺点：
23. 虚拟 DOM 是如何工作的？
虚拟DOM的实现原理主要包括以下三部分：
24. Vue 中的 key 有什么作用？
key 是 Vue 中 vnode 的唯一标签。有了这个key，我们的diff操作就可以更准确更快了。 Vue的diff过程可以概括为：oldCh和newCh各有两个头尾变量，and ，它们会成对比较新节点和旧节点，也就是一共有4种比较方式：sum、sum , sum, and , 如果以上4个比较不匹配，如果设置了key，则再次使用key进行比较。在比较过程中，遍历会偏向中间。一旦 > 表示至少遍历了 oldCh 和 newCh 之一，则结束比较。所以vue中key的作用是：key是vnode在vue中的唯一标记，通过这个key，我们的diff操作可以更准确更快！
function createKeyToOldIdx (children, beginIdx, endIdx) {
let i, key
const map = {}
for (i = beginIdx; i <= endIdx; ++i) {
key = children[i].key
if (isDef(key)) map[key] = i
}
return map
}25.你对你的 Vue 项目做了哪些优化？
(1）代码级优化
(2）关卡优化
(3）基础网络技术优化
26.你知道vue3.0这个特性吗？
Vue3.0 的目标是让 Vue 核心更小、更快、更强大，因此 Vue 3.0 添加了这些新特性：
(1）监控机制的变化3.0将带来基于代理的实现，提供反应式跟踪的全语言覆盖。这消除了Vue 2中基于.的实现存在的许多限制：
新版还提供以下功能：
(2）模板模板没有大的变化，只是改变了scope slot。2.x的机制导致scope slot发生变化，父组件会重新渲染,而3.0将scope slot改为方法，只会影响子组件的重新渲染，提高渲染性能，同时对于，vue3.0也会执行a 一系列改变css中的关闭按钮，方便直接使用api生成vdom的习惯。
(3）对象式的组件声明 vue2.x中的组件是通过一系列的声明来传递的，求和的组合需要一些装饰器来完成，虽然可以实现函数，但是比较麻烦 3.0 修改了组件的声明方式，改成类的写法，组合起来很方便，另外vue的源码是也写了。其实代码的功能比较复杂的时候，肯定有静态类型系统来做一些辅助管理的，现在vue3.0也已经完全改写了，这样更容易结合暴露的APIs. 静态类型 系统对于复杂代码的维护确实是必须的。
(4）vue其他变化3.0变化比较全面，上面只介绍了主要的3个方面，还有一些其他变化：
六、其他杂项
1.常见的浏览器内核有哪些？
一开始渲染引擎和JS引擎没有分清楚。后来JS引擎越来越独立，内核趋向于只指渲染引擎。
通用内核
2.网页前端性能优化的方法有哪些？
1.压缩css、js、图片2.减少http请求数，合并css、js，合并图片（精灵图片）3.使用CDN4.减少dom元素数量5.延迟加载图片6.静态资源也使用不存在的域名7.减少dom访问（缓存dom）8.使用事件委托9.@ >样式表顶部，脚本向下
3. 网页从输入URL到渲染经过什么过程？
大致可以分为以下七个步骤：
4.线程和进程有什么区别？
暂无评论内容