生命周期，钩子函数

钩子函数

• 以下可直接使用 方便更清晰理解

  <div id="app">
    <p>{{ message }}</p>
    <input type="button" @click="change" value="更新数据" />
    <input type="button" @click="destroy" value="销毁" />
  </div>

在mounted中才能够去获取到我们的dom对象

当我们想要在其他生命周期中获取到DOM
可以使用
  this.$nextTick(() => {
    // 在这里保证DOM加载完成后才执行
  })
  Vue.nextTick()
  
如果我们在vue中，想要获取到DOM对象，那么我们需要给对应的html标签添加ref属性
  <标签 ref="自定义名字">

  想要获取
    this.$refs.自定义名字

  前提是，获取DOM最好写在this.$nextTick中

  如果把ref添加到组件标签上，则直接获取到这个组件的实例对象

create 和 mount

    create 和 mount
    beforecreate：el 和 data 并未初始化
    created:完成了 data 数据的初始化，el没有
    beforeMount：完成了 el 和 data 初始化
    mounted ：完成挂载


    beforecreate : 举个栗子：可以在这加个loading事件
    created ：在这结束loading，还做一些初始化，实现函数自执行
    mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
    beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

    var vm = new Vue({
      el: '#app',
      data: {
        message: "Welcome Vue"
      },
      methods: {
        change() {
          this.message = 'Datura is me';
        },
        destroy() {
          vm.$destroy();
        }
      },
      beforeCreate: function () {
        console.group('beforeCreate 创建前状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
        console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
        console.log("%c%s", "color:red", "message: " + this.message); //undefined
        this.$nextTick(() => {
          console.log(this.message); // welcome vue 在DOM加载完成后才去执行在Mounted结束状态之后
        })
      },
      created: function () {
        console.group('created 创建完毕状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
        console.log("%c%s", "color:green", "data   : " + this.$data); //[object Object]  =>  已被初始化
        console.log("%c%s", "color:green", "message: " + this.message); //Welcome Vue  =>  已被初始化
        this.$nextTick(() => {
          console.log(this.message); // welcome vue 在DOM加载完成后才去执行在Mounted结束状态之后
        })
      },
      beforeMount: function () {
        console.group('beforeMount 挂载前状态===============》');
        console.log("%c%s", "color:green", "el     : " + (this.$el)); //已被初始化
        console.log(this.$el); // 当前挂在的元素
        console.log("%c%s", "color:green", "data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:green", "message: " + this.message); //已被初始化
        this.$nextTick(() => {
          console.log(this.message); // welcome vue 在DOM加载完成后才去执行在Mounted结束状态之后
        })
      },
      mounted: function () {
        console.group('mounted 挂载结束状态===============》');
        console.log("%c%s", "color:green", "el     : " + this.$el); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:green", "data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:green", "message: " + this.message); //已被初始化
        this.$nextTick(() => {
          console.log(this.message); //welcome vue 在DOM加载完成后才去执行在Mounted结束状态之后
        })
      },
      // 数据更新时 才会触发 不常用
      beforeUpdate: function () {
        alert("更新前状态");
        console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
        console.log("%c%s", "color:green", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:green", "data   : " + this.$data);
        console.log("%c%s", "color:green", "message: " + this.message);
        alert("更新前状态2");
      },
      updated: function () {
        console.group('updated 更新完成状态===============》');
        console.log("%c%s", "color:green", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:green", "data   : " + this.$data);
        console.log("%c%s", "color:green", "message: " + this.message);
      },
      // 一但销毁 我们此时再更改变message得值也不会在发生变化，组件销毁就是把事件监听 子组件关系都会断开
      beforeDestroy: function () {
        console.group('beforeDestroy 销毁前状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.log("%c%s", "color:red", "message: " + this.message);
      },
      destroyed: function () {
        console.group('destroyed 销毁完成状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.log("%c%s", "color:red", "message: " + this.message)
      }
    })