vue生命周期

• vue的生命周期 其实是vue实例对象的生命周期 每一个生命周期 都对应了一个钩子函数(hook) 当我们的vue实例 走到对应的生命周期后 就会执行对应的钩子函数（前提是我们编写了对应的钩子函数）

• 钩子函数的名称 和 生命周期的名称一致

• 钩子函数想写法

  • 钩子函数直接写在new Vue({}) 的 大括号中

  • let vm = new Vue({
        钩子函数名(){}
    })

• 生命周期流程

  • 1.创建vue实例 new Vue()

  • 2.初始化 事件系统 和 生命周期系统

    • 目前我们处于的生命周期状态为 beforeCreate（创建前）

    • 这个状态下 el：undefined data：undefined methods:undefined

  • 3.初始化一些响应的相关操作（指令等）

    • 初始化完毕后 就会进入created（创建后）状态

    • 在这个状态下：data 和 methods等 数据 才会初始化完成。 el依然为undefined

  • 4.判断是否有 el 配置选项 如果有 就是用el指定的元素 作为 vue实例对象的模板 进行后续的渲染

    • 到这里 就会进入 beforeMount（挂载前）

    • 挂载是vue中的一个专属术语 表示 将vue实例中设置的数据等内容 渲染到html代码（view层）中

  • 5.创建vue实例对象的$el属性（这个属性用来初始化 虚拟DOM） 并对el指定的模板元素 进行渲染

    • 到这里 就会进入 mounted（挂载后）

    • mounted生命周期 是vue生命周期中 最持久的一个状态 当vue代码渲染完成后 会一直处于这个状态

  • 6.在mouted状态下 如果我们的vue实例中的数据 发生了变化 就会进入一个新的生命周期——beforeUpdate（更新前）

  • 7.虚拟DOM重新根据更新完的数据 进行渲染

    • 这时 就会进入updated（更新后）

  • 8.之后 重新回到mounted（挂载后）状态

  • 9.当用户调用 vue实例的$destroy方法之后

    • 这时 就会进入beforeDestroy（销毁前）状态

  • 10.销毁掉vue实例中挂载的 监听器（watchers）、子组件、事件绑定

    • 这时 就会进入destroyed（销毁后）状态

      • 注意事项：

      • 1.我们可以通过el 来实现页面挂载 当然 我们也可以不写el 而是通过调用vue实例对象的$mount方法来实现页面挂载

        • 用法：

          • vue实例对象.$mount("挂载点选择器")

      • • 如上图所示 在生命周期判断完是否有el选项之后 还会判断 是否有template选项

          • template 也是new Vue中的一个选项属性

          • 这个选项属性 用来规定vue实例的模板内容 其优先级高于el

            • 也就是说 如果同时存在template 和 el 两个选项属性 就会挂载template的内容而不是el的内容

          • 用法：

            • let vm = new Vue({
                  template:"html内容"
              })

        • render函数

          • 这个函数也是可以用来渲染vue实例的模板的

          • 用法

            • let vm = new Vue({
                  render(ce){
                      //ce形参 会自动接收到一个函数 这个函数可以用来创建页面模板内容
                      return ce("要创建的元素名","元素的文本内容");
                  }
              })

          • render渲染的模板 其优先级是最高的

        三种模板渲染的优先级关系为：render>template>el

      • 各个生命周期一般我们在钩子函数中做的事情

        • beforeCreate 测试

        • created 数据交互（ajax请求服务器数据）

        • beforeMount：数据交互

        • mounted：进行页面效果的测试

        • beforeUpdate：测试数据的变更

        • updated：测试数据变更后页面相关效果