vue的生命周期面试（说一说vue的生命周期）

本篇文章给大家谈谈vue的生命周期面试，以及说一说vue的生命周期对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue前端面试题有哪些呢？
• 2、Vue 面试中常问知识点整理
• 3、有关vue的常见面试题（上）
• 4、vue面试题大全
• 5、vue常见面试题
• 6、史上最全前端vue面试题！推荐收藏

vue前端面试题有哪些呢？

文章中给你列举了部分的面试题，这些都是公司面试常遇到的，还有需要的还可以自己去查阅一下资料

1、active-class是哪个组件的属性？嵌套路由怎么定义？

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

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

答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id

3、vue-router有哪几种导航钩子？

答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件

4、scss是什么？安装使用的步骤是？有哪几大特性？

答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader

4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

答：css的预编译。

使用步骤：

第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）

第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss

第三步：还是在同一个文件，配置一个module属性

第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”

有哪几大特性:

1、可以用变量，例如（$变量名称=值）；

2、可以用混合器，例如（）

3、可以嵌套

5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？

答：基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。组件一：Toast(‘登录成功’)；组件二：mint-header；组件三：mint-swiper

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

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

7、axios是什么？怎么使用？描述使用它实现登录功能的流程？

答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

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

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

9、什么是RESTful API？怎么使用?

答：是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete

10、vuex是什么？怎么使用？哪种功能场景使用它？

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

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

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

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

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

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

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

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

钩子函数参数：el、binding

13、说出至少4种vue当中的指令和它的用法？

答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

14、vue-router是什么？它有哪些组件？

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

15、导航钩子有哪些？它们有哪些参数？

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

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

16、Vue的双向数据绑定原理是什么？

答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 - 视图更新；视图交互变化(input) - 数据model变更的双向绑定效果。

ps：16题答案同样适合”vue data是怎么实现的？”此面试题。

17、请详细说下你对vue生命周期的理解？

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

18、请说下封装 vue 组件的过程？

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

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

19、你是怎么认识vuex的？

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

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

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

20、vue-loader是什么？使用它的用途有哪些？

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

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

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

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

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

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

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

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

第四步：在template视图view中使用，smith-button /smith-button

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

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

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

详情步骤：

首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

Vue 面试中常问知识点整理

生命周期：Vue实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期，各个阶段有相对应的事件钩子。

beforeCreate（创建前），在数据观测和初始化事件还未开始

created（创建后），完成数据观测，属性和方法的运算，初始化事件， $el 属性还没有显示出来

beforeMount（载入前），在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后），在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换 el 属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate（更新前），在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后），在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy（销毁前），在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后），在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

注意：

created 阶段的ajax请求与 mounted 请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态。

mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 。

初始化组件时，仅执行了 beforeCreate/Created/beforeMount/mounted 四个钩子函数

当改变 data 中定义的变量（响应式变量）时，会执行 beforeUpdate/updated 钩子函数

当切换组件（当前组件未缓存）时，会执行 beforeDestory/destroyed 钩子函数

初始化和销毁时的生命钩子函数均只会执行一次， beforeUpdate/updated 可多次执行

仅当子组件完成挂载后，父组件才会挂载

当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次）

父子组件在data变化中是分别监控的，但是在更新props中的数据是关联的

销毁父组件时，先将子组件销毁后才会销毁父组件

组件的初始化（mounted之前）分开进行，挂载是从上到下依次进行

当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

mixin中的生命周期与引入该组件的生命周期是仅仅关联的，且mixin的生命周期优先执行

1、什么是vue生命周期？

答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

2、vue生命周期的作用是什么？

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

3、vue生命周期总共有几个阶段？

答：它可以总共分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/销毁后。

5、DOM 渲染在哪个周期中就已经完成？

答：DOM 渲染在 mounted 中就已经完成了。

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter ，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter 。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合 Observer ，Compile和 Watcher 三者，通过 Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令（vue中是用来解析 {{}}），最终利用 watcher 搭起observer和 Compile 之间的通信桥梁，达到数据变化 —视图更新；视图交互变化（ input ）—数据 model 变更双向绑定效果。

