Vue生命周期钩子理解

最新推荐文章于 2022-12-07 17:51:01 发布

码少女壮士

最新推荐文章于 2022-12-07 17:51:01 发布

阅读量408

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_40630195/article/details/122914939

版权

#Vue生命周期钩子理解

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        {{ msg }}
    </div>

    <script>
        /* 
        1. vue生命周期钩子 ： vue实例从加载到销毁过程中会执行的一些回调函数
            生命周期 ： vue实例从创建到销毁的过程。 （vue实例创建， dom树完成渲染）
            钩子 ： 回调函数
        2. vue生命周期4个阶段8个勾子
            阶段一： 创建  （创建vue实例）
                beforeCreate, created
            阶段二： 挂载   （data数据渲染到el）
                beforeMount,mounted
            阶段三： 更新    (检测data变化并更新el)
                beforeUpdate,updated
            阶段四： 销毁   (解除data与el的绑定关系)
                beforeDestroy,destroyed
        3. vue第一次加载的时候会执行哪几个钩子
            3.1 创建vue实例之前 ： beforeCreate
            3.2 创建vue实例之后 : created
            3.3 挂载前 : beforeMount
            3.4 挂载后(初始渲染) : mounted

        4. vue常用钩子
            created : 完成data数据创建  （一般用于axios请求网络数据）
            mounted : 完成初始渲染 （一般用于操作dom）
        5.注意点： vue生命周期钩子 不能使用 箭头函数
            function函数： 钩子中的this指向 vue实例
            箭头函数： 钩子中的this指向 window
        */

        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我是坤坤!',
            },
            //1. beforeCreate : 创建vue实例之前
            beforeCreate() {
                //这个钩子： data中的数据还没有创建
                console.log( this )
                console.log( this.msg )//undefined
            },
            //2.created : vue实例创建完成
            created() {
                //这个钩子： 完成data的创建，但是还没有创建挂载点
                console.log( this )
                console.log( this.msg )//我是坤坤
            },
            //3.beforeMount : data数据挂载到el之前
            beforeMount() {
                //这个钩子：完成el的创建，但是没有挂载
                console.log( this )
                console.log( this.$el )//app盒子
            },
            //4.mounted : 完成挂载（data数据已经渲染到el上）
            mounted() {
                //这个钩子： 完成初始渲染（第一次把data渲染到el）
                console.log( this )
                console.log( this.$el )
            },
            //5.beforeUpdate : 数据更新前 （检测数据变化了，但是页面还没有更新）
            beforeUpdate() {
                console.log(this)
            },
            //6.updated : 完成数据更新（把修改后的data重新渲染到了页面）
            updated() {
                console.log(this)
            },
            //7.beforeDestroy : vue实例销毁前
            /* 
            销毁前： 不是指vue实例销毁，而是解除data和el的绑定关系
                说人话： 以后data变化了，跟el没有关系
            销毁vue ：  vue实例.$destroy()
            */
            beforeDestroy() {
                console.log(this)
            },
            //8.已经销毁
            destroyed() {
                console.log(this)
            },
        })
    </script>
</body>
</html>