[JavaScript知识库]Vue生命周期

1.vue生命周期钩子：vue从初始化到销毁的过程中会执行的函数

2.四个阶段8个钩子：

? ? (1)初始化阶段：beforeCreate、created

? ? (2)挂载节点：beforeMount、mounted

? ? (3)更新阶段：beforeUpdata、updated

? ? (4)销毁阶段：beforeDestroy、destroyed

3.vue初始渲染会执行哪些钩子：4个

? ? beforeCreate

? ? beforeMount

? ? beforeUpdata

? ? beforeDestroy

4.两个常用：

? ? created(): 一般用于发送ajax(页面以加载需要发送ajax在这个钩子)

? ? mounted(): 一般用于操作DOM(页面一加载需要操作DOM在这个钩

<script>

export default {
    data(){
        return {
            name:'张三',
            age:20
        }
    },
    // 声明周期钩子
    // 1.创建了vue实例，但是还没有创建data
    beforeCreate() {
        console.log(1)
        console.log(this)
        console.log(this.name)
    },
    // 2.创建了data,但是还没有挂载 常用：最早可以获取data的钩子，一般在这个钩子发送ajax
    created() {
        console.log(2)
        console.log(this)
        console.log(this.$el)
        console.log(this.name)
    },
    // 3.beforeMount():创建挂栽点，但是还没有把data挂栽到el
    beforeMount() {
        console.log(3)
        console.log(this)
        // htm1环境，这个钩子$e1可以获取挂载点。脚手架环境，这个钩子$e获取的是undefined
        console.log(this.$el)
        const input = document.querySelector('input')
        console.log(input)
    },
    // 完成初始渲染。把data数据渲染到挂载点el(常用：最早可以操作DOM的钩子)
    mounted() {
        console.log(4)
        console.log(this)
        console.log(this.$el)
        const input = document.querySelector('input')
        console.log(input)
        input.focus()
    },
    // 检测到data数据发生变化，但是还没有更新el
    beforeUpdate() {
        console.log(5)
        console.log(this)//获取的是变化后的数据，但是页面还是显示之前的数据
    },
    // 更新之后的data,完成渲染
    updated() {
        console.log(6)
        console.log(this)
    },
    // 正在销毁（接触data与e1绑定、移除事件监听、移除侦听器）
    /*
    触发销毁钩子的两个条件
    1.对组件使用v-if
    2.调用组件的this.$destroy()*/
    beforeDestroy() {
        console.log(7)
        console.log(this)
    },
    // 完成销毁
    destroyed() {
        console.log(8)
        console.log(this)
    },

}
</script>

子)