js实现简单的双向绑定：

1、父组件与子组件传值

父组件传给子组件：子组件通过 props 方法接受数据；

子组件传给父组件： $emit 方法传递参数

2、非父子组件间的数据传递，兄弟组件传值 eventBus ，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

需求一：

在一个列表页中，第一次进入的时候，请求获取数据。

点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。

也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。

解决方案

在 App.vue设置：

假设列表页为 list.vue ，详情页为 detail.vue ，这两个都是子组件。

我们在 keep-alive 添加列表页的名字，缓存列表页。

然后在列表页的 created 函数里添加ajax请求，这样只有第一次进入到列表页的时候才会请求数据，当从列表页跳到详情页，再从详情页回来的时候，列表页就不会刷新。

这样就可以解决问题了。

需求二：

在需求一的基础上，再加一个要求：可以在详情页中删除对应的列表项，这时返回到列表页时需要刷新重新获取数据。

我们可以在路由配置文件上对 detail.vue 增加一个 meta 属性。

这个 meta 属性，可以在详情页中通过 this.$route.meta.isRefresh 来读取和设置。

设置完这个属性，还要在 App.vue 文件里设置 watch 一下 $route 属性。

这样就不需要在列表页的 created 函数里用 ajax 来请求数据了，统一放在 App.vue 里来处理。

触发请求数据有两个条件：

从其他页面（除了详情页）进来列表时，需要请求数据。

从详情页返回到列表页时，如果详情页 meta 属性中的 isRefresh 为 true ，也需求重新请求数据。

当我们在详情页中删除了对应的列表项时，就可以将详情页 meta 属性中的 isRefresh 设为 true 。这时再返回到列表页，页面会重新刷新。

1、css只在当前组件起作用

答：在 style 标签中写入 scoped 即可 例如： style scoped/style

2、v-if 和 v-show 区别

答： v-if 按照条件是否渲染， v-show 是 display 的 block 或 none ；

3、 $route 和 $router 的区别

答： $route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。而 $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。

有关vue的常见面试题（上）

防抖 ：一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

例：防抖经常用在我们搜索框输入搜索，点击提交，防止等；

节流 ：一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。

例：节流一般在onresize、mousemove、滚动事件等事件中使用，防止过多的请求造成服务器压力

盒模型的组成：元素的内容content、元素的内边距padding、元素的外边距margin、元素的边框border

盒模型分为 ： W3C标准盒子 、IE盒子

W3C标准盒子（content-box） ：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型，盒子总宽度 = margin + border + padding + width

IE盒子（border-box） ：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型，盒子总宽 = margin + width

1.toString()与join()一样都是把数组转成以逗号分割的字符串

2.pop() 删除数组的最后一项

3.push() 往数组最后添加新数据

4.shift() 删除数组最前面的一项

var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

const定义的变量不可以修改，而且必须初始化

let是块级作用域，函数内部使用let定义后，对函数外部无影响。

1.都支持服务器端渲染

2.都有虚拟dom,组件化开发,都有‘props’的概念,允许父组件往子组件传送数据,都实现webComponent规范

3.数据驱动视图

4.都有支持native的方案,React的React native,Vue的weex

5.构建工具

React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。都有管理状态，React有redux,Vue有自己的Vuex

设计思想

react

1.函数式思想，all in js ,jsx语法，js操控css

2.单项数据流

3.setState重新渲染

4.每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，如果为true继续渲染、false不渲染，但Vue将此视为默认的优化。

vue

1.响应式思想，也就是基于数据可变的。把html、js、css、组合到一起，也可以通过标签引擎组合到一个页面中

2.双向绑定，每一个属性都需要建立watch监听（页面不用，涉及到组件更新的话需要）

3.Vue宣称可以更快地计算出虚拟 DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树

性能

react ----大型项目、优化需要手动去做，状态可控

vue ------中小型项目、状态改变需要watch监听，数据量太大的话会卡顿

扩展性

react

1 类式写法api少，更容易结合ts

