vue生命周期

每个组件都有从创建到注销的过程 , 就像每个人都必须经历出生到死亡的完整过程 , 我们将这样过程称之为生命周期 .

vue框架内置函数 , 随着组件的生命周期 , 自动按次序执行 . 我们可以利用这些特点 , 使程序在特定的时间点 , 执行某些特定的操作 . 例如 : 可以在created生命周期函数中发起ajax请求 , 从而初始化data数据 .

都会经历四个阶段

初始化(创建阶段) --beforeCreate --created

挂载(渲染显示阶段) beforeMount mouted

更新(修改变量) => 触发视图更新 beforeUpdate updated

销毁(切换页面) => 会把组件对象从内存中删除 beforeDestroy destroy

beforeCreate 是在实例初始化之前 例如

    export  default {
        data (){
            rreturn{
                arr:[1,2,3,4]
            }
        },
        beforeCreat(){
            console.log('初始化实例前')  //初始化实例前 ---函数已经调用
            console.log(this.arr)  //undefined  无法获取到data中的值, 因为此时data还没有初始化
        }
    }

    created(){
        console.log('初始化实例后')
        console.log(this.arr) //[1,2,3,4] , 说明此时已经创建好实例了
                              //在这个阶段 , 可以发送ajax请求 ,也可以给对象添加属性
    }

    beforeMount(){   //挂载前
        console.log('vue的虚拟dom,挂载到真实的网页之前')
        console.log(document.getElementById('ul'))  //无法获取到页面中的ul元素 ,显示打印为null
        console.log(document.getElementById('li').children[0])
        //报错,没有获取到ul , 查找其子元素相当于在查找null的后代元素
    }

    mounted(){  //挂载之后,可以操作dom
        console.log(document.querySelector('ul').children[0].innerHTML)  
        //此时可以获取到完整值,页面中dom数已经挂载完成
    }

    beforeUpdate(){
        //this.arr.push(5)
        //console.log('数据更新之前',this.arr) //[1,2,3,4,5] 数据已更新,但是页面渲染不会更新
        //比如增加数组,当vue触发生命周期时,页面不会更新
    },
     updated () {
    // 更新后
    console.log("updated --- 数据更新, 页面更新后")
    console.log(document.getElementById("Ul").children[4].innerHTML)
    //此时已经更新完成,可以获取页面的元素
  }

    
    beforeDestroy(){    //销毁前  (清除定时器/解绑js定义的事件)
    console.log('实例销毁之前调用')
    },
    destroyed(){   //销毁后
    //清除定时器
    console.log("destroyed --- 销毁完成")  //切换页面,组件销毁后才会打印
    }

一般来说八个钩子函数常用的只有created(用于发送ajax请求) , mounted(用于获取页面元素) , destroyed(用来注销组件),避免浪费内存.

注意:待before都是在什么什么之前的事件处理 , 不常用 , 其余四个有三个较为常用 , 且都带有的 ed , 不要忽略过去时 , 不然会报错 .