牧碼人

vue-big

01、v-if和v-show指令
02、Vue路由拦截
03、Vue中父子组件生命周期钩子函数的执行顺序
04、MVVM
05、v-for和v-if
06、Vue中的data
07、v-model
08、route和router的区别
09、vue-router
10、computed（计算属性）和watch（监听）的区别及应用场景
11、Proxy与Object.defineProperty优势对比
12、VueX
13、Vue中的$nextTick
14、Vue组件间通信
15、Vue路由传参数
16、delete和Vue.delete删除数组的区别
17、Vue插槽
18、Vue响应数据的原理
19、DOM
20、diff
21、SPA单页面应用
22、v-on
23、Vue中的ref
24、Vue模板编译
25、Vue动态绑定class与style
26、可以在哪个生命周期内调用异步请求
27、Vue的介绍
28、keep-alive
29、让CSS只在当前组件中起作用
30、Vue的两个核心
31、Vue中的key
32、Vue性能优化
33、Vue的vm.$set的实现原理
34、Vue初始化做了什么
35、Vue单向数据流
36、Vue如何兼容IE
34、Vue自定义指令
35、Vue的生命周期
36、Vue3.0
- - -----------------------------ZF-----------------------------
- 1、渐进式框架
- 2、MVVM
- 3、new Vue
- 4、常用指令
- 5、for in 和 for of
- 6、过滤器/计算属性/监听器
- 7、过滤器（filters）
- 8、计算属性（computed）
- 9、监听器（watch）
- 10、class 和 style
- 11、Vue 的生命周期
- 12、Vue 的 ref
- 12、Vue 的组件components
- 13、components 的插槽（slot）
- 14、父组件给子组件传参
- 15、单项数据流
- 16、组件间传值
- 17、组件间传值之 ref
- 18、VueX
- 19、v-model

01、v-if和v-show指令

定义

v-if指令是通过销毁和重建DOM来使元素显示或隐藏。
v-show指令是通过修改元素的display属性让其显示或隐藏。

应用场景

v-if适用于不需要频繁切换条件的场景。
v-show适用于需要频繁切换条件的场景。

Vue的生命周期

生命周期	描述
`beforeCreate`（创建前）	组件实例被创建之初，组件的属性生效之前。
`created`（创建后）	组件实例已经完全创建，属性也绑定，但真实`DOM`还没有生成，`$el`还不可用。
`beforeMount`（载入前）	在挂载开始之前被调用，相关的`render`函数首次被调用。
`mounted`（载入后）	`el`被新创建的`vm.$el`替换，并挂载到实例上去之后调用该钩子。
`beforeUpdate`（更新前）	组件数据更新之前调用，发生在虚拟`DOM`打补丁之前。
`update`（更新后）	组件数据更新之后。
`beforeDestory`（销毁前）	实例销毁前调用，实例仍然可用。
`destoryed`（销毁后）	实例销毁之后调用，`Vue`实例指示的所有东西都会解绑，所有事件监听器和所有子实例都会被移除。

02、Vue路由拦截

03、Vue中父子组件生命周期钩子函数的执行顺序

渲染顺序

1、先父后子，完成顺序：先子后父
2、父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created => 子beforeMount => 子mounted => 父mounted

更新顺序

1、父更新导致子更新，子更新完成后父更新完成
2、父beforeUpdate => 子beforeUpdate => 子updated => 父updated

销毁顺序

1、先父后子，完成顺序：先子后父
2、父beforeDestroy => 子beforeDestroy => 子destroyed => 父destroyed

04、MVVM

MVVM是Model-View-ViewModel的缩写，也就是把MVC中的controller演变成ViewModel。
1、Model表示数据模型层。
2、View表示视图层，也就是UI组件。
3、ViewModel是View和Model层的桥梁，数据绑定到viewModel层并自动渲染到页面中，视图变化会通知viewModel层更新数据。

05、v-for和v-if

v-for的优先级高于v-if，连用的话每个循环出来的元素都添加了v-if，会造成性能问题，影响渲染速度。

06、Vue中的data

同一个组件被复用多次会创建多个实例，在JavaScript中，对象是引用关系。如果data是一个对象的话，这些实例用的是同一个构造函数。为了保证组件的数据独立，要求每个组件都必须通过data函数返回一个对象作为组件的状态。

