1,生命周期

1-1，什么是生命周期？

从创建到销毁的过程，就是指实例从创建，初始化数据，编译模板，挂载DOM, 更新，销毁的一系列过程

## 1-2，生命周期的几个步骤
beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestroy destroyed

## 1-3,生命周期的作用
vue可以在不同阶段处理做不同的逻辑处理,准确地控制数据流和其对DOM的影响

## 1-4，第一次页面加载会触发几个钩子？
beforeCreate created beforeMount mounted

## 1-5,生命周期的几个作用(适合哪些场景)
beforeCreat 创建前，可以加一个loadering事件, 在加载实例时触发
created 创建后，可以将loadering事件取消，可以做接口数据请求
mounted  挂载后可以获取到dom节点
nextTick 更新数据后立即操作dom

## 1-6，dom渲染在哪个生命周期就已经完成了？
mounted

7，v-show 和v-if的区别

v-show是css样式的更改，给dom加dislay:block|none; v-if 表示是否显示隐藏dom节点

8，开发中的常用指令

v-model //双向绑定，是一个语法糖，相当于 :value="message" @input = "' $emit',$ event.target.value=message" v-if v-else-if v-else v-show v-on v-bind v-clock v-once v-for v-text v-html

9,绑定class的数组用法

:class="[class1,class2]" :class="{ 'color1': class1, 'color1': class2}" :style={ color: color,fontSize: fontSize+'px'}

10, mvvm

m 是数据模型层 v是视图层 vm 是数据视图模型层，将数据和模型连接起来。

11，computed和watch的区别和运用用场景

computed是计算属性，具有缓存性 watch 观察的作用，类似于数据的监听回调，没有缓存，页面重新渲染时值不变化也会执行。当要进行数值计算，而且依赖于其它数据，那么这个交给computed 如果需要再数据变化时做一些事情，使用watch来观察数据变化。运用场景：当我们需要进行数值计算，并且依赖于其它数据时，应该使用computed，因为可以利用computed的缓存特性，避免每次获取值时，都需要重新计算；当我们需要在数据变化时执行一步或开销较大的操作时，应该使用watch,使用watch选项允许我们执行异步操作，限制我们执行该操作的频率，并且我们得到最终结果前，设置中间状态，这些都是计算属性无法做到的。

12，vue组件的scoped属性的作用。

表示样式只能在当前组件下有效。

13，vue是渐进式框架的理解

vue的核心是视图模板引擎，前端只需要关注视图层。

14，vue.js的两个核心是什么？

数据驱动，组件系统

15，vue常用修饰符

表单修饰符 .lazy v-model在每次input事件触发后将输入框的值与数据进行同步，可以添加lazy修饰符 .number .trim 自动过滤首尾空白字符

事件修饰符 @click.stop 阻止冒泡 @click.prevent 阻止默认 @submit.prevent 提交事件不再重载页面 @click.stop.prevent 串联 @click.self 只能触发当前自身 @click.once只能触发一次

按键修饰符 .enter .tab .13等 <input @keyup.enter="submit">

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

可以的 //一个元素绑定多个事件的 <button @click="a(),b()">//一个事件绑定多个函数的来个那种写法

17vue事件中如何使用event对象

18, 比如你想让一个dom元素显示，然后下一步去获取这个元素的offsetWidth，最后你获取到的会是0,因为数据改变show变成true, 元素并不会立即显示，所以获取不到宽度，正确的做法是先把元素show出来，然后在$nextTick去执行获取宽度的操作。

