阅读 10

vue面试题总结

什么是MVVM?

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。

  • Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;
  • View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来;
  • ViewModel 是一个同步 View 和 Model 的对象。

MVVM和MVC的区别?

主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。
mvvm 主要解决了 mvc 中大量的 DOM操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者需要主动更新到 View 。

Vue实现数据双向绑定的原理?

采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。

VUE的优点?

低耦合、可重用性、独立开发、可测试

生命周期的作用?

便于在控制整个Vue实例的过程时更容易形成好的逻辑。

生命周期的渲染过程?

beforeCreate(创建前):在数据观测和初始化事件还未开始
created(创建后):完成数据观测,属性和方法的计算,初始化事件,$el属性还没显示出来
beforeMount():编译模板,把data里面的数据和模板生成html,但是html还没挂载到页面
mounted():编译好的html内容替换el属性指向的DOM对象,完成html渲染到页面。此过程中执行ajax交互
beforeUpdate():数据更新前调用,发生在虚拟DOM重新渲染和打补丁之前,可在该钩子函数中进一步的更改状态,不会触发附加的重复渲染过程
updated():在犹豫数据更改导致的虚拟DOM重新渲染和打补丁之后调用
beforeDestory():在实例销毁之前调用,此时实例仍然完全可用
destoryed():实例销毁后调用,所有事件监听器会被移除,所有的自实例也会被销毁。服务器端渲染期间不被调用

vue-router是什么?有哪些组件?有哪些导航钩子函数?

定义:写路由的一个组件
组件:router-link、router-view
钩子函数:全局导航钩子、组件内导航钩子、单独路由独享组件

参数传递方式?

  • 父组件传递给子组件:

子组件通过props接受数据

  • 子组件传递给父组件:

$emit方法传递参数

  • 兄弟组件传值:

eventBus,创建一个事件中心,相当于中转站, 用它来接收和传递事件。

父子兄弟组件调用对方组件的方法

  • 子组件调用父组件的方法:

1、子组件调用父组件可以使用this.$parent.方法名

2、子组件里面用$emit向父组件触发一个事件,父组件监听这个事件就行了。

3、父组件把方法传入子组件中,在子组件里像接受数据一样接收,直接调用这个方法

  • 父组件调用子组件的方法:

通过ref直接调用子组件的方法:eg:this.$refs.refName.子组件的方法名。

  • 兄弟组件相互调用他们的方法:

借助父组件,先调用父组件的方法,用父组件去调用另一个子组件的方法。

VUE和其他框架的区别

  • 和REACT的区别:
  • 相同点:

react采用特殊的jsx的语法,而vue也推崇写.vue的特殊文件格式。
对文件内容都有一定的约定,两者都需要编译后使用,
中心思想都是一切都是组件,组件实例之间可以嵌套,
都提供合理的钩子函数,让开发者定制化的处理需求,
都不内置AJAX,Route等功能到核心包,而是以插件的加载,
在组件开发中都支持mixins的特性

  • 不同点:

react采用的虚拟DOM会对渲染出来的结果做赃检查;
vue在模板中提供了指令、过滤器等,可以快捷方便的操作虚拟DOM

  • 和ANGULAR的区别:
  • 相同点:

都支持指令,包括内置指令和自定义指令;
都支持过滤器,包括内置过滤器和自定义过滤器;
都支持数据的双向绑定,都不支持低端浏览器;

  • 不同点:

angular的学习成本比较高,而vue的API比较简单直观;
angular对数据做赃检查,所以watch越多越慢;
vue使用基于依赖追踪的观察并且使用异步队列更新,所有数据都是独立触发的。

  • 和JQuery的区别:
  • jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。
  • Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。

怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params可以获取ID

vue.cli怎么使用自定义的组件?有遇到过哪些问题吗?

1、创建.vue文件
2、import引入,component里面定义
3、template使用。

封装vue组件的过程?

1、建立组件的模板;
2、准备好组件的数据输入;
3、准备好组件的数据输出;
4、调用。

route 和 router有什么区别?

$route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。

$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。

watch和computer有什么区别?

computer: 当页面中有某些数据依赖其他数据进行变动的时候使用;

watch: watch和computed很相似,watch用于观察和监听页面上的vue实例,当然在大部分情况下我们都会使用computed,但如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择

Vuex的几种属性?

state、getter、mutation、action、module

  • state:页面状态管理容器对象
  • getter:state的计算属性
  • mutation:状态改变操作方法
  • action:操作行为处理模块
  • module:store可以切分成模块,每个模块都拥有自己的state,getter,mutation,action

嵌套路由怎么定义?

VueRouter 的参数中使用 children 配置

active-class 是哪个组件的属性?

vue-router 模块的 router-link 组件。

关注下面的标签,发现更多相似文章
评论