vue必考面试题及答案(一)


1.对mvvm的理解

  • MVVM 就是 Model-View-ViewModel 的缩写,model代表数据模型,view代表UI组件,ViewModel是一个同步View和Model的对象。
  • 使用了双向数据绑定,页面输入会导致模型数据改变,模型数据的改变会影响页面数据展示与渲染。

2.vue生命周期阶段

  • beforeCreate创建之前 created创建完成
  • beforeMount渲染之前 mounted渲染完成
  • beforeUpdate数据更新前 update更新完毕
  • beforeDestory 实例销毁之前 Destory实例销毁后

3.vuex5个核心概念

  • state:存储数据
  • mutations:更新数据方法
  • actions:调用mutations方法,更新state数据
  • getters:对state中的数据进行预处理
  • modules:模块化vuex

4.vue组件封装优点

  • 组件是vue.js最强的功能之一,组件可以扩展HTML元素
  • 封装可重用代码,组件是可复用的vue实例组件可以提升整个项目的开发效率。
  • 能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性低等问题。

5.vue组件间通信的方式
(1)props/$emit(推荐使用)

  • 父传子:父组件通过v-bind绑定一个属性,子组件中通过props接受父组件中的绑定的属性
  • 子传父:子组件通过广播的方式$emit将值传递给父组件,父组件中通过一个函数去接受子组件中传递过来的值

(2)$ children/$ parent

指定已创建的实例之父实例,在两者之间建立父子关系,子实例可以用this.$ parent访问父实例,子实例被推入父实例的$ children数组中
$ children 的值是数组,而$ parent是个对象

(3)provide/ inject

父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。
(4)ref / refs
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,可以通过实例直接调用组件的方法或访问数据

(5)eventBus

eventBus 又称为事件总线
在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以通知其他组件。
eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难

(6)Vuex

Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题,将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上

(7)localStorage / sessionStorage

通信比较简单,缺点是数据和状态比较混乱,不太容易维护。
localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题。

(8)$attrs与 $listeners

实现多层嵌套传递

6.v-show和v-if区别

  • v-show指令是通过修改元素的displayCSS属性让其显示或隐藏
  • v-if指令直接销毁和重建DOM达到让元素显示和隐藏的效果
  • 应用场景:如果需要非常频繁的切换,建议使用v-show较好,如果在运行时条件很少改变,则使用v-if较好

7.vue的router-link和a的区别

  • a标签:点击a标签从当前页面跳转到另一个页面,页面会重新加载,相当于打开了一个网页
  • router-link:不会跳转到新的页面,不会重新渲染,不像a标签一样需要重新渲染,减少了DOM性能的损耗

8.computed和watch的区别

  • computed计算结果并返回,只有当计算的值发生改变时才会触发
  • Watch 监听某一个值,当监听的值发生变化时,执行对应的操作
  • 与computed的区别是,watch更加适用于监听某一个值的变化并做对应的操作,比如请求后台接口等,而computed适用于计算已有的值并返回结果

9.keep-alive作用
包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染
10.vue双向绑定原理
vue数据双向绑定是通过数据劫持结合发布者-订阅模式的方法来实现,利用了object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)
11.vuex是什么

vuex是专门在vue中实现集中式 状态管理的一个vue插件,对vue应用中 多个组件的共享状态 进行集中式的管理也是 组件通信的方式
运用场景

  • 多个组件依赖于同一状态时。
  • 来自不同组件的行为需要变更同一状态。

以上面试题仅供个人学习,如有错误请指正。
喜欢的小伙伴点个赞呗,评论区留下宝贵的意见-谢谢呐♥~

Logo

前往低代码交流专区

更多推荐