vue面试题理论汇总

vue.js是什么？

Vue.js 是一套用于构建用户界面的渐进式框架

简述MVVM和MVC？

（1）MVC：是后台的框架模式
分为M：（model模型）、V（view试图）、C（controller控制器）
（2）MVVM是为了实现MVC中的V
MVVM分为：M（model数据）、V（view试图）、VM（viewModel控制数据的改变和控制试图）

渐进式框架的理解？

主张最少；----没有多做职责之外的事；可以根据不同的需求选择不同的层级；

简述虚拟DOM？

对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作

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

1. 数据驱动：ViewModel，保证数据和视图的一致性。
2. 组件系统： 应用类UI可以看作全部是由组件树构成的。

vue中 key 值的作用？

key 的作用主要是为了高效的更新虚拟 DOM。

vue生命周期钩子函数：

beforeCreate----创建前 组件实例更被创建，组件属性计算之前，数据对象data都为undefined，未初始化。
created----创建后 组件实例创建完成，属性已经绑定，数据对象data已存在，但dom未生成，$ el未存在
beforeMount----挂载前 vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，data.message未替换
mounted-----挂载后 vue实例挂载完成，data.message成功渲染。
beforeUpdate----更新前 当data变化时，会触发beforeUpdate方法
updated----更新后 当data变化时，会触发updated方法
beforeDestory----销毁前 组件销毁之前调用
destoryed----销毁后 组件销毁之后调用，对data的改变不会再触发周期函数，

v-if和v-show的区别及使用场景？

v-if：判断是否有dom
v-show：判断隐藏/显示dom

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

v-for 数据循环
v-on 绑定事件
v-model 实现双向数据绑定
v-text 渲染字符串
v-html 渲染html节点及字符串
v-if 判断
v-show 显示/隐藏
v-bind 绑定属性

常用事件的修饰符？

1. @事件.stop 阻止事件冒泡
2. @事件.prevent 阻止事件默认行为
3. @事件.capture 触发事件捕获
4. @事件.self 当事件在该元素本身 触发回调
5. @once 只执行一次

自定义指令的语义是什么？请举例说明一个带参数的自定义指令怎么定义？

Vue.directive('自定义指令名', {
  inserted: function (当前节点) {
        // 对节点的操作
   }
})

directives:{
  color:{
    bind:function(el,binding){
      if(binding.arg){
        el.style.color=binding.arg
      }else{
        el.style.color='red'
      }
    }
  }
}

自定义指令有哪些钩子函数，及自定义指令的使用场景？

bind：只调用一次，指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用
update：所在组件的虚拟节点更新时调用
componentUpdated：所在组件的虚拟节点及子虚拟节点全部更新后调用
unbind：只调用一次，指令与元素解绑时调用

组件特性及好处？

特性：重用性、可指定性、互操作性、高内聚性、低耦合度
好处：组件可以扩展HTML元素、封装可重用代码

Vue 组件 data 为什么必须是函数?

如果不用函数的话，实例化的组件是共享同样的一个data对象，当你修改一个属性的时候，data也会发生改变。当data是一个函数的时候，每个实例的data属性都是独立的，不会相互影响。

methods computed watch的区别？

computed： 计算属性 计算结果会缓存,只有当依赖值改变才会重新计算
watch： 监听属性 结果不会缓存，一个值的改变需要另一个值得改变而改变
methods ：事件方法 调用一次，执行一次,结果不会缓存

什么是过滤器？怎么定义全局和局部过滤器？

过滤器：是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数v据的基础上产生新的数据
全局：

vue.filter(‘过滤器名’,funciton(val){
     //逻辑代码
})

局部：

filter：{过滤器名:funciton(参数){
     //逻辑代码
  }
}

Vue中双向数据绑定是如何实现的？

使用v-model来实现
vue.js 则是采用：数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()的set，get，在数据变动时发布消息给订阅者，触发相应的监听回调

单页面应用和多页面应用区别以及优缺点？

单页面：只有一个html页面，跳转方式是组件之间的切换
优点：跳转流畅、组件化开发、组件可复用、开发便捷
缺点：首屏加载过慢
多页面：有多个页面，跳转方式是页面之间的跳转
优点：首屏加载块
缺点：跳转速度慢

自定义指令有哪些钩子函数，及自定义指令的使用场景？

