Vue框架学习（三）

Vue的生命周期

一个Vue实例从创建到销毁的整个过程，就叫做vue的生命周期。它包含四个阶段：创建；挂载；更新；销毁。

• 创建：发送初始化，渲染请求，将数据转化为响应式数据。
• 挂载：渲染模板，操作dom
• 更新：数据修改，更新视图
• 销毁：销毁实例

Vue的生命周期函数（钩子函数）

在vue的生命周期过程中，会自动运行一些函数，被叫做钩子函数，它可以让开发者在特定的阶段运行自己的代码。

• 创建：beforeCreate，还不能获取响应式数据；created，可以获取响应式数据。
• 挂载：beforeMount，不能操作dom；mounted，可以操作dom。
• 更新：beforeUpdate，获取到的数据还是更新前的；updated，获取到的数据是更新后的。
• 销毁：beforeDestroy，清除掉一些Vue以外的资源占用，定时器，延时器等；destroyed销毁后。

    //  创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      },

      //  挂载阶段（渲染模板）
      beforeMount () {
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以操作dom了
      },

      // 更新阶段(修改数据)
      beforeUpdate () {
        console.log('beforeUpdate 数据修改了，视图还没更新',       document.querySelector('span').innerHTML)
      },
      updated () {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      },

      // 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
      },
      destroyed () {
        console.log('destroyed，卸载后')
      }