vue 05
生命周期
对于组件来说就是从生成到销毁的过程
这个过程可以分为四个阶段和八个方法
阶段 | 方法名 | 方法名 |
---|---|---|
初始化 | beforeCreate | created |
挂载 | beforeMount | mounted |
更新 | beforeUpdate | updated |
销毁 | beforeDestroy | destroyed |
钩子函数
vue内置函数,随着组件的生命周期,自动执行
初始化阶段
先 nuw 一个vue()
初始化事件和生命周期函数
执行beforeCreate这个钩子函数(这个阶段读取不到设置的数据)
vue内部添加数据和相关函数,
执行created这个钩子函数,创建实例(可以读取设定的数据)
挂载阶段
对template选项进行检查
生成虚拟DOM
执行beforeMount钩子函数,(此时获取不到页面中的元素节点)
把虚拟DOM挂载到真实DOM上
执行mounted这个钩子函数,(可以获取到页面中的元素)
更新阶段
在更新数据之前,会执行beforeUpdate这个钩子函数(你获取不到更新后的值,只能获取之前的值)
虚拟DOM重新渲染,打补丁到真实DOM中
执行updated这个钩子函数(可以获取最新的数据)
然后重复此循环
销毁阶段
当被删除时,先执行beforeDestroy (可以在里面关闭定时器等)
让后删除相关(比如子组件等)
实列被销毁后,触发最后一次的destroyed的钩子函数
整个组件的生命周期到此结束