Bootstrap

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 在销毁之后掉用 定时器清除,事件移除都可以在此处去写  
;