Vue的生命周期【个人看点】

233 阅读2分钟

个人认为,Vue的生命周期就是创建了一个Vue的组件用这个组件对Vue进行了渲染,把整个过程分成了不同的阶段,给我们提供了不同的回调函数,我们把这些回调函数称为生命周期,主要就是划分了这几个方向 初始化 更新和销毁

Vue生命周期 初始化 编译 更新 销毁

image.png

数据初始化
数据初始化就是 beforeCreate和created。created主要是做一些类似this.state,props一些数据的初始化工作,对他们进行observer的数据劫持工作,也会在created里做一些数据初始化的请求,其实这个写在哪个生命周期里都可以,但是写在created里会更加语义化一点。

渲染阶段
渲染阶段是 beforemount和mounted,在这个生命周期里主要是对组件进行渲染,将虚拟dom换成真实dom展示到页面中,所以在mounted里我们就可以去操作渲染完成之后的dom,还可以去做一些dom操作,事件的初始化工作,都可以写在这个生命周期里

更新
数据的更新会引起视图的重新渲染,之后会触发beforeUpdate和updated,我们可以做一下更新后的dom操作,但是这两个生命周期不是特别常用,因为在这里面无法捕获道到底是由那个属性引起的视图渲染,在这里些操作就有可能任意一个的改变触发的渲染都会执行,对于程序执行的优化不是特别友好,所以,我们一般使用$nextTick去代替updated生命周期

销毁
销毁的组件是beforeDestroy和destroy两个生命周期,在这里做一些手动的销毁,因为在前面我们可能做了一些事情的绑定,定时器的绑定,所以我们在组件销毁的时候对这些内容也做一个销毁处理,因为组件销毁只会销毁组件本身的实例,不会销毁我们手动创建的内容