VUE入门指北——(2)MVVM、数据、方法、生命周期

VUE入门指北——(2)MVVM、数据、方法、生命周期

在实际去写vue项目之前，了解其核心概念中的一些常用定义和功能十分重要。
而官网中的内容很多，全看完了再实践不现实。
这里列举一些最常用的部分，有了一定概念之后，就可以开始实际尝试去写一些vue项目了。
有了一定的实践经验之后，可以再回头去看API文档中的细节。

MVVM

虽然vue并不是严格遵循MVVM模型，但是设计上受其启发。

其定义可参考维基百科MVVM或是百度百科MVVM

MVVM本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

由于vue部分的遵循mvvm，所以其开发时的特点，大部分利用了这种模式的特性，也就有了响应式系统等特点。在其数据操作中特别明显。

M指的是数据层，V指的是视图层，而VM就是就是连接V和M的桥梁，在Vue中就是指的Vue对象，也可以叫vm对象。其作用主要是通过Dom Listeners去监听页面上DOM元素的变化，更改Model中的数据。同时通过Data Bindings使得更新Model数据的同时，更新View页面上DOM元素。（借用一张别人的图）

回看此前的hello vue

前文入门指北中hello vue很好的体现了mvvm的特点。
其中的

	<div id="app">
	  {{ message }}
	</div>

就是视图层，而对应的data对象是最为简单的数据层。

data: {
	message: 'Hello Vue!'
}

而new出来的app就是vm对象

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

vm对象的创建过程中，选项el指明了其绑定的DOM为<div id="app">这个视图。而data中的message通过双括号{{}}绑定到了视图上，一旦通过js代码修改message的值，则视图里的message就会发生变化。

之后的例子中，处处都将透露出其MVVM思想。

选项与实例

创建vm对象时，也就是new Vue时传入的每一项，都是选项。
传入的选项大致分为几类：数据 DOM 生命周期钩子 资源 组合 其他

通过new Vue创建出来的一个vm对象就是一个实例。在VUE的设计里，每个组件都是一个实例。
每个实例，都有自己的property和实例方法

不管是创建vm对象时的选项，还是创建完成之后的vm实例，主要知识点都是围绕其数据、方法、生命周期。

1.选项-数据

任何编程都会涉及到数据处理的问题，在vue中，重点是理解其响应式数据绑定。

Vue创建时的data的所有property都会被加入到Vue的响应式系统中。其值发生变化时，视图将发生响应（更新）。
也就是说，没有加在data中的property不会触发界面刷新。
因此要注意哪些property要放入到data中，哪些不用，以免导致界面反复多次更新，甚至循环更新而卡死。

除了data之外，常见的还包括

• props 主要用于组件外向组件内传入参数。其值更新同样导致界面变化。
• computed 计算属性，一般通过data或者props中的值计算得到一个新的数据，当来源变化时，计算值会重新计算，并且更新UI等。
• watch 监控，生命监听哪些数据变化，并调用相应的函数。实际上调用了实例方法中的vm.$watch
• methods 函数。用户自定义函数。

对于入门者来说，开发一个app时，大部分的vue逻辑功能是通过自定义函数(methods)和实例方法组合调用，来完成的。

其他相关关内容和细节，可参考官网API介绍:选项/数据

2.实例方法

vue给每个vue对象，提供了一些实例方法，如何使用这些实例方法，是学习vue的一大重点。下面列举一些常用方法：

• vm.$watch 通常用来监听当前vm对象的数据的变化，然后响应一个函数。

// 监听键路径
 vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})
//也可以监听函数，但是不常用，也不推荐初学者用

• vm.$on 监听事件
• vm.$emit 发送事件

具体定义可参考API。
实例方法/数据
实例方法/事件

3.生命周期

理解vue的生命周期很重要，这会帮助你快速解决一些bug，或者避免一些bug的出现。
不同的生命周期添加特定的代码，将影响很多界面的显示和相关逻辑。

下面的代码就是一个生命周期钩子的例子。这是通过选项来实现的。

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})

最常用的选项钩子生命周期函数包括created和mounted
created将在对象创建后调用。
mounted将在对象被挂载到页面上时调用，晚于created。
详细的生命周期示意图，详见官网生命周期图示

一般情况下，在created函数中，做消息监听绑定，在destroyed函数中把相应的消息监听解绑。
而mounted用来在挂载前获取数据，或者生成界面真正需要的临时数据。

此外，最常用的实例方法生命周期函数包括forceUpdate和nextTick

vm.$forceUpdate()
作用：
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

vm.$nextTick( [callback] )
作用：
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

其他文章

开篇的两篇文章，概念较多，后面渐渐以实战为主。

前一篇：VUE入门指北
下一篇：VUE入门指北——(3)单文件组件.vue文件

推荐参考资料

Vue.js——60分钟快速入门