一、对于MVVM的理解?
MVVM是model-view-viewModel的缩写;
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,不需要关注数据状态的同步问题,复杂的数据状态维护完全由ViewModel来统一管理;
二、 Vue的生命周期
1.beforeCreate(创建前) :在数据观测和初始化事件还未开始;
2.created(创建后):完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来;
3.beforeMount(挂载前):在挂载前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
4.mountd(载入后):el被新创建的vm.$el替换,并挂载到实例上去之后调用。实例已完成一下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面上。此过程中进行ajax交互。
5.beforeUpdate(更新前):在数据更新前调用,发生在虚拟DOM重新渲染和打补丁之前。 可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
6.updated(更新后):在由于数据更新导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器渲染期间不被调用。
7.beforeDestroy(销毁前):在实例销毁之前调用。实例完全可以用。
8.destroyed(销毁后):在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
1.什么是Vue生命周期?
答:Vue实例从创建到销毁的过程,就是生命周期。 从开始创建 -> 初始化数据 -> 编译模板 -> 挂载DOM-渲染 -> 更新-渲染 -> 销毁等一系列过程,称之为VUE的生命周期。
2.vue生命周期的作用是什么?
答:它的生命周期中有多个钩子,让我们在控制整个Vue实例的过程中更容易形成好的逻辑。
3.Vue生命周期总共分为几个阶段?
答:他可以总共分为8个阶段:创造前后、载入前后、更新前后、销毁前后。
4.第一次页面加载会触发哪几个钩子?
答: beforeCreate,created,beforeMount,Mounted
5.DOM渲染在哪个周期中就已经完成?
答:在Mounted中就已经完成了。
三、 Vue实现双向数据绑定的原理:Object.defineProperty()
vue实现数据双向绑定主要是: 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的getter,setter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通js对象传给Vue实例来作为它的data选项时,Vue将遍历它的属性,用Object.defineProperty将它们转化为getter/setter。用户看不到getter/setter,但是在内部它们让Vue追踪依赖,在属性被访问和修改时通知变化。
vue的数据双向绑定将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令({{}}),最终由Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新; 视图交互变化(input) -> 数据model变更双向绑定效果。
js实现简单的双向绑定:
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四、 Vue组件间的参数传递
1. 父组件与子组件传值
父组件给子组件传值:子组件通过props方法接收并规定数据;
子组件传给父组件:$emit方法传递参数;
2. 非父子组件之间的数据传递,兄弟组件传值
eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。(虽然也有不少人推荐直接使用VUEX,具体看需求)
五、 路由的实现: hash模式和history模式
1. hash模式:再浏览器中符号“#”,#以及#号后面的字符称之为hash,用window.location.hash读取;
特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。hash模式下,仅hash符号之前的内容会被包含在请求中,如http://www.xxx.com。因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误。
2.history模式:history采用H5新特性;且提供了两个新方法: pushState() , replaceState() 可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更
VUE路由的钩子函数
首页可以控制导航跳转,beforEach,afterEach等,一般用于页面的title修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to,from,next
to:route即将进入的目标路由对象,
from:route当前当行正要离开的路由
next:function 一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制页面的跳转。
Vuex是什么?怎么使用?那种功能场景使用它?
vuex:只用来读取的状态放在store中;改变状态的方式是提交mutaions,这是个同步的食物; 异步逻辑应该封装在action中。
使用:在main.js引入store,注入。
state:存放的数据状态,不可以直接修改里面的数据。
mutations:定义的方法动态修改vuex的store中的状态或数据。
getters:类似vue中的计算属性,主要用来过滤一些数据
action: 异步处理数据的方法。 view层通过store.dispath来分发action。
modules:项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation....,使得结构非常清晰,方便管理。
场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车
对keep-alive的了解?
keep-alive是vue内置的一个组件,可以是被包含的组件保留状态,或避免重新渲染。