初识 vue 的生命周期

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_43316300/article/details/85003386

1. 组件实例的生命周期
2. 生命周期对应的钩子函数

一、人生阶段

1. 入世 发育
2. 在世 生活 不断地充实自己
3. 离世 回忆过去 解决遗憾

二、vue组件的一生 (和实例是一样的)

简单地可以像人生似的分为三个阶段

1. 挂载前 (产生虚拟dom 加载数据)

//虚拟dom  
<li v-for="item in 10">{{item}}</li>   =>   //真实情况是 十个li
//虚拟dom 渲染到真实的dom   渲染挂载

2. 挂载 (存在于html界面 并且运行)

3. 销毁 (离世组件的销毁)

三、生命周期

生命周期对应的钩子函数 就是到达某一个时间点自动执行的函数

四、常用的八个钩子函数

1. 创建

beforeCreate
组件创建之前 没有数据 没有元素 只有事件和生命周期

crested
//创建结束 有数据 没有元素
// 修改数据操作 ajax 请求数据

2. 挂载

beforeMount
//挂在之前 有数据 没有元素
//ajax 请求数据
//挂载之前最后一次可以修改数据修改数据

mounted
//挂载完成 数据有 元素也能获取到
//修改数据操作 ajax 请求数据
//操作页面元素

3. 修改/更新

beforeUpdate
//数据修改之前 数据有 元素也有
created beforemount 的数据修改 不会触发 update
update 修改只会在挂载后触发
如果数据 没有挂载使用 修改也不会触发 修改生命周期
监听数据的变化
千万不要在这修改数据

updated
//数据修改之后 数据有 元素也能获取到
created beforemount 的数据修改 不会触发 update
update 修改只会在挂载后触发
如果数据 没有挂载使用 修改也不会触发 修改生命周期
监听数据的变化
千万不要在这修改数据

4. 销毁/移除

beforeDestroy
销毁之前
元素 数据 尸体 都在 但是没用
解决遗憾

destroyed
销毁结束

vue 的组件和实例有生命周期 , 到达固定的生命周期会触发钩子函数 , 每个钩子函数有特点 , 是否有数据 , 是否有元素

扫描二维码关注公众号，回复： 7591653 查看本文章

Vue.nextTick(()=>{
      //当上一次数据修改完成 (界面修改也完成) 之后才会调用回调函数里的方法
})