2 可以通过高阶组件来扩展

vue

1 声明式写法，结合ts比较复杂

2 需要通过mixin方式来扩展

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach

导航钩子3个参数(to,from,next):

到达这个组件时：

离开这个组件时：beforeRouteLeave:(to,from,next)={}

确认离开next();取消离开next(false)；

beforeEnter:(to,from,next)={}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

方法一：

子组件绑定一个事件，通过 this.$emit() 来触发

在子组件中绑定一个事件，并给这个事件定义一个函数

在父组件中定义并绑定 handleChange 事件

方法二：

通过 callback 函数

先在父组件中定义一个callback函数，并把 callback 函数传过去

在子组件中接收，并执行 callback 函数

方法三：

通过 $parent /$children 或 $refs 访问组件实例

这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

这种方式的组件通信不能跨级

方法四：

$attrs和$listeners

vue面试题大全

1. vue生命周期都有哪些？

2. 进入页面会执行哪些生命周期函数

beforeCreate、created、beforeMounted、mounted

3. 在哪里可以访问 data

beforeCreate中不可以访问

created中有 el

beforeMounte中有 el

mouted中都有，包括之后的生命周期钩子函数都有

4、 如果加入了keep-alive会增加两个生命周期函数

activated和deactivated

进入页面的时候触发activated，离开页面触发 deactivated

5. 如果加入keep-alive组件，第一次进入页面会触发哪些生命周期

beforeCreate、created、beforeMounted、mounted、activated

6、 如果加入了keep-alive组件后，第二次或第n次进入页面会触发哪些生命周期？

只触发一个生命周期：activated(因为该页面已经被缓存起来了)

1.是什么

vue自带的一个组件，用来缓存组件，提升性能，keep-alive可以在组件切换时，保存其包裹组件的状态，使其不被销毁。

2、参数

include：表示只有匹配的组件才会被缓存；

exclude：表示匹配到的组件不会被缓存；

3、生命周期

有两个生命周期函数，同上

4.使用场景

-列表页面跳转详情页的时候，用户通过点击跳转，那么详情页每次都要去请求数据，如果用户每次点击的都是同一个，那么详情页就没必要去重新请求，直接缓存起来就行了，如果点击的不是同一个再重新发起请求；

-在router-view上使用可以缓存路由组件；

1.相同点

都可以控制元素的显示隐藏

2.区别

v-if通过创建/销毁dom元素来控制元素的显示隐藏，v-show通过css属性的display:none来控制元素的显示隐藏

3.场景

频繁切换使用v-show，会节省性能，反之使用v-if

1、当项目使用keep-alive时，可搭配组件name进行缓存过滤

当我们使用keep-alive缓存组件时，被缓存组件中的mounted函数只会执行一次，第二次进入页面不会重新触发，有两种解决方法，一种是使用activated()，在里面进行mounted中的操作；另一种就是在keep-alive中增加一个过滤，如下所示：

exclude属性就是要忽略匹配到的组件。

2、DOM做递归组件时；

当组件需要自己调用自己的时候

3、使用vue-tools时；

vue-devtools调试工具里显示的组件名称是由vue中组件name决定的

v-for的优先级比v-if的优先级高，这是在源码中规定好的，并且v-for和v-if不可以同时使用，同时使用会很浪费性能，比如明知判断条件是false的情况下，还需要去遍历一下数据，所以通常我们会把v-if放在v-for的外面。

是用来获取更新后的dom内容，并且该方法是异步的

作用是将回调函数延迟到下次dom更新循环之后执行因为vue更新数据是异步的，修改data中的数据，视图不会立刻更新，vue会将你对data的修改放到一个watch队列中，当同一事件循环中的所有数据更新完以后，再进行试图更新，所以会产生延迟。

最常见的使用场景就是，在created中获取dom元素的时候需要使用$nextTick获取

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data ，相当于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data ，就会造成一个变了全都会变的结果。

