Vue.js 生命周期、计算属性及侦听器

一、创建一个Vue实例

每个Vue应用都是使用Vue函数创建一个Vue实例。所有的Vue组件都是一个Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）。

数据和方法

当一个实例被创建后，它向Vue的响应式系统加入了其data对象中能找到的所有属性。当这些属性的值改变的时候，视图也会跟着响应。

注意：

1.值得注意的是，只有当Vue实例被创建的时候的data对象中的存在的属性才是响应式的。

2.如果你知道你会在晚些时候需要一个属性，但是一开始它为空或者不存在，那么你仅需要设置一些初始值。

3.这里唯一的例外是使用object.freeze()，这会阻止修改现有的属性。

4.当然除了数据属性，Vue实例还暴露出了一些实例属性和方法，它们都有前缀$,这样便于和用户自定义的属性区分开来。

二、实例生命周期钩子

每个Vue实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听，编译模板，将实例挂载到DOM并且在数据变化时更新DOM。同时在这个

过程中会运行一些叫生命周期钩子的函数。生命周期钩子的this上下文指向调用它的实例

• 初始化事件和生命周期
• beforeCreate: 这时候访问不到数据和真实DOM
• beforeCreate和created之间的时间，挂载数据和绑定事件
• created：用于在一个实例被创建之后执行的代码。倒数第二次机会更改数据，更改数据之后不会触发updated钩子函数
  
  created和beforeMount之间，会寻找实例或组件是否有模板（template），编译模板为虚拟DOM放到render函数中渲染。
• beforeMount:这是倒数第一次机会更改数据。更改数据之后不会触发updated钩子函数
• mounted: 这时候可以访问到真实的DOM
• beforeUpdate:当实例或组件的数据变化的时候，这时候会立即调用beforeUpdate钩子函数，然后Vue的虚拟DOM机制会重新创建dom树，和之前的dom树进行比较，利用diff算法
• updated:
• beforeDestroy：在这里可以清除定时器，清除事件绑定
• destroyed:在这里也可以做类似清除定时器的事情
  
  所有生命周期方法被调用的时候，this都指向所在的Vue实例。

实际的生命周期方法调用次序：

1.new Vue();

2.在进行create之前，需要调用beforeCreate生命周期钩子；

3.然后挂载数据，绑定事件；

4.然后调用created生命周期方法；

5.判断是否有el的选项，如果有，再判断其是否有template选项；如果没有的话，就在vm.$mount(el)被called的时候，再去判断其是否有template的选项。

6.这时候判断有无template选项，如果有的话，就看他将template模板变成render function，

7.在mount之前，还要调用beforeMount，执行完beforeMount之后，就将el渲染成vm.$el。然后调用mounted。

8.渲染完之后，如果数据有变化的话，就需要重新渲染，然后就调用beforeUpdate，虚拟DOM重新渲染并更新。更新完之后调用updated；

9.如果页面即将被销毁的时候，先调用beforeDestroy，然后等销毁完之后，就调用destroyed。

三、计算属性和侦听器

1.计算属性

var vm = new Vue({
	el: '#example',
	data:{
		message: 'hello'
	},
	computed:{
                //reverseMessage是计算属性，因为其依赖了message数据属性，当message变化的时候，reverseMessage也跟着改变
		reverseMessage: function(){
			return this.message.split("").reverse().join("");
		},
                //now也是计算属性，但是它并不是响应式依赖，计算属性是基于它们的依赖来缓存
		now: function(){
			return Date.now();
		}
	}
	methods:{
	 	reverseMessage:function(){
	 		return this.message.split("").reverse().join("");
		}
	}
})

计算属性缓存vs方法

（1）计算属性是基于响应式依赖进行缓存的。一个计算属性B依赖于某个属性A,如果这个属性A是依赖于遍历一个比较大的数组进行缓存的。这时候使用计算属性可以降低遍历大数组的开销。

如果使用方法的话，则这个计算属性B则每次根据A进行计算，而每次A要根据大数组来计算，这时候就会每次获取属性B，都会遍历一次大数组。

2.侦听属性

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

看起来计算属性要比侦听属性好用得多，侦听属性看起来滥用watch。

3.计算属性的setter

计算属性默认只有getter，不过在需要的时候，也提供一个setter。

computed:{
		reverseMessage: function(){
			return this.message.split("").reverse().join("");
		},
		now: function(){
			return Date.now();
		},
		fullName:{
			get: function(){
				return this.firstName + this.lastName;
			},
			set:function(newValue){
				var names = newValue.split(" ");
				this.firstName = names[0];
				this.lastName = names[names.length - 1]
			}
		}
	}

4.侦听器

虽然计算属性在大多数情况下合适，但也需要一个自定义的侦听器。Vue通过watch选项，提供一个更通用的方法，来响应数据的变化。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

四、class与style绑定

在将v-bind用于class和style的时候，表达式结果的类型除了字符串，因为字符串拼接比较繁琐，Vue对其进行增强，还可以是对象和数组。

1、对象语法

data: {
    isActive: true,
    hasError: false
}

// 单个属性
<div class="color" v-bind:class="{active: isActive}" >fff</div>
<div class="color active"></div>

// 多个属性
<div v-bind:class="{active: isActive,'text-danger': hasError}"></div>
<div class="active"></div>

// 直接通过classObj计算属性来
<div v-bind:class="classObj"></div>
<div class="active"></div>
{
    data: {
        isActive: true,
        hasError: false
    },
    computed: {
        classObj:  function() {
            return {
                active: isActive && !hasError,
                text-danger: hasError
            }
        }
    }
}

2、数组

// 单纯使用数组中的值
<div v-bind:class="[activeClass,dangerClass]"></div>
<div class="active text-danger"></div>
data:{
    activeClass: 'active',
    dangerClass: 'text-danger',
}

// 数组中运用三元表达式
<div v-bind:class="[isActive?activeClass : '', dangerClass]"></div>
<div class="active text-danger"></div>
data:{
    isActive: true,
    activeClass: 'active',
    dangerClass: 'text-danger'
}

// 数组中也可以使用对象
<div v-bind:class="[{active: isActive}, dangerClass]"></div>
<div class="active text-danger"></div>
data:{
    isActive: true,
    dangerClass: 'text-danger'
}