Vuejs——前端学习日记（三）

Vue中的MVVM

MVVM是Model-View-ViewModel，它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，将视图UI和业务逻辑分开。

在这里View对应的是DOM，Model对应的是JS、定义的或是从网络请求的数据，ViewModel对应的就是Vue实例，View和Model之间想要通信要靠ViewModel来实现。
ViewModel做了两件事情：
一是Data Bindings数据绑定，例如Vue实例的data里有很多数据，ViewModel通过Data Bindings将这些数据绑定在View中。而且在绑定时只需要写ViewModel固定的语法就可以，ViewModel可以帮助解析数据，解析之后会把数据更新到View上面。
二是DOM Listeners，会监听DOM上的响应。当View上有一些事件或用户操作时，ViewModel会提供一些指令将View上面发生的事件或用户操作绑定到Model上去。

View层

视图层，在前端开发中通常就是DOM层，主要作用是给用户展示各种信息。

Model层

数据层，数据可能是固定的数据，更多的是来自服务器，从网络上请求的数据。

ViewModel层

视图模型层，是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时反应到View中；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data。

Vue的options选项

我们在创建Vue实例的时候，会传入一个对象options。这个options可以包含很多选项，这些选项可以在Vue官网的API中查找：https://cn.vuejs.org/v2/api/
到目前为止接触的选项有这些：

1. el（string | HTMLElement）：决定之后Vue实例会管理哪个DOM；
2. data（Object | Function）：VUe实例对应的数据对象；
3. methods {[key：string]：Function}：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

Vue的生命周期

生命周期：事物从诞生到消亡的整个过程
对于Vue，每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
Vue生命周期如下图说示：

Vue生命周期函数

在创建一个Vue实例时，在options选项里除了可以声明el、data、methods等属性外，也可以声明一些生命周期函数，这些函数都是提供的回调，下面是常用的两个函数：

created

created() {

    console.log(this.$el);//undefined

    console.log(this.rendered);  // false

}

mounted

mounted() {

    console.log(this.$el);

}

一般情况下会在created里面做一些网络请求，当把Vue对象或组件创建好之后，就会在created里面请求一些数据，然后就会将请求的数据放在Vue的data属性里面，最后将这些数据展示在DOM上面。

今天先写到这，对Vue的生命周期以及提供的生命周期回调函数有了初步的认识，晚上再去对Vue的指令和属性相关方面进行学习，争取早日搞懂。