当父组件给子组件传递数据的时候，子组件只允许对数据进行读取，不允许修改数据，因为当子组件修改了父组件传过来的数据时，其他引用父组件数据的组件也会被修改，从而导致报错，然而也不知道是当前组件报错还是父组件报错还是修改父组件信息的子组件的错误；

如果要修改可以通过this.$emit方法派发自定义事件，在父组件中修改；

hash模式和history模式，默认是hash模式

区别如下：

1、表现形式不同，hash使用#表示，history用/表示；

2、hash值不会发送到服务端，history会发送到服务端 ，如果没有匹配到对应的路由，需要配置对应的页面；

3、获取方式不同，hash值可以通过location.path获取，history通过location.pathname获取；

4、hash可以通过window.onhashchange监听hash值的改变 ，history

可以通过onpopstate监听变化；

组建中的template标签会编译为render函数，通过render函数创建出dom元素，然后转化为虚拟dom最终转化为真实dom

1、虚拟dom是一个js对象，用对象属性来描述节点，是一层对真实dom的抽象

2、因为dom的执行速度远不如js执行速度快，因此将真实的dom抽象成js对象，然后通过算法计算出真正需要更新的节点，从而减少了大量的dom操作。

3、将直接操作dom转换成了两个js对象中去比较，找出差异项，做局部更新，提高了执行效率。

未完待续...

vue常见面试题

1.什么是vue的生命周期？

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列过程，我们称这是Vue的生命周期。

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

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

3.Vue生命周期总共有几个阶段？

它可以总共分为8个阶段：创建前/后,载入前/后，更新前/后，销毁前/销毁后

4.第一次页面加载会触发那几个钩子？

第一次页面加载时会触发beforeCreate,created,beforeMount,mounted

5.DOM渲染在哪个周期中就已经完成？

DOM渲染在mounted中就已经完成了

6.生命周期钩子的一些使用方法：

1.beforecreate:可以在加个loading事件，在加载实例是触发

2.created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

3.mounted:挂载元素，获取到dom节点

4.updated:如果对数据统一处理，在这里写上相应函数

5.beforeDestroy:可以一个确认停止事件的确认框

6.nextTick:更新数据后立即操作dom

7.v-show与v-if的区别

v-show是css切换，v-if是完整的销毁和重新创建

使用频繁切换时用v-show,运行时较少改变时用v-if

V-if=’false’v-if是条件渲染，当false的时候不会渲染

使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成

v-show则是不管值是为true还是false，html元素都会存在，只是css中的display显示或隐藏

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

8.开发中常用的指令有哪些?

v-model:一般用在表达输入，很轻松的实现表单控件和数据的双向绑定

v-html：更新元素的innerHTML

v-show与v-if：条件渲染，注意二者区别

v-on:click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数

v-for：基于源数据多次渲染元素或模板

v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM语法

v-bind:title=”msg”简写：title="msg"

9.绑定class的数组用法

1.对象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}”

2.数组方法v-bind:class="[class1,class2]"

3.行内v-bind:style="{color:color,fontSize:fontSize+'px'}”

10.路由跳转方式

1.router-link标签会渲染为标签，咋填template中的跳转都是这种；

2.另一种是编辑是导航，也就是通过js跳转比如router.push('/home')

12. computed和watch有什么区别

computed

computed是计算属性，也就是计算值，它更多用于计算值的场景

computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算

computed适用于计算比较消耗性能的计算场景

watch

watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作

无缓存性，页面重新渲染时值不变化也会执行

小结

当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed

如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

13. vue组件的scoped属性的作用

在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的；

但是也得慎用：样式不易（可）修改，而很多时候，我们是需要对公共组件的样式做微调的；

解决办法：

①：使用混合型的css样式：（混合使用全局跟本地的样式） /* 全局样式 */ /* 本地样式 */

②：深度作用选择器（）如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 操作符： .a .b { /* ... */ }

14. vue是渐进式的框架的理解：( 主张最少,没有多做职责之外的事 )

Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念

在我看来，渐进式代表的含义是：主张最少。视图模板引擎

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

渐进式的含义，我的理解是：没有多做职责之外的事。

15.vue.js的两个核心是什么(数据驱动、组件系统。)

