(二)vue的生命周期及相关的运行流程

1. vue的生命周期

经过一系列的初始化过程需要设置数据监听编译模板将实例花在到DOM 并在数据变化时更新DOM 等

这是相应的生命周期函数 在用的时候直接写上，其实很多人都这样，基本上从来不会去记这个具体的流程只是在用到的时候知直接去写上，页面加载的时候请求数据去渲染，然后写监听之类的东西，没有很在意这个使用的具体流程其实我觉得就像是在看书一样，首先你要先看目录，这样你才能知道，作者是怎么来构造这个内容的，框架也是，要知道为什么要写这个框架，这样只有我们知道了原因，才可以更能在使用的时候找到原生的繁琐利用框架去优化他，使用框架的时候才会更加融合。

这是官方给出的生命周期的流程图

beforeCreate：

	实例组件刚创建，元素DOM和数据都还没有初始化，暂时不知道能在这个周期里面进行生命操作。

created:

	数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染。有人问了，请求都是异步的，并不会阻碍实例加载。这是我个人水平的问题，这边改正，在这个周期里面，请求因为是异步的，不会阻碍实例加载，除非是那些同步操走才会导致页面空白。这样说来，在这个周期里面进行请求，渲染速度反而会更快。

beforeMount

	DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑。

mounted

	数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。可以在这边请求，不过created请求会更好一些。这个周期适合执行初始化需要操作DOM的方法。

beforeUpdate

	只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。

updated

	只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。

beforeDestroy

	这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。

destroyed

	说实在的，我还真的不知道这个周期跟beforeDestroy有什么区别，我在这个周期里面调用data的数据和methods的方法都能调用，所以我会觉得跟beforeDestroy是一样的。

所以在写的时候也尽量去理解明白不至于在一个生命周期函数里面一直操作

2.vue中内置的方法属性和vue生命周期的运行顺序

在运行的时候进行相应的加载和运行

3.自己的构造方法和生命周期函数运行的顺序

这个图是晚上找的别人的我自己没有用到所以理解的不深后期再细化

巴特西

(二)vue的生命周期及相关的运行流程

最新文章

热门文章