bind：只调用一次，指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用
update：所在组件的虚拟节点更新时调用
componentUpdated：所在组件的虚拟节点及子虚拟节点全部更新后调用
unbind：只调用一次，指令与元素解绑时调用

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

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

父传递子如何传递？

在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值
在子组件通过props:{“自定义属性名”}来接收数据

子传递父如何传递？

1. 在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法
2. 在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法

兄弟组件如何通信？

1. 创建一个空的vue实例bus
2. 通过bus.$emit(‘事件名’)传到空的vue实例中
3. 通过bus.$on(‘事件名’,(参数)=>{挂载从子1传来的数据})来接收

Props验证类型都有哪些？

Number、boolean、string、object、array、function、date、symbol

vue-router有哪几种路由守卫?

• 全局守卫：beforeEach
• 后置守卫：afterEach
• 全局解析守卫：beforeResolve
• 路由独享守卫：beforeEnter

keep-alive是什么？

当 keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，它自身不会渲染一个DOM元素，也不会出现在父组件中，主要用于保留组件状态或避免重新渲染

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

解析.vue文件的一个加载器。
用途：js可以写es6、style样式可以scss或less、template可以加jade等

vue初始化页面闪动问题？

在根dom上加上 style=“display: none;” :style="{display: ‘block’}"
完美解决vue初始加载前的花屏现象

<div class="app" style="display: none;" :style="{display: 'block'}">{{message}}</div>

$router 和 $route的区别？

• $router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
• $route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含 path,params,hash,query,fullPath,matched,name等路由信息参数。

v-clock有什么作用？

能够解决插值表达式闪烁问题，需要在style中设置样式[v-clock]{display:none}

// 将该指令加在html标签中时，可以在该文件中加style属性为display：none
<div class="#app" v-cloak>
    <p>{{name}}</p>
</div>

[v-cloak] {
    display: none;
}

created和mounted区别

• created（创建后）：完成了data的初始化，没有el获取不到真实DOM
• mounted（挂载后）：模块中的HTML渲染到html页面只执行一次

params 和query 的区别？

• 用法 params要用name引入
  this.$route.params.name
  query要用path引入
  this.$route.query.name
• Url地址显示
  query类似于ajax的get传参，浏览器地址栏中显示参数
  params类似于post浏览器地址栏中不显示参数

Assets和static的区别？

共同点：两个都是存放静态资源文件的
区别：
assets：存放的静态资源文件在项目打包时，压缩后的静态资源文件最终也会放在static文件中跟着index.html一同上传
static：static中 放置的静态资源文件就不会走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器

有列表页进入到详情页的思路?

1. 在列表页中给某个元素一个点击事件，并传递一个值，在methods的方法中写跳转（this.$router.push({name:”user”,params:{zhi:值}})）
2. 在router.js中配置：path:”路径/:参数”
3. 在详情页使用mounted()获取传递过来的值（this.$route.params.值）

路由钩子函数共有几种？分别是什么？参数to、from、next分别是什么意思？

• beforeRouteEnter（路由之前调用）
• beforeRouteUpdate（复用时调用）
• beforeRouteLeave（离开路由时调用）
  ① to：（route路由对象）即将要进入的目标路由对象
  ② from （route路由对象）当前导航正要离开的路由
  ③ next：（funciton函数）一定要调用该方法来resolve这个钩子

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

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

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

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

vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

介绍Vuex的核心概念及其作用？

核心概念：state状态、getter计算属性、mutation改变状态、action异步操作、module模块

详述Vuex运行机制？

• Vuex的状态存储是响应式的
• 当vue组件从store中读取时，若store中状态发生改变，响应的组件也会更新状态
• 不能直接改变state，必须通过显示的提交(commit)mutations来追踪每个状态的变化

简述拦截器是什么，共有几个拦截点，分别是什么？

• 拦截器：动态拦截action调动的对象
• 拦截点：共有四个拦截点：

request（发送一个请求）
1、 success （成功）
2、 fall （失败）
response（服务器响应）
1、 success （成功）
2、 fall （失败）

简述webpack？

Webpack 的核心概念是一个 模块打包工具 ，它的主要目标是将js文件打包在一起，打包后的文件用于在浏览器中使用。
entry: 入口，定义整个编译过程的起点
output: 输出，定义整个编译过程的终点
module: 定义模块module的处理方式
plugins：插件，对编译完成后的内容进行二度加工
resolve.alias 定义模块的别名