【 Vue全家桶 · Vue（二）】Vue实例及其生命周期的完整讲解

一. Vue实例

Vue框架的使用都是从创建Vue实例对象开始的。一个页面可以看作是由各个组件构成的，每个组件都会对应一个Vue实例。Vue实例也可看做是一个局部的MVVM模式，也是由视图（V），模型（M），视图模型（VM）三部分组成。以最常见的Vue实例结构为例：

1.1 实例的创建以及el属性

我们说Vue其实就是一个构造函数（直接输出Vue结果如下图）：

类似于构造函数声明实例对象一样，Vue的实例创建也借用new关键字：

new Vue({
   
  // 属性
})

或者我们也可以用一个变量来承接。官方文档里常用vm，vm为ViewModel的缩写，也从侧面印证了一个Vue实例对象在该组件中扮演的是视图模型（VM）的角色。当然这个变量名无所谓，哈哈。

let vm = new Vue({
   
  // 属性
})

每个Vue实例被创建出来后都首先要明确它要用到哪个HTML模板上，即完成局部MVVM模式的视图绑定。具体用到的属性值是 —— el，它可以接受一个CSS选择器作为参数（ID，类名最为常见）。

<div id="app"></div>

let vm = new Vue({
   
  el:"#app"
})

1.2 data和methods属性

我们通常把该组件的属性（property）和方法（method）定义在对应的Vue实例对象中，即data和methods属性。
我们可以为data声明中的属性设初值，或者让data指向一个全局对象：

let vm = new Vue({
   
  el:"#app",
  data:{
   
    name:"zevin"
  }
})

var obj = {
   
    name:"zevin"
}
let vm = new Vue({
   
  el:"#app",
  data:obj
})

methods中定义着各种事件方法，可以很方便的通过v-on指令绑定到模板内的目标节点上。比如我们为模板添加一个点击（click）事件showTip࿱