vue 【生命周期】

Vue的生命周期 ==>好比 ==> 就像人经历 胚胎、出生、婴儿、小孩、青年、壮年、老年、死亡。Vue也是有阶段的。

Vue生命周期钩子函数8个

1.

主要用于：在不同的阶段做些什么事情就可以调用的函数方法；

这给了用户在不同的阶段添加自己的代码的机会 

1.创建阶段   

1.4.加载data数据，已经给data各个属性添加set,get函数。

只有在这个时候在data中声明的属性，才会有数据响应。

如果之后要添加属性，页面不会有响应了，

解决: 

        1.先在data中声明好 

        2.让这个属性的对象成为新的对象，那么所有的都需要重新添加set,get监听。

        3.使用Vue.set()添加属性                                                                                                   

        4.vm.$set()添加属性

2.挂载阶段:

2.1。判断是否有el配置项，如果没有等待$mount(el)执行。

2.2。判断是否有template配置项，如果没有取el的outerHTML当成template

2.3.编译template

2.4.调用beforeMount()

2.5.将编译好的dom替换掉页面中el的元素。

2.6.调用mounted()  挂载完成之后去获取dom(要用ref自定义去获取),操作dom

        一般在这个生命周期函数中操作dom

        在vue中，只能操作当前实例管辖范围内的dom.

        先给dom设置ref，然后通过this.$refs获得该dom。

3 .更新阶段   

        3.1.属性已经发生变化

        3.2.调用属性监听watch的回调

        3.3.调用beforeUpdate() 【更新前】

        3.4.更新dom

        3.5.调用updated() 【更新后,-----只要有数据更新就会触发】

        3.6.调用$nextTick()【重要 ，一般数据更新，操作dom，-------谁更新谁使用】

4.销毁阶段   手动执行【 vm.$destroyed() 】  

     1.卸载移除Vue 的watch监听，子组件，事件监听【自定义的】，

执行vm.$destroyed()   会触发  beforeDestroy()【销毁前】   和  destroyed()【销毁后】