前端vue面试题个人总结

1、介绍Vue中的常用的指令

  • v-bind 绑定属性机制,可以简写为:
    • 对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
    • 数组方法v-bind:class="[class1, class2]"
    • 行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"
  • v-on 绑定事件机制,可以简写为@
  • v-for
  • v-html 以html标签形式显示
  • v-text 可以简写为{{}}
  • v-if
  • v-show
  • v-model 双向数据绑定

2、vue中常用的事件修饰符

  • .prevent: 阻止默认事件;如:v-on:submit.prevent阻止默认事件;
  • .stop: 阻止单击事件冒泡;如:v-on:click.stop阻止事件冒泡;
  • .self: 当事件发生在该元素本身而不是子元素的时候会触发;
  • .capture: 事件侦听,事件发生的时候会调用
  • .once 事件只触发一次

3、谈谈你对MVVM开发模式的理解

  • MVVM分为Model、View、ViewModel三者。
  • Model 代表数据模型,数据和业务逻辑都在Model层中定义;
  • View 代表UI视图,负责数据的展示;
  • ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作;
  • Model 和 View 并无直接关联,而是通过 ViewModel 来进行联系的,Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新,View 中由于用户交互操作而改变的数据也会在 Model 中同步。
  • 这种模式实现了 Model 和 View 的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作 DOM。

4、 v-if 和 v-show 有什么区别?

  • v-show

    • v-show是css切换,频繁切换时用v-show,

    • v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;

    • 当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;

    • v-show对应的值无论是true还是false,对应HTML元素都会存在于浏览器的文档中;

  • v-if

    • v-if=‘false’ v-if是条件渲染,当false的时候不会渲染,

    • v-if是完整的销毁和重新创建,运行时较少改变时用v-if,而v-if会控制这个 DOM 节点的存在与否。

    • 当只需要一次显示或隐藏时,使用v-if更加合理。

    • v-if如果是false的话,对应HTML元素直接不在浏览器的文档中了。

5、请详细说你对vue生命周期的理解?

  • 总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
    • 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的改变不会再触发周期函数,vue实例已解除事件监听和dom绑定,但dom结构依然存在

7、vue中<keep-alive>的作用;active-class是哪个组件的属性?

  • 把切换出去的组件保留在缓存中,可以保留组件的状态或者避免重新渲染。
  • active-class是vue-router模块的router-link组件的属性。

8、计算属性及和 watch 、methods的区别

  • computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算,

    • computed可以依赖其他computed,甚至是其他组件的data;
    • 依赖于数据,数据更新,处理结果自动更新;
    • 计算属性内部this指向vm实例;
    • 在组件调用时,直接写计算属性名即可;
    • 有get和set两个选项,常用的是getter方法,获取数据,也可以使用setter方法改变数据;
  • watch 更像是一个 data 的数据监听回调,当依赖的 data 的数据变化,执行回调,在方法中会传入 newVal 和 oldVal。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情,使用watch。

  • 相较于methods,不管依赖的数据变不变,methods都会重新计算,但是依赖数据不变的时候computed从缓存中获取,不会重新计算,methods不会。methods是一个方法,它可以接受参数,而computed不能。

10、父子组件之间的传值通信?

  • 父组件向子组件传值:

  • 子组件在props中创建一个属性,用来接收父组件传过来的值;

  • 在父组件中注册子组件;

  • 在子组件标签中添加子组件props中创建的属性;

  • 把需要传给子组件的值赋给该属性

  • 子组件向父组件传值:

  • 子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;

  • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;

  • 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

12、非父子组件之间的通信

常用的方法有 EventBus 和 Vuex

  • EventBus 实现非父子组件通信的原理是:

    • 通过实例化一个Vue对象( 比如bus = new Vue() )作为母线,在组件中通过事件将参数传递出去( bus.$emit(event, [...args]) ),
    • 然后在其他组件中再通过bus来监听此事件并接受参数( bus.$on(event, callback) )。
  • Vuex 是什么:

    • Vuex是一个专为Vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态

    • Vuex是一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化。

    • Vuex的用法

原文地址:https://www.cnblogs.com/wangchangli/p/11266764.html