vue 面试准备

问：什么是vue生命周期？

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

问：vue生命周期总共有几个阶段？

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

问：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（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

问：第一次页面加载会触发哪几个钩子？

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子。

问：vue中computed、methods、watch的区别？

• watch 是用于观察Vue实例上的数据变动。
• computed 是在HTML DOM加载后马上执行的，如赋值；
• methods 则必须要有一定的触发条件才能执行，如点击事件；
• 所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

问：父子组件之间是怎么传值的？

答：通过props来传递数据，$emit来触发事件。

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

v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)

问：v-show和v-if指令的共同点和不同点?

• v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏
• v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

问：如何让CSS只在当前组件中起作用?

将当前组件的<style>修改为<style scoped>

问：axios和ajax的区别？

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax ajax不止axios。

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

axios 是请求后台资源的模块。 npm i axios -S

如果发送的是跨域请求，需在配置文件中 config/index.js 的proxy进行配置

问：vue中有哪些路由跳转页面，都有什么区别？

query和params区别？

query类似get,跳转之后页面url后面会拼接参数,类似?id=1,非重要性的可以这样传,密码之类还是用params刷新页面id还在。

params类似post,跳转之后页面url后面不会拼接参数,但是刷新页面id会消失。

区别？

this.$router.push 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数

问：懒加载（按需加载路由）？

webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方式引入，改为 const 定义的方式进行引入。

不进行页面按需加载引入方式：

import home from '../../common/home.vue'

进行页面按需加载的引入方式：

const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

问：vuex 是什么？怎么使用？哪种功能场景使用它？

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

问：vuex有哪几种状态和属性？

属性名	描述
state	仓库，里面存放数据
getter	搬运工小组，有无数个搬运工，只负责从厂房往外搬东西
mutation	操作工小组，有无数个操作工，负责更新货物，只能同步进行
action	操作工小组，有无数个操作工，负责更新货物，可以异步进行
module	工厂里的厂区，vuex里面可以有无数个厂区

 问：vuex的流程？

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值。

问：vuex的State特性是？

 stae就是存放数据的地方，类似一个仓库，特性就是当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值（ 若是store中的数据发生改变，依赖这个数据的组件也会发生更新 ）。

问：vuex的Getter特性是？

getter用来获取数据，mapgetter经常在计算属性中被使用。

问：vuex的Mutation特性是？

1、Action 类似于 mutation，不同在于：。

2、Action 提交的是 mutation，而不是直接变更状态。

3、Action 可以包含任意异步操作。

问：vuex的优势？

状态管理工具 核心是响应式的做到数据管理；一个页面发生数据变化，动态的改变对应的页面；

相比使用localStorage ,localstorge只能纯属字符串数据格式，因此还得封装自己的写入写出，localstorage的优势是永久存储

问：npm基础用法？

// 安装
// xxx 是要安装的依赖包
npm install xxx

// install 可简写为  i 
npm i xxx

// 安装依赖包 指定版本号
// n.n.n 是依赖包的指定版本号
npm i xxx@n.n.n
npm install xxx@n.n.n

// 启动
// serve 或 dev 依赖于 package.json的配置
npm run serve
npm run dev

// 更新
// xxx 是要更新的依赖包
npm update xxx

// 卸载
// xxx 是要卸载的依赖包
npm uninstall xxx

 

vuex问题部分转载于：https://www.jianshu.com/p/ef24322ef54b ；作者：崽崽不哭； 来源：简书；