面试题正文：

1.vue全家桶包含哪些？

答案：vue全家桶与react全家桶介绍

2.v-model是什么？怎么使用？vue中标签怎么绑定事件？

答案：v-model可以实现双向绑定，指令（v-bind:class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog()/>

3.v-model的实现原理？

答案：vue数据双向绑定实现原理解析

4.请说一下vue的生命周期。

答案：vue生命周期详细介绍

5.请说出至少4种vue当中的指令和它的用法。

答案：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定。（其他的请看vue官网）

6.请说出v-if和v-show的区别。

答案：v-if与v-show的区别与应用场景详细介绍

7.active-class是哪个组件的属性？

答案：vue-router模块的router-link组件。

8.vue嵌套路由怎么定义？

答案：vue定义嵌套路由详细步骤讲解(附代码)

9.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

答案：

在router目录下的index.js文件中，对path属性加上/:id。

使用router对象的params.id获取参数。

10.vue-router有哪几种导航钩子？

答案：三种：

第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

第二种：组件内的钩子。

第三种：单独路由独享组件。

11.iframe的优缺点？

答案：iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。

优点：

解决加载缓慢的第三方内容如图标和广告等的加载问题

Security sandbox

并行加载脚本

方便制作导航栏

缺点：

iframe会阻塞主页面的Onload事件

即使内容为空，加载也需要时间

没有语意

12.请讲讲你对axios或者其他请求方式的使用。

答案：axios在vue项目中的使用

13.axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？

答案：跨域，添加用户操作，更新操作。

14.vuex是什么？怎么使用？哪种功能场景使用它？

答案：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车。

15.mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

答案：一个model+view+viewModel框架，数据模型model，viewModel连接两个

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多的场景，更加便捷

16.自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

答案：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）

钩子函数参数：el、binding

17.vue-router是什么？它有哪些组件？

答案：vue用来写路由的一个插件。router-link、router-view

18.导航钩子有哪些？它们有哪些参数？

答案：

导航钩子包括：

a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

参数：

有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种。

19.请说下封装 vue 组件的过程？

答案：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件，可以采用emit方法。

20.你是怎么认识vuex的？

答案：vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。

通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。

应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

21.vue-loader是什么？使用它的用途有哪些？

答案：解析.vue文件的一个加载器，跟template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

22.请说出vue.cli项目中src目录每个文件夹和文件的用法？

答案：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

23.聊聊你对Vue.js的template编译的理解？

答案：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）

24.vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

答案：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default 将组件导出。

第二步：在需要用的页面（组件）中导入：import smithButton from ‘…/components/smithButton.vue’

第三步：注入到vue的子组件的components属性上面,components:{smithButton}

第四步：在template视图view中使用，

问题有：smithButton命名，使用的时候则smith-button。

25.dom是在哪一个生命周期完成渲染的？

答案：在 mounted 中就已经完成了

26.第一次页面加载会触发哪几个生命周期？

答案：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个生命周期。

27.vue生命周期的作用是什么？

答案：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

28.如何解决vue修改数据不刷新页面这个问题？

答案：

第一种：this.$set

第二种：给数组、对象赋新值

第三种：使用this.$forceupdate强制刷新

29.为什么会出现vue修改数据后页面没有刷新这个问题？

答案：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

vue3 带来的六大新特性

Performance：性能比vue2.x块1.2～2倍

Tree shaking support：支持按需编译，体积更小

Composition API：组合API，类似React Hooks

Custom Renderer API：暴露了自定义渲染API

Fragment，Teleport（Protal），Suspense：新增三个组件

Better TypeScript support：更好的支持TS

Performance

Vue3.0在性能方面比Vue2.x快了1.2～2倍。

重写虚拟DOM的实现

运行时编译

静态提升与事件侦听器缓存

SSR 速度提高

Three-shaking support

Vue3.x中的核心API都支持tree-shaking，这些API都是通过包引入的方式而不是直接在实例化时就注入，只会对使用到的功能或特性进行打包（按需打包），这意味着更多的功能和更小的体积。

Composition API

Vue2.x中，我们通常采用mixin来复用逻辑代码，使用起来虽然方便，但也存在一些问题：代码来源不清晰、方法属性可能出现冲突。因此，Vue3.x引入了Composition API（组合API），使用纯函数分割复用代码。和React Hooks的概念相似。

更好的逻辑复用和代码组织

更好的类型推导

Fragment、Teleport、Suspense

新增三个组件。

Fragment

在书写Vue2.x时，由于组件必须是一个根结点，很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的（这和React 中的Fragment组件是一样的）。

Teleport

Teleport其实就是React中的Portal。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框。

Suspense

同样的，这和React中的Supense是一样的。

Suspense 让你的组件在渲染之前进行“等待”，并在等待时显示 fallback 的内容。

Better TypeScript support

Vue3.x采用TypeScript重写，开发者使用Vue3.x时可以充分体验TS给编码带来的便利。

Custom Renderer API

这个API定义了虚拟DOM的渲染规则，这意味着使用自定义API可以达到跨平台的目的。

最后：Vue3.0 是如何变快的？

diff 算法优化

Vue2 中的虚拟dom 是进行全量对比

Vue3 新增静态标记

hoistStatic 静态提升

Vue2 中无论元素是否参与更新，每次都会重新创建，然后在渲染

Vue3 中对于不参与更新的元素，会做静态提升，只被创建一次，在渲染时直接复用即可

cacheHandlers 事件侦听器缓存

默认情况下默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化，但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可

ssr 渲染

当有大量静态的内容的时候，这些内容会被当作纯字符串推进一个buffer里面，即使存在动态的绑定，会通过模版插值嵌入进去，这样会比通过虚拟dom来渲染的快上很多很多

当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static node。这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。