ggggxc学习笔记----Vue学习笔记I----生命周期

一、Vue介绍：

介绍：Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue不强求一次性接受并使用它的全部功能特性。

二、生命周期：vue实例从创建到挂载到更新，最后销毁，这整个流程叫做vue的生命周期。

生命周期钩子函数：

1.初始化构建阶段

（1）beforeCreate ：在初始化的时候调用了beforeCreate,完成了vue实例的生命周期相关属性的初始化以及事件的初始化。这个时候还不能直接访问data中的属性及method中的方法。

（2）created：在初始化完毕以后，完成了vue的数据注入及数据监听操作，该构造的执行意味着vue实例创建完毕，可以进行数据的访问操作   

2.挂载阶段

 （1）beforeMount：在created之后，vue会判断实例中是否含有el属性，如果没有，会调用vm.$mount(el),接着会判断是否含有template属性，如果有将其解析为一个render function，如果没有将el指定的外部html进行解析。这里只是完成了模板的解析但是数据并没有绑定到模板中。

（2）mounted：创建vm.$el替换el，实际上这里完成的是数据绑定操作，在期间执行了render函数，将模板进行了解析，将数据进行了动态绑定。  

3.更新阶段

 （1）beforeUpdate：数据以及修改，虚拟dom也构建完毕，但是没有渲染到页面上

 （2）updated：更新过后的虚拟dom节点，成功渲染到页面上

4.销毁阶段

 （1）beforeDestroy：vue实例销毁之前，还可以访问实例

 （2）destroyed：vue实例上绑定的事件、监听器、子组件销毁完毕，访问不到vue实例了

代码示例：

let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue'
      },
      methods: {
        clickHandler() {
          this.msg = '你好 vue'
        },
        destoryHandler() {
          this.$destroy();
        }
      },
      // 初始化构建阶段
      beforeCreate() {
        console.log('before create');
      },
      created() {
        console.log('created');

        setTimeout(() => {
          this.clickHandler()
        }, 3000)
      },
      // 挂载阶段
      beforeMount() {
        console.log('before mount');
      },
      mounted() {
        console.log('mounted');
      },
      // 更新阶段
      beforeUpdate() {
        console.log('before update');
      },
      updated() {
        console.log('updated');
      },
      // 销毁阶段
      beforeDestroy() {
        console.log('before destroy');
      },
      destroyed() {
        console.log('destroyed');
      }
    })