07、v-model

1、使用数据劫持和发布订阅模式结合的方式实现，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图发生变化，数据也随之发生变化。
2、核心就是使用Object.defineProperty()方法来实现。
3、v-model本质上是语法糖，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件。
3.1、text和textarea元素标签使用value属性和input事件。
3.2、checkbox和radio使用checked属性和change事件。
3.3、select字段将value作为prop并将change作为事件。

08、route和router的区别

1、$route是路由信息对象，包括path、params、hash、query、fullPath、matched、name等路由信息参数。
2、$router是路由实例对象，包括了路由的跳转方法和钩子函数等。

09、vue-router

概念

vue-router有3种路由模式，分别是hash、history、abstract。
1、hash：使用URL hash值来作路由。支持所有浏览器，包括不支持HTML5 History Api的浏览器。
2、history：依赖HTML5 History Api和服务器配置实现。
3、abstract：支持所有JavaScript运行环境，如Node.js服务器端。如果发现没有浏览器的Api，路由会自动强制进入abstract模式。

源码

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}`);
		}
};

相关链接
1、掘金-原文

10、computed（计算属性）和watch（监听）的区别及应用场景

定义

1、computed计算属性是用来声明式的描述一个值依赖了其它的值。当模板里的数据绑定到一个计算属性上时，Vue会在其依赖的值发生改变时更新DOM。
2、watch监听的是定义的变量，当定义的变量值发生变化时，调用对应的回调方法。

应用场景

1、当需要进行数值计算，并且依赖于其它数据时，应该使用computed，因为可以利用computed的缓存特性，避免每次获取值时，都要重新计算。
2、当需要在数据变化时执行异步或开销较大的操作时，应该使用watch，因为watch允许执行异步操作，限制了执行该操作的频率，并在得到最终结果前，可以设置中间状态。这些都是计算属性无法做到的。

11、Proxy与Object.defineProperty优势对比

Proxy的优势

1、Proxy可以直接监听对象而非属性。
2、Proxy可以直接监听数组的变化。
3、Proxy有多达13种拦截方法，不限于apply、ownKeys、deleteProperty、hash等等是Object.defineProperty不具备的。
4、Proxy返回的是一个新对象，可以只操作新的对象达到目的，而Object.defineProperty只能遍历对象属性直接修改。
5、Proxy作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利。

Object.defineProperty的优势

兼容性好，支持IE9，而Proxy存在浏览器兼容性问题，而且无法用polyfill磨平，因此Vue的作者才声明需要等到下个大版本3.0或以上才能用Proxy重写。

相关链接
1、掘金-原文

12、VueX

定义

VueX是一个专为Vue.js应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

模块

1、state：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
2、getter：允许组件从store中获取数据，mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性。
3、mutation：是唯一更改store中状态的方法，且必须是同步函数。
4、action：用于提交mutation，而不是直接变更状态，可以包含任意异步操作。
5、module：允许将单一的store拆分为多个store且同时保存在单一的状态树中。

13、Vue中的$nextTick

异步方法，异步渲染最后一步，与JavaScript事件循环联系紧密。主要使用了宏任务微任务定义了一个异步方法，多次调用$nextTickt会将方法存入队列，通过异步方法清空当前队列。

14、Vue组件间通信

父子组件通信

在父组件标签上使用冒号声明自定义属性，给自定义属性赋值。在子组件中使用props接收父组件传过来的值即可。

子父组件通信

1. 在父组件标签上使用@自定义函数，并给自定义函数绑定一个函数名。在子组件中使用$emit触发父组件中的函数即可。
2. 在父组件标签上使用ref给组件重新取个新名字，并且在需要获取子组件值的地方使用this.$refs新名字value即可。

兄弟组件通信

1. eventBus方法通过一个空的Vue实例作为中央事件总线，也就是事件中心，用它来触发事件和监听事件，从而实现各组件间的通信。
2. VueX是一个专为Vue.js应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

15、Vue路由传参数

1、在query对象中定义属性和值，在需要的地方使用this.$route.query接收即可。
2、在params对象中定义属性和值，在需要的地方使用this.$route.params接收即可。
注意：query传参需要使用path和name来引入。params传参需要使用name来引入。

16、delete和Vue.delete删除数组的区别

1、delete只是被删除的元素变成了empty/undefined，其他的元素的键值还是不变。
2、Vue.delete直接删除数组，改变数组的键值。

17、Vue插槽

定义

slot通俗的理解就是占位，在组件模板中占好了位置，当使用该组件标签时，组件标签里面的内容就会自动填充到该位置，也就是替换组件模板中slot的位置。

内容插槽

1、插槽内可以包含普通文本。
2、插槽内可以包含任何模板代码，包括HTML。
3、插槽内可以添加其他组件。
5、插槽内可以使用data中的数据。
规则
1、父模板里的所有内容都在父级作用域中编译。
2、子模板里的所有内容都在子级作用域中编译。

后备内容，也就是默认内容插槽

有时候需要给插槽设置一个具体的默认内容，当别的组件没有给内容的时候，默认的内容就会被渲染。

具名插槽

当一个组件里面需要多个插槽的时候，slot标签元素有一个特殊的特性，那就是name属性。slot元素的这个特性可以用来定义额外的插槽。
实现
1、在父组件中的子组件标签里面使用template标签来实现，并且在template标签上绑定v-slot:value。
2、在子组件的slot标签上使用name等于父组件中v-slot冒号后面的值即可。

作用于插槽

插槽里面的数据不是直接写死在标签上，而是在data函数中获取。
实现
1、在父组件的子组件标签里面使用双花括号绑定语法即可。
2、在子组件的slot标签里面使用双花括号绑定语法即可。

相关链接
1、掘金-原文
2、源码实现

18、Vue响应数据的原理

定义

Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，Object.defineProperty可以使数据的获取与设置增加一个拦截的功能，拦截属性的获取，进行依赖收集。拦截属性的更新操作，进行通知。

具体的过程

首先Vue使用initData初始化用户传入的参数，然后使用new Observer对数据进行观测，如果数据是一个对象类型就会调用this.walk操作对象，内部使用defineeReactive循环对象属性定义响应式变化，核心就是使用Object.defineProperty重新定义数据。

19、DOM

19.1、在什么阶段才能访问操作DOM

在钩子函数mounted被调用前，Vue已经将编译好的模板挂载到页面上，所以在mounted中可以访问操作DOM。
注意：mounted不会承诺所有的子组件也都一起被挂载。如果希望等到整个视图都渲染完毕，可以用vm.$nextTick替换掉mounted。

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

19.2、虚拟DOM的优缺点
19.2.1、优点

1、保证性能下限：框架的虚拟DOM需要适配任何上层API可能产生的操作，它的一些DOM操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的DOM操作性能要好很多，因此框架的虚拟DOM至少可以保证在不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限。
2、无需手动操作DOM：程序员不再需要手动去操作DOM，只需要写好ViewModel的代码逻辑即可，框架会根据虚拟DOM和数据双向绑定原理来实现视图的更新，极大的提高开发效率。
3、跨平台：虚拟DOM本质上是JavaScript对象，而DOM与平台强相关，相比之下虚拟DOM可以进行更方便地跨平台操作，例如服务器渲染、weex开发等等。

19.2.2、缺点

无法进行极致优化：虽然虚拟DOM做了合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。

19.3、虚拟DOM实现原理

1、使用JavaScript对象模拟真实DOM树，对真实DOM进行抽象。
2、使用diff算法比较两棵虚拟DOM树的差异。
3、使用pach算法将两个虚拟DOM对象的差异应用到真正的DOM树上。

19.4、如何从真实DOM到虚拟DOM

1、将模板转换成AST树，AST用对象来描述真实的JavaScript语法，也就是将真实DOM转换成虚拟DOM 。
2、优化树。
3、将AST树生成代码。

19.5、用VNode来描述一个DOM结构

虚拟节点就是用一个对象来描述一个真实的DOM元素。首先将template，真实DOM先转成AST，AST树通过codegen生成render函数，render函数里的_c方法将它转为虚拟DOM。

19.6、虚拟DOM

1、由于DOM操作耗时长，且DOM对象的体积大，单个div的DOM属性就有294个之多。
2、Virtual DOM就是用一个原生的JavaScript对象去描述一个DOM节点，所以它比创建一个DOM的代价要小很多。
3、VNode是对真实DOM的一种抽象描述，它的核心定义无非就几个关键属性，标签名、数据、子节点、键值等，其它属性都是用来扩展VNode的灵活性以及实现一些特殊feature的。由于VNode只是用来映射到真实DOM的渲染，不需要包含操作DOM的方法，因此它是非常轻量和简单的。
4、Virtual DOM到真实的DOM需要经过以下过程：VNode的create、diff、patch。

20、diff

一个树的完全diff算法是一个时间复杂度为O(n*3)，vue进行优化转化成O(n)。
1、最小量更新， key很重要。这个可以是这个节点的唯一标识，告诉diff算法，在更改前后它们是同一个DOM节点。
2、v-for为什么要有key，没有key会暴力复用，举例子的话随便说一个比如移动节点或者增加节点（修改DOM），加key只会移动对应节点，减少了DOM操作。
3、只有是同一个虚拟节点才会进行精细化比较，否则就是暴力删除旧的，插入新的节点。
4、只进行同层比较，不会进行跨层比较。

diff算法的优化策略：四种命中查找，四个指针
1、旧前与新前（先比开头，后插入和删除节点的这种情况）
2、旧后与新后（比结尾，前插入或删除的情况）
3、旧前与新后（头与尾比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧后之后）
4、旧后与新前（尾与头比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧前之前）

21、SPA单页面应用

21.1、说说你对SPA单页面的理解，它的优缺点分别是什么
理解

SPA(single page application)仅在Web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现HTML内容的变换，UI与用户的交互，避免页面的重新加载。

优点

1、用户体验好且快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染。
2、基于上面一点，SPA相对服务器压力小。
3、前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理。

缺点

1、初次加载耗时多：为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面按需加载。
2、前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理。
3、SEO难度较大：由于所有的内容都在一个页面中动态替换显示，所以在SEO上有其天然的弱势。

21.2、如何优化SPA应用的首屏加载速度慢的问题

1、将公用的JavaScript库通过script标签外部引入，减小app.bundle的大小，让浏览器并行下载资源文件，提高下载速度。
2、在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小app.bundle的体积，在调用某个组件时再加载对应的js文件。
3、加一个首屏loading图，提升用户体验。

21.3、Vue的SPA如何优化加载速度

1、减少入口文件体积。
2、静态资源本地缓存。
3、开启Gzip压缩。
4、使用SSR和nuxt.js。

22、v-on

v-on可以监听多个方法吗

可以。

<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />

v-on常用修饰符

1、stop该修饰符将阻止事件向上冒泡。同理于调用event.stopPropagation()方法。
2、prevent该修饰符会阻止当前事件的默认行为。同理于调用event.preventDefault()方法。
3、self该指令指当事件是从事件绑定的元素本身触发时才触发回调。
4、once该修饰符表示绑定的事件只会被触发一次。

23、Vue中的ref

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。

24、Vue模板编译

Vue模板渲染的原理

Vue中的模板template无法被浏览器解析并渲染，因为这不属于浏览器的标准，不是正确的HTML语法，所以需要将template转化成一个JavaScript函数，这样浏览器就可以执行这一个函数并渲染出对应的HTML元素，就可以让视图跑起来了，这一个转化的过程，就成为模板编译。
模板编译又分三个阶段，分别是解析parse 、优化optimize和生成generate，最终生成可执行函数render。
1、parse阶段：使用大量的正则表达式对template字符串进行解析，将标签、指令、属性等转化为抽象语法树AST。
2、optimize阶段：遍历AST，找到其中的一些静态节点并进行标记，方便在页面重新渲染的时候进行diff比较，在进行diff比较时直接跳过这些静态节点，优化runtime的性能。
3、generate阶段：将最终的AST转化为render函数字符串。

Vue template模板的预编译

1、对于Vue组件来说，模板编译只会在组件实例化的时候编译一次，生成渲染函数之后再也不会进行编译。因此，编译对组件的runtime是一种性能损耗。
2、模板编译的目的仅仅是将template转化为render函数，这个过程，正好可以在项目构建的过程中完成，这样可以让实际组件在runtime时直接跳过模板渲染，进而提升性能，这个在项目构建的编译template的过程，就是预编译。

25、Vue动态绑定class与style

25.1、class
对象语法

<div v-bind:class="{ active: isActive }">div>

数组语法

<div v-bind:class="[activeClass, errorClass]">div>

25.2、style
对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">div>