什么是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、调用。
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 组件。