getdata(){ this.show = true; //这里获取不到宽度 this. $nextTick(()=>{ //这里是数据更新后立即操作dom let w = this.$ refs.submenu.offsetWidth; }) }

19, vue组件中为什么必须是data函数？

对象是引用的，组件可能会被多个实例同时使用，这样就会造成数据受到影响，用函数可以避免数据混论

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

spa仅在web页面初始化时加载相应的html,js,css,一旦页面加载完成，spa不会因为用户的操作而进行页面的重新加载或跳转取而代之的时利用路由机制实现页面之前的变换，ui与用户的交互，避免页面的重新加载

优点：

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

缺点：

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

21，怎样理解vue的单向数据流？

所有的prop都使得其父子prop之间形成一个单向下行绑定，父级prop的更新会向下流动到子组件，但返过来则不行，这样会防止子组件意外改变父组件的状态。从而导致你应用的数据流难以理解。额外的，每次父级组件发生变更时，子组件中所有的prop都将会刷新为最新的值，这意味着你不应该在一个子组件内部改变prop 如果这样做了，vue会在浏览器控制台中发出警告，子组件想修改时，只能通过$emit派发一个自定义事件，父组件接收到后，由父组件修改。

22，直接给一个数组赋值，vue能检测到变化吗？

不能。需要使用vue的方法：全局：Vue.set(listdata,'age','18') 局部： this.$set(listdata,'age','18');

23，你有看过vue推荐的风格指南吗？列举出你知道的几条

1、使用v-for时记得加key，可以快速定位到需要更新的demo节点，提高效率 2、避免v-if和v-for用在一起 3、优先通过vuex管理全局状态，而不是通过this.$root或一个全局事件总栈 4、组件数据，data必须是一个函数 5、为组件样式设置作用区scoped 6、细致的prop定义 7、指令缩写v-bind用： v-on用@ 8、组件中只包含简单的表达式，复杂的应该放在计算属性或者方法中

24，vue如何优化首页的加载速度？

异步路由，异步加载，分屏加载，按需加载，延时加载图片等

25,vue打包成最终的文件有哪些？

vendor.js , app.js, app.css 默认的一个html文件，如果有设置到单独提取css的话，还有xxx.css

26,vue首页白屏是什么问题引起的？如何解决呢？

首页加载慢，1可以采用js分包、懒加载。2可以利用SSR同构渲染。代码图片资源压缩

27,说说你对单向数据流和双向数据流的理解

父传子的props就是单向数据流 v-model就是双向数据流

28,移动端ui你用的是哪个ui库？有遇到过什么问题吗？

vant，mint等等吧

29，为什么vue使用异步更新组件？

避免不必要的计算和dom操作

30，如何实现一个虚拟DOM？说说你的思路

虚拟Dom在vue底层实现中是一个类，每次_render的时候都会实例化Vnode为一个虚拟dom对象。也就是说本质上是用一个js对象来描述dom节点。

31，SPA单页面的实现方式有哪些？

hash | history

32, 使用vue开发过程你是怎么做接口管理的？

在request.js中对axios请求统一处理，然后在api文件夹中引入request.js后再使用，封装后的方法进行请求

33, 你有封装过axios吗？主要是封装哪方面的？axios是什么？怎样使用它？怎么解决跨域的问题？

用Promise在封装一次axios，并统一baseURL，超时时间，请求拦截，响应拦截处理，统一管理接口，批量导出。 axios跨域：定义baseURL、配置proxyTable

34, 组件和插件有什么区别？

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue。插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身。

35 什么时候使用keep-alive元素？

当由于数据属性或其他某种响应状态而动态切换组件时，每次将它们切换到渲染状态时，都会被重新渲染。尽管你可能需要这种行为，但在某些情况下重新渲染可能是不合适的。例如在创建时从 API 调用中引入数据的组件。你可能不希望每次动态切换这个组件进行渲染时都调用此 API。这时你可以将组件包含在 keep-alive 元素中。keep-alive 元素缓存该组件并从那里获取它，而不是每次都重新渲染它。

36 在 Vue 实例中编写生命周期 hook 或其他 option/propertie 时，为什么不使用箭头函数？

箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文中。当你在 Vue 程序中使用箭头函数（=>）时，this 关键字病不会绑定到 Vue 实例，因此会引发错误。所以强烈建议改用标准函数声明。

#37 在大型 Vue 程序中管理状态的推荐方法是什么？为什么？当程序在功能和代码方面不断增长时，状态管理会变得困难，并且使用无穷无尽的下游网络 prop 和上游事件当然不是明智的决定。在这种情况下，有必要将状态管理转移到中央管理系统。 Vue 生态系统中提供了 Vuex，它是官方的状态管理库，也是推荐用于集中存储状态的模式。

Vuex 允许维护中央状态。组件将 Vuex 用作响应性数据存储，并在状态更新时进行更新。多个或者不相关的组件可以依赖于相同的中央存储。

在这种情况下，Vue 充当纯 View 层。要修改状态，视图层（例如按钮或交互式组件）需要发出 Vuex Action，然后执行所需的任务。为了更新或修改状态，Vuex 提供了 Mutations。这个工作流程的目的是留下可用的操作痕迹。

#38 什么是异步组件？当大型程序使用大量组件时，从服务器上同时加载所有组件可能是没有意义的。在这种情况下，Vue 允许我们在需要时定义从服务器异步加载的组件。在声明或注册组件时，Vue 接受提供 Promise 的工厂函数。然后可以在调用该组件时对其进行“解析”。

通过仅加载基本组件并把异步组件的加载推迟到未来的调用时间，可以节省带宽和程序加载时间。

这是一个异步组件的简单示例。 new Vue({ components: { ‘tweet-box’: () => import(‘./components/async/TweetBox’) } });

#39 什么时候调用 “updated” 生命周期 hook ？在更新响应性数据并重新渲染虚拟 DOM 之后，将调用更新的 hook。它可以用于执行与 DOM 相关的操作，但是（默认情况下）不能保证子组件会被渲染，尽管也可以通过在更新函数中使用 this.$nextTick 来确保。

#40 什么是虚拟 DOM？文档对象模型或 DOM 定义了一个接口，该接口允许 JavaScript 之类的语言访问和操作 HTML 文档。元素由树中的节点表示，并且接口允许我们操纵它们。但是此接口需要付出代价，大量非常频繁的 DOM 操作会使页面速度变慢。

Vue 通过在内存中实现文档结构的虚拟表示来解决此问题，其中虚拟节点（VNode）表示 DOM 树中的节点。当需要操纵时，可以在虚拟 DOM的内存中执行计算和操作，而不是在真实 DOM 上进行操纵。这自然会更快，并且允许虚拟 DOM 算法计算出最优化的方式来更新实际 DOM 结构。

一旦计算出，就将其应用于实际的 DOM 树，这就提高了性能，这就是为什么基于虚拟 DOM 的框架（例如 Vue 和 React）如此突出的原因

#41 什么是 Vue 插件？ Vue 插件允许开发人员构建全局级别的功能并将其添加到 Vue。用于向程序添加可以全局访问的方法和属性、资源，选项，mixin 以及其他自定义 API。 VueFire 是 Vue 插件的一个例子，该插件添加了 Firebase 特定的方法并将其绑定到整个程序。之后 firebase 函数可在程序结构中的任何位置的 this 上下文中使用。

#42. 什么是渲染函数？举个例子。 Vue 允许我们以多种方式构建模板，其中最常见的方式是只把 HTML 与特殊指令和 mustache 标签一起用于响应功能。但是你也可以通过 JavaScript 使用特殊的函数类（称为渲染函数）来构建模板。这些函数与编译器非常接近，这意味着它们比其他模板类型更高效、快捷。由于你使用 JavaScript 编写渲染函数，因此可以在需要的地方自由使用该语言直接添加自定义函数。

对于标准 HTML 模板的高级方案非常有用。 new Vue({ el: '#app', data: { fruits: ['Apples', 'Oranges', 'Kiwi'] }, template: <div> <h1>Fruit Basket</h1> <ol> <li v-for="fruit in fruits">{{ fruit }}</li> </ol> </div> });

#43### 在开发过程中，如果你的 Vue 程序和后端 API 服务器未在同一主机上运行，该如何代理 API 请求。假设使用 Vue-CLI 3 进行设置？假设我们有一个运行在 localhost:4040 上的 Node.js 后端服务器。为了确保代理并可以从组件中访问它，可以配置 vue.config.js 文件并包含 devServer 部分，如下所示：

在 vue.config.js 文件中： module.exports: { devServer: { proxy: { '/api': { target: ‘http://localhost:4040/api’, changeOrigin: true } } } }

#43 什么是 mixin？ Mixins 使我们能够为 Vue 组件编写可插拔和可重用的功能。如果你希望在多个组件之间重用一组组件选项，例如生命周期 hook、方法等，则可以将其编写为 mixin，并在组件中简单地引用它。然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优先于组件自己的 hook

#44 什么是vue-loader？ Vue-loader 是 Webpack 的加载器模块，它使我们可以用 .vue 文件格式编写单文件组件。单文件组件文件有三个部分，即模板、脚本和样式。 vue-loader 模块允许 webpack 使用单独的加载器模块（例如 SASS 或 SCSS 加载器）提取和处理每个部分。该设置使我们可以使用 .vue 文件无缝编写程序。

vue-loader 模块还允许把静态资源视为模块依赖性，并允许使用 webpack 加载器进行处理。而且还允许在开发过程中进行热重装。

vue总序