vue的生命周期钩子函数详细说明

vue的生命周期钩子函数

当el和template同时存在时，优先走template里的内容，相当于将渲染好处理后的html替换掉el旧模板。（el必须存在）

先初始化周期（下图中虚线可走可不走，穿了方法（beforeCreate）就走）

1. beforeCreate
   初始化data（是拿不到数据的）

2. *created *

   判断有无el，没有时调用vm.$mount(el)才会走，没调用就不向下走了；有el，再判断有无template属性，有template属性就渲染template对象；没有template属性，就渲染el对象；（可以拿到数据，操作data数据，可以ajax获取数据）

3. beforeMount
   将渲染好处理后的html替换掉el旧模板
   （这里拿不到图片，没有页面元素，只是模板例如：<div v-for="item in list">{{item.name}}</div>）

4. mounted
   dom初始化完成，加载echarts，操作依赖dom的比如给li加红色。(有页面元素)
   轮播图渲染完成，并使其效果动起来
   如果在这里拿数据并且改变的话，会多次加载的代码

5. beforeUpdate
   即将更新渲染

6. updated
   更新成功

7. beforeDestory
   销毁前

8. destoryed
   销毁后

    借官方文档的一张图：
   

例：（我们常用的生命周期就是created和mounted）

	new Vue({
            el: "#app",
            data() {    //放置数据
                return {
                }
            },
            created() {
                //初始化Data，如ajax获取数据
            },
            
            mounted() {
                // 初始化DOM，如加载echarts
                // console.log(this.innerHTML)
            },
        })