数据驱动:Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制,核心是VM，即ViewModel，保证数据和视图的一致性。

16.vue常用修饰符

修饰符分为：一般修饰符，事件修身符，按键、系统

①一般修饰符：

.lazy：v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步

inputv-model.lazy="msg"

.number

inputv-model.number="age"type="number"

.trim

1.如果要自动过滤用户输入的首尾空白字符inputv-model.trim='trim'

② 事件修饰符

av-on:click.stop="doThis"/a!-- 阻止单击事件继续传播 --

formv-on:submit.prevent="onSubmit"/form !-- 提交事件不再重载页面 --

av-on:click.stop.prevent="doThat"/a !-- 修饰符可以串联 --

formv-on:submit.prevent/form !-- 只有修饰符 --

divv-on:click.capture="doThis".../div !-- 添加事件监听器时使用事件捕获模式 --  !-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --

divv-on:click.self="doThat".../div !-- 只当在 event.target 是当前元素自身时触发处理函数 -- !-- 即事件不是从内部元素触发的 --

av-on:click.once="doThis"/a !-- 点击事件将只会触发一次 --

③按键修饰符

全部的按键别名:

.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right.ctrl.alt.shift.meta

inputv-on:keyup.enter="submit"或者input@keyup.enter="submit"

④系统修饰键 （可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。）

.ctrl.alt.shift.meta

input@keyup.alt.67="clear"或者div@click.ctrl="doSomething"Dosomething/div!-- Ctrl + Click --

20.Vue 组件中 data 为什么必须是函数

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。

如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

史上最全前端vue面试题！推荐收藏

1.为什么会形成跨域？

不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。

解决方法：安装插件

Pip install django-cors-headers

2.vuex的工作流程？

① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。

② 然后再通过actions的commit来出发mutations来修改数据。

③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。

④ 最后由store触发每一个调用它的组件更新。

3.vuex是什么？怎么使用？

vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,modules详细使用写法请见：

4.vuex中的数据在页面刷新后数据消失怎么解决？

使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件

5.在vue中，如何阻止事件冒泡和默认行为？

在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为

6.深拷贝与浅拷贝？

假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。

7.vue的生命周期？

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）组件是否激活调用

8. keep-alive: 组件缓存

router.js中:

meta: {keepAlive:true} // 需要被缓存

钩子执行顺序：created - mounted - actived

include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。

应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。

9.vue传值方式？

props $emit() $on() $parent $children $listener $attr

10. $on 兄弟组件传值

$emit 分发

$on 监听

$off 取消监听

$once 一次性监听一个事件

在js文件中定义一个中央事件总线Bus，并暴露出来

具体的实现方式：

使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。

应用场景：“退出登录” - ①点击退出登录；②修改密码后自动退出登录

11.组件跨级传值

$attrs a-b-c

$listeners 监听

12.vue事件修饰符有哪些？

.stop .prevent .self .once .passive .sync

13.箭头函数中的this？

不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。

15.为什么vue组件中data必须是一个函数？

如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。

16.v-if 和 v-show区别？

v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；

v-if 是惰性的；v-show 做的仅是简单的css切换。

17.v-text 与 v-html区别？

v-text 用于普通文本，不能解析html；

v-html 反之。

18.v-for key的作用？

使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。

key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。

19.Scss是什么？在vue-cli中安装步骤？有哪几大特性？

npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载;

特性：可以用变量，可以用混合器，可以嵌套等。

20.vue获取dom？

ref

21.vue初始化页面闪动问题？

webpack、vue-router

v-cloak css:[v-cloak]:display:none

22.什么是vue-router？

vue router 是官方路由管理器。

主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。

23.vue路由传参，接收？

传： this.$router.push({path:'', query(params):{}})

接：this.$router.query.xxx

24.防抖和节流？

节流是一定时间内执行一次函数，多用在scroll事件上；

防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。

25.如何让scss只在当前组件中起作用？

vue的生命周期面试的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于说一说vue的生命周期、vue的生命周期面试的信息别忘了在本站进行查找喔。