vue常用的生命周期函数

vue常用的生命周期函数

 beforeCreate() {
            // 能不能在beforeCreate发起请求？能发起请求，但是不能赋值给data里面的数据
            // 组件的生命周期函数也可以称为钩子函数，但是导航钩子函数是另一个概念
            console.log("1 beforeCreate在执行时，组件对象创建了，data选项没有初始化，渲染的虚拟DOM也没生成，数据也没有挂载")
           console.log(this,this.$data,this.$el)

        },

   created() {
        // data选项已经生成了，所以可以在此处发起ajax请求，
        console.log("2 created在执行的时候，data已经注入实例，也就是data选项已经在组件对象初始化成功了，渲染的虚拟DOM也没生成，数据也没有挂载")
        console.log(this,this.$data,this.$el)
    },
 

   // 在执行created之后，vue判断一个组件有没有el选项，如果有el选项，在判断有没有模板template属性，如果有template选项，编译el所对应的模板(渲染试图，生成对应html字符串)
    beforeMount() {
         console.log("3beforeMount在执行的时候，渲染的虚拟DOM已经生成，数据也没有挂载")
         console.log(this,this.$data,this.$el)
    },
        // 在mounted之前做了啥事？
        mounted() {
            console.log("4mounted在执行的时候，渲染的虚拟DOM被解析，数据已经挂载到容器了")
             console.log(this,this.$data,this.$el)
        },
        beforeUpdate() {
            console.log("5beforeUpdate数据再发生变化之前执行，在此处监听数据的变化")
          
        },
        updated() {
            console.log("6updated数据再发生变化之后执行，在此处监听数据的变化") 
        },
        beforeDestroy() {
            console.log("7 组件销毁之前执行") 
        },
        destroyed() {
            console.log("8 组件销毁之后执行") 
        },
    })
    总结：1 beforeCreate: 可以发请求，但是不能赋值给data里面的数据
     2 created  发请求 初始渲染的工作在此处执行
     3 beforeMount 虚拟DOM生成 ，数据未挂载
     4 mounted 虚拟DOM解析。数据已经挂载 进行获取DOM元素
     5 beforeupdate 数据更新之前调用
     6 updated 数据更新之后调用
     7 beforedestroy 在销毁之前调用
     8 destoryed 在销毁之后掉用 定时器清除，事件移除都可以在此处去写