6.vue生命周期

二、Vue生命周期

vue实例从创建到销毁的过程，称为生命周期，共有八个阶段 vue的生命周期就是每个vue实例被创建之前一直到结束经历的一系列的初始化过程。
下面是官网关于vue生命周期的图解，

可以看出在vue整个生命周期中会有很多钩子函数（图中标红的部分），虽然我们用到的就那么几个，但我们都来了解一下。首先先明白一个概念：Vue的实例。它是Vue框架的入口，可以理解为前端的ViewModel，它包含它包含了页面中的业务逻辑处理、数据模型等，它也有自己的一系列的生命周期的函数钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。

1、beforeCreated（）

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。（这里是在index.html里做的测试）

2、created（）

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3、beforeMount（）

在挂载开始之前被调用：相关的 render 函数首次被调用。

4、mounted（）

el 被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el 也在文档内。

5、beforeUpdate（）

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

6、updated（）

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

7、beforeDestroy（）

实例销毁之前调用。在这一步，实例仍然完全可用。

8、destroyed（）

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

三、计算属性

1. 基本用法

计算属性也是用来存储数据，但具有以下几个特点：
    a.数据可以进行逻辑处理操作
    b.对计算属性中的数据进行监视

2.计算属性 vs 方法

将计算属性的get函数定义为一个方法也可以实现类似的功能
区别：
    a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
    b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行

3. get和set

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性
默认只有get，如果需要set，要自己添加