vue生命周期和钩子函数什么时候该干什么事

23次阅读

共计 598 个字符,预计需要花费 2 分钟才能阅读完成。

vue 生命周期
说到 vue 的生命周期其实并不难理解,就是从一个 vue 项目创建,渲染,数据更新、销毁。
vue 提供了 6 个钩子函数,每进入一个周期时就会触发对应的钩子函数,例如当页面离开后你想销毁一个定时器,那么这时候就要在销毁前的钩子函数里执行。这就是它们的作用。

beforeCreated
每一个页面都是一个 vue 实例,这时实例还没有被创建,所以你无法知道 data,也不能用 watch 监听

created
这时实例已经创建,可以得到 data,调用 watch,但是页面还是空白的

beforeMounted
页面挂载前,此时页面依然是空白的。这时 render 函数首次被调用。

mounted
页面挂载了,这时你可以看到页面的内容,也可以访问到 dom

beforeUpdate
数据更新前,也就是虚拟 DOM 打补丁之前。这时访问到的 DOM 还有原有的 DOM

update
数据更新完毕后。注意,如果当前页面有挂载子组件,子组件更新时它并不能保证子组件也重绘了。如果你想确定是整个 dom 都更新可以使用 this.$nextTick()

activated 和 deactivated
keep-alive 特有的钩子函数,当被这个标签包裹的组件被激活或停用时触发

bedoreDestroy
当你离开这个页面前被调用。例如说取消定时器,使用了第三方库留下了多余的 DOM 结构,都可以在这个时机删除,避免内存泄漏。

destroy
这时候实例已经被完全销毁

正文完
 0