8、vue生命周期的理解

最新推荐文章于 2021-08-17 12:34:34 发布

原创最新推荐文章于 2021-08-17 12:34:34 发布 · 205 阅读

CC 4.0 BY-SA版权

32 篇文章

订阅专栏

博客介绍了Vue生命周期相关知识，指出其应写在Vue实例而非methods里，包含创建前/后、挂载前/后、更新前/后、销毁前/后8个阶段。还说明了各阶段特点，如创建前el和data未初始化，挂载后可进行ajax交互等。

beforeCreate() （创建前）这时候 el 和 data 都是 undefined 还没有初始化
created() （创建后）这时候 data 已经初始化了，但是 el 还没有，因为这时候 data 已经可以获取到值了，所以可以用 this.xx 取到值了
beforeMount() （挂载前）这时候 data 和 el 已经初始化了，相关的render函数首次被调用，实例完成以下的配置：编译模板，并且把 data 数据和模板生成 html，但并没有挂载到页面上。
mounted() （挂载后）实例完成以下的配置：用上面编译好的html内容替换 el 属性指代的 DOM 对象，完成模块中的html渲染到html中，这个阶段可以用 ajax 交互
beforeUpdate() (更新前)
updated() (更新后)
beforeDestory() （销毁前）实例在销毁前还是可以用 this.xx 取值，这个阶段一般做重置工作。比如清除组件中的定时器和监听的 DOM 事件
destoryed() （销毁后）调用后vue实例的所有东西都会解绑定，所有事件监听器都会清除，所有实例会被销毁