VUE面试题集合（一）

1.vue与mvvm

MVVM就是Model-View-ViewModel（MVVM，模型视图视图模型）通过将分为以下三个部分来设计和实现具有自己的（GUI）的方法。它是（MVC）的派生模式

Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。

View 代表UI 组件，它负责将数据模型转化成UI 展现出来。

ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

2.vue中data的属性可以和methods中的方法同名吗

不可以,因为，Vue会把methods和data的东西，全部代理到Vue生成的对象中，会产生覆盖所以最好不要同名

3.vue组件间的参数传递

• 父传子：子组件通过props方法接受数据;
• 子传父：$emit方法传递参数
• 平行组件：eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件

5.vue路由的守卫与钩子函数

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的

即导航守卫分为：全局的、单个路由独享的、组件内的三种

全局守卫：

有三个方法

• router.beforeEach，在路由发生跳转时最先触发的一定时全局的前置守卫
• router.beforeResolve, 这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为：区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用
• router.afterEach，在路由跳转进入后执行，执行时机在beforeEnter之后且在Vue的beforeCreate之前

router.beforeEach((to,from,next)=>{
    console.log('前置守卫');
    next();
})

router.afterEach((to,from)=>{
    console.log('后置守卫');
})

路由独享守卫（单个路由对象独享）：

有一个方法：

• beforeEnter：执行时机在全局前置守卫之后，就是经过路由进入组件时

const routes = [{
    path:'/test',
    component:...,
    beforeEnter:(to,from,next) => {
       console.log('路由独享守卫');
	   next();
    }
}]

组件内守卫：

有三个方法：

• beforeRouteEnter：路由进入之前调用，该钩子在全局守卫beforeEach和独享守卫beforeEnter之后。要注意的是该守卫内访问不到组件的实例，也就是this为undefined，也就是他在beforeCreate生命周期前触发
• beforeRouteUpdate：当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。what is 路由改变 or what is 组件被复用？对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，组件实例会被复用，该守卫会被调用。当前路由query变更时，该守卫会被调用
• beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to，from，next。

<script>
export default{
  data(){
    //...
  },
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}
</script>

路由顺序图

顺序图2：

6.说说什么是vuex

VueX是适用于在Vue项目开发时使用的状态管理工具。通俗的讲，就是将公用部分的数据或者方法单独抽取出来管理。vuex给我们提供了这么一个非常好用的状态管理库。

主要就是用来处理共享数据与方法的

成员属性：

在vuex对象中有如下成员：

成员	说明
state	存放状态，就是存放共享的数据
mutations	包含若干的方法，是改变state的执行者，只能是同步方法
actions	类似于mutations，区别在于它可以包含异步操作
getters	相当于组件中的compute计算属性，用于其他组件获取最后的结果值
modules	模块化的状态管理，可以针对不同的模块分别作状态管理

7.对keep-alive的了解

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

通过路由，我们会在各个组件之间来回切换，在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，注意：在非单页应用的时候，keep-alive 并不能有效的缓存

8.v-if 和 v-show 区别

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

9.$route和$router的区别

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

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

• 数据驱动：ViewModel，保证数据和视图的一致性

• 组件系统：应用类UI可以看作全部是由组件树构成的

11.vue常用的修饰符

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

①一般修饰符：

修饰符	示例	说明
.lazy	<input v-model.lazy=“msg” >	v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。 你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步
.number	<input v-model.number=“age” type=“number”>	转换为数字
.trim	<input v-model.trim=‘trim’>	如果要自动过滤用户输入的首尾空白字符

② 事件修饰符

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

<form v-on:submit.prevent="onSubmit"></form> <!-- 阻止表单默认Submit-->

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

<form v-on:submit.prevent></form>   <!-- 只有修饰符 -->

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

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

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

③按键修饰符

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

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

.ctrl
.alt
.shift
.meta

12.vue生命周期

• beforeCreate

  创建vue实例对象前状态，啥都没有，空壳对象

• created

  创建vue实例完成，已经加载了data数据

• beforeMount

  data数据有了，el挂载了dom，但是还没有完全替换dom中的占位符数据

• mounted

  挂载完成，这时候已经将data数据渲染到DOM中

• beforeUpdate

  页面数据更新之前，监听数据的改变，并且可以获取到最新的数据，但是不会更新页面的数据

• updated

  数据更新完毕 在这个生命周期钩子函数中 我们可以获取到当前最新的数据（也就是页面中的最新数据）当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新

• beforeDestroy

  销毁之前 还是可以使用HTML的，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器

• destroyed

  销毁之后 组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。在此操作数据和DOM不会生效，已经不受VUE控制了都

13.v-if和v-for的优先级

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去

14.v-model的替换

使用v-bind和v-on即可

<input type="text" v-bind:value="value2" v-on:input="value2 = $event.target.value">

15.如何给vue自定义组件添加点击事件

需要在@click后面加上.native,官方对于native的解释为：

.native -——监听组件根元素的原生事件

正确写法：

<my-button  @click.native="alert1()" names="删除" v-bind:item2="btdata"></my-button>

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

一个元素绑定多个事件的两种写法，一个事件绑定多个函数的两种写法，修饰符的使用

<a style="cursor:default" v-on='{click:DoSomething,mouseleave:MouseLeave}'>doSomething</a>

在method方法里面分别写两个时事件；

<button @click="a(),b()">点我ab</button>

17.第一次页面加载会触发哪几个钩子

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子。DOM 渲染在 mounted 中就已经完成了。

18.为什么使用key

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

19.vue中的 ref 是什么？

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

20.Vue中如何监控某个属性值的变化？

使用watch属性即可

watch: {
    obj: {
        handler (newValue, oldValue) {
            console.log('obj changed')
        },
            deep: true
    }
}

deep属性表示深层遍历，但是这么写会监控obj的所有属性变化.比如现在需要监控data中， obj.a 的变化

watch: {
    'obj.a': {

        handler (newName, oldName) {

            console.log('obj.a changed')

        }

    }
}