生命周期  钩子函数

        一个组件从创建到销毁的过程就是生命周期。

        beforeCreate:创建前

            1、当前vue实例化的时候会做一个初始化的操作，在这个生命周期函数里面我们可以做初始化的loading

            2、在当前函数里面是访问不到data中的属性，但是可以通过vue的实例对象进行访问

 

        created:创建后

            1、当beforeCreate执行完毕以后，会执行created. 在当前函数中我们可以访问到data中的属性

            2、当前生命周期函数执行的时候会将data中所以的属性和methods身上所以的方法添加到vue的实例身上，同时

            会将data中所有的属性添加一个getter/setter方法

 

            3、如果需要进行前后端上数据交互(ajax请求的时候) 需要在当前生命周期中使用

        

        beforeMount:挂载前

            (渲染)

            render函数初次被调用—->数据和模板没有进行相结合，同时还没有渲染到html页面上

            可以在此做渲染前data中数据最后的修改

 

        mounted:挂载后

            1、数据和模板进行相结合，渲染成真实的DOM结构

讯享网

            2、在当前生命周期函数里面我们可以访问到真实的DOM结构,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、在vue中我们可以通过\(refs</span><span style="font-family: 宋体">来访问到真实的</span><span style="font-family: Calibri">DOM</span><span style="font-family: 宋体">结构</span></p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4<span style="font-family: 宋体">、</span><span style="font-family: Calibri">ref</span><span style="font-family: 宋体">类似与</span><span style="font-family: Calibri">id</span><span style="font-family: 宋体">一样 值必须是唯一的 &nbsp;&nbsp;访问的时候我们可以通过</span><span style="font-family: Calibri">this.\)refs.属性

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeDestroy:销毁前

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销毁之前还可以访问到DOM结构 &nbsp;以及相关的数据(data)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在这个生命周期函数中我们可以将绑定的事件进行移除

&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;destroyed:销毁后

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在这个生命周期函数中会将数据和模板之间的关系断开(不是你的做的)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在这个生命周期函数中我们还是可以访问到data中的属性

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;但是访问不到真实的DOM结构了

&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeUpdate:更新前

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;只要data中的属性发生了改变，那么这个生命周期就会执行，render函数再次会执行

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在这个生命周期函数中我们可以对数据进行最后的修改，同时也可以访问到最新的DOM结构和数据

&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;updated:更新后

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在当前生命周期函数中我们可以访问到最新的DOM结构(数据更新后最新的DOM结构)和数据