Vue 生命周期

目录

• Vue生命周期

 

Vue生命周期

每个vue实例在被创建时都需要经过一系列初始化过程。
如设置数据监听、编译模板、将实例挂载到DOM、在数据变化时更新DOM等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。

2.6.1版本有8个生命周期

beforeCreate created

beforeCreate
触发：在实例创建之前执行
作用：这个阶段主要做的事情是初始化事件和生命周期
范围：不能拿到data数据，不能拿到dom节点

created
触发：在实例创建完执行，
作用: 主要做的事情就是数据观测，可以通过this拿到data数据，此处最早可发Ajax请求，通过修改属性做渲染
范围：可以获取data数据，无法获取挂载的dom节点，在此处修改数据不会触发beforeUpdate和updated钩子函数

      var vm = new Vue({
            el: "#app",
            data: {
                msg: 'ft'
            },
            //主要是初始化事件和生命周期,拿不到data数据和dom节点
            beforeCreate() {
                console.log('beforeCreate   ~~~~~~~~~~')
                console.log('$el:', this.$el)
                console.log('$data.msg:', this.$data)
                console.log(' ')
            },
            //可以拿到data,拿不到dom节点，可以发送数据请求
            created() {
                console.log('created   ~~~~~~~~~~')
                console.log('$el:', this.$el)
                console.log('$data.msg:', this.$data.msg)
                console.log(' ')
            }
      })

beforeMounted mounted

beforeMount
触发：数据渲染之前触发，此时dom节点已经挂载，但是数据尚未渲染到html模板
作用：结束模板编译，准备数据渲染
范围：此时编译模板已经结束，可以拿到dom节点，可以修改data属性，但数据还没最终渲染到页面，不能拿到html最终渲染的结果

mounted
触发：dom节点挂载，且数据已经渲染到html模板上去
作用：将数据渲染到DOM节点
范围：可以访问和修改data属性，数据已经渲染到DOM节点，可以操作渲染后的DOM，可以触发beforeUpdate、updated钩子函数

            beforeMount() {
                console.log('beforeMount   ~~~~~~~~~~')
                console.log('$el:', this.$el)
                console.log('$data.msg:', this.$data.msg)
                console.log(' ')
            },
            mounted() {
                console.log('beforeMount   ~~~~~~~~~~')
                console.log('$el:', this.$el)
                console.log('$data.msg', this.msg)
                //此处修改可以触发更新相关钩子函数
                this.msg = 'ft2'
                console.log(' ')
            },

beforeUpdate updated

触发：只有在DOM节点挂载之后的数据更新，才会触发此类钩子函数。
作用：做更新处理
范围：只有在mounted里面修改data时两者才会执行，在挂载之前如beforeMount、created里修改数据都不会执行

注意不能在update和beforeUpdate里面改数据，会造成死循环

beforeDestroyed destroyed

触发：当实例或组件销毁之前(清理它与其他实例的连接，解绑所有指令事件监听)调用这两个钩子，如 vm.$destroy();
作用: 清理定时器等等操作，防止内存泄漏
范围：实例或组件销毁

            mounted() {
                setTimeout(() => {
                    vm.$destroy();
                }, 3000)
            }