[Vue学习笔记]生命周期

132 阅读1分钟

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

围绕着Vue的生命周期可以分为8个阶段


let app = new Vue({
            el: '#app',
            beforeCreate() {
                //创建前            
            },
            create() {
               //创建后
            },
            beforeMount() {
               //载入前
            },
            mounted() {
               //载入后
            },
           
            beforeUpdate() {
               //更新前
            },
            updated() {
               //更新后
            },
             beforeDestroy() {
               //销毁前
            },
            destroyed() {
              //销毁后
            },
            data() {
                return {
                   
                }
            }
        })

1. beforeCreate() 初始化数据并且进行双向绑定

2. create() 此时数据以及初始化完成,检查是否有created,有则执行,判断是否有el选项没有就调用vm.mount$手动挂载未调用实例,判断是否有template选项,如果有则渲染,如果没有则把el对应的HTML当成templa来处理

3. beforeMount() 创建真实的HTML替换容器中旧的HTML

4.mounted() DOM初始化完成,可以进行页面样式的处理,如使用DOM插件 swiper等

5.beforeUpdate() 修改data并更新DOM

6. updated() 在这一阶段DOM会和更改过的内容同步

7. beforeDestroy() 当组件跳转或者切换时将会触发销毁操作 销毁事件和监听器等

8. destroyed() 销毁完时检查是否有destroy

监听销毁方法 vm.$destroy()