vue生命周期

接触Vue两个月了，今天说一说vue里边很重要的生命周期，记得最开始接触的时候我问了一下周边的同事，

这些生命周期都有什么用，得到的答案是mounted里边可以操作属性，你记住mounted就完事了，于是乎。。。

数据请求，mounted（）赋值 mounted（），执行方法，mounted（），监听更新数据？？？搞不动了。。。

然后最近仔细的看了一遍Vue的生命周期，今天和大家分享一下我所了解的

首先什么是Vue的生命周期

Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的生命周期

vue的生命周期里边有八个生命周期钩子函数分别是

beforeCreat() 创建前

created（）创建

beforeMount()挂载前

mounted（）挂载

beforeupdate（）更改前

updated（）更改

beforeDestroy()销毁前

destroyed（）销毁

先来一张官方的生命周期图镇贴

beforeCreate 实例创建前

这个生命周期如上图所示实例初始化在这个生命周期遍历 data 对象下所有属性将其转化为 getter/setter

也就是说添加一个被观察者，所以我们平时在项目中遇到在后来添加新的属性视图不更新就是这个原因

在后来被添加的属性，没有被放到观察者对象中去但是这个时候数据并没有和模板建立链接还不能操作属性

说到这里你可能会反驳我，打印的全都是undefined，你怕是在逗我

but 你可以通过$options(实例自定义属性，属于数据访问的一种和$date 平级) 看到data的值注意data是个函数他没执行所以拿不到数据，用图来说话

data(){
        return{
            a:"1"
        }
    },
    beforeCreate(){
        console.log("beforeCreate",this.$el,this.a)
    },
//beforeCreate undefined undefined

那么如果想在实例挂载完成后添加的属性触发视图更新的话可以用 $set 这个方法这个方法会向被观察者对象里边新增你的属性

这时候我们打印一下组件里的属性还是不存在的

created 实例创建

到这个生命周期的时候实例已经被创建完毕属性已经绑定属性是可以操作的

但是dom还不存在 $el属性还不可以操作

这个生命周期可以进行axios请求但是这个时候页面还没有被渲染出来如果请求时间过长的话会出现长时间的白屏

加loading可能会用户体验好一些

这个生命周期如上图所示他会把template模板编译成html 还有执行render函数，返回一个虚拟dom 同第一句话就是说

dom还拿不到

data(){
        return{
            a:"1"
        }
    },
    beforeCreate(){
        console.log("beforeCreate",this.$el,this.a)
    },
    created(){
        console.log("created",this.$el,this.a)
        this.a=2
        console.log(this.a)
    },
//created undefined 1
//2

这个虚拟Dom接触的不是太多简单来讲就是通过js生成一个类似于dom树的那么一个东西

来看一下这个虚拟dom

大概就是这么一大串，刚看到的时候我的第一感觉就是真￥%…#…复杂然后出于好奇我打印了一下真实dom

更￥%……%复杂总而言之一屏放不下所以说大批量的操作dom 是很影响性能的一件事情膜拜一下远方的各位大神

beforeMount 挂载前

从图上来讲这个声明周期做的是模板编译，看网上的帖子有人能把$el打印出来不太理解怎么打印出来的自己试了一下

打印不出任何东西

    beforeMount(){
        console.log('beforeMount',this.$el,this.pickerMark)
        debugger
    },
//beforeMount undefined false

这个生命周期 el还未对数据进行渲染还是不能操作dom

mounted挂载

这个生命周期是我用的最多的这个时候的虚拟dom已经被渲染到了真实的dom上边

这个生命周期里边我们可以做的事情很多比如数据请求或者赋值操作属性等等

    mounted(){
        console.log('mounted',this.$el,this.pickerMark)
    },


//mounted <div class="propaganda-form" arealistitem="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" style="display: none;"></div> false

以上四个生命周期每个组件只执行一次，过去了就不会在执行了

beforeUpdate 更新前 Updated 更新

我们在mounted更新一个属性的话 beforeUpdate 和 updated 生命周期函数会被触发但是仅限于被观察的属性做出的变化且被引用他们才会触发

而且需要注意的是不要再updated 函数里边直接就修改属性会进入死循环比如说。。。。

浏览器崩溃了。。。。如果你要用的话一定要加判断条件确保能跳出去的那种，我个人是很喜欢用updated这个生命周期函数的

因为之前我拿值什么的都是用的watch 但是vue并不推荐用原因说是很耗费资源不算计算属性的话这个updated 可以说是很方便了

但是如果变化的不是响应式的值他就不会触发怎么办之前研究过一个方法分享一下就是说再date里边声明一个变量当作标记

然后把这个变量放到页面中 dispaly：none；然后在你调用非相应的变量的时候你在后边也调用一下这个标记 updated生命周期函数

是会执行的这时候你可以加一些判断在update去执行一些东西当然后来认识了计算属性就放弃了这个做法计算属性是一种声明式的属性

他只会告诉你这个值是怎么构成的很方便

beforeDestroy 销毁前 destroy销毁

这两个生命周期用到的比较少顾名思义销毁前这个生命周期的时候还是可以对元素进行操作的

之前在项目中用到的就是高级搜索在销毁的时候判断是否有值然后返回相应的状态

销毁这个生命周期执行过后实例的属性和方法就不能再用了

生命周期的顺序

上边讲了单个实例的生命周期，但是我们在平时用到的肯定不会是一个组件，那么父子组件或者兄弟组件的生命周期又是什么样的

直接来一张图

上图可以看到如果有父子组件的话会先从父组件开始到beforeMount 开始走子组件到beforeMount 然后是子组件的一堆mounted 最后父组件

还可以看出兄弟组件的话是依次到beforeMount 然后按照顺序mounted

再来看一下update

有关联的话他的顺序是父beforeupdate 子beforeupdate 子updated 父updated

父组件没有关联的话也不会触发子组件的生命周期

销毁也是这个顺序就不一一上图了

大家可以理解成递归感觉就是递归，那么如果递归的话就存在一个作用域的问题混入的时候又是什么样的

大家都知道混入的时候组件里边属性和方法会优先使用但是生命周期是都会走的相比大家猜也都猜到了

既然组件里边有方法的话会用组件的那么混入必然是最外层的刚才证实了一下想法确实是这样

混入的生命周期的话会在每个声明周期的最前边所有的生命周期都会优先执行

以上是对vue生命周期的理解可能有不足之处希望大家批评指正