vue生命周期

babywenever

已于 2023-12-02 13:46:15 修改

阅读量52

点赞数

文章标签： vue.js 前端 javascript

于 2023-11-30 14:23:23 首次发布

本文链接：https://blog.youkuaiyun.com/babywenever/article/details/134711453

版权

beforeCreate()

在实例初始化之后调用, data 和 methods 都还没有初始化完成, 通过 this 不能访问

created()

此时 data 和 methods 都已初始化完成, 可以通过 this 去操作, 可以在此发 ajax 请求。但是不能获得dom元素

beforeMount()

模板已经在内存中编译, 但还没有挂载到页面上, 不能通过 ref 找到对应的标签对象。能找到$el,但是$el的子元素不能找到，虚拟dom没有转为真实dom

mounted()

页面已经初始显示, 可以通过 ref 找到对应的标签, 也可以选择此时发 ajax 请求。虚拟dom已经转为真实dom

beforeUpdate()

在数据更新之后, 界面更新前调用, 只能访问到原有的界面

updated()

在界面更新之后调用, 此时可以访问最新的界面

activated()

使用 keep-alive 后生命周期会增加两个钩子函数，此函数是激活

deactivated()

失活，没有卸载组件，不会真正销毁，离开和进入组件时beforeDestroy和destroyed不会执行

beforeDestroy()

实例销毁之前调用, 此时实例仍然可以正常工作(在内存中可以工作，对虚拟dom的处理，但是无法调用函数更改数据)

destroyed()

Vue 实例销毁后调用, 实例已经无法正常工作了(在内存中也无法工作了)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>04.listening-event-modifier</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- TODO:理解每个生命周期钩子函数可以做的工作内容 -->
        <h1 ref="title">{{ title }}</h1>
        <!-- 
                更新时只会执行beforeUpdate和updated
                并且修改操作只处理一次，因为vue会自动比较，第二次时vue认为前一次的修改结果与现在的内容一样，所以不再进行修改
             -->
        <button @click="title = 'Changed'">Update Title</button>
        <button @click="destroy" ref="btn">Destroy</button>
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data: {
                title: 'The VueJs Instance',
            },
            beforeCreate: function () {
                // 有this对象，没有data数据，也没有DOM元素
                // console.log(this)
                // console.log(this.title) // undefined
                console.log('1-创建之前beforeCreate()');
            },
            created: function () {
                // 已经有了data数据，意味着可以进行ajax异步数据请求操作
                // 并且在修改之后对数据进行修改或赋值操作
                // console.log(this.title) // 有数据
                // // 可以进行数据请求和数据修改，但是没有el元素进行管控渲染，说明界面没有办法很好显示
                // console.log(this.$el)   // undefined
                console.log('2-已经创建created()');
            },
            beforeMount: function () {
                // 能找到el元素，但是el元素里的子元素(操作控制的元素)还没有找到
                // this.$refs,el下属的元素是没有完全挂载的，所以无法操作el下的元素内容
                // 已经有虚拟dom,但是真实dom并没有渲染完成
                console.log(this.$el, this.$refs)    // {} 里面是虚拟dom,点击展开会有虚拟元素
                console.log('3-挂载之前beforeMount()');
            },
            mounted: function () {
                // 最终挂载完成，el与el下属的dom元素以及渲染完成，可以操作
                // 将所有虚拟dom渲染成了真实dom
                console.log(this.$el, this.$refs)    // {title: h1, btn: button}
                console.log('4-挂载完毕mounted()');
                // this.update()
            },
            beforeUpdate: function () {
                // 更新之前数据并没有发送变化，虚拟dom没有转为真实dom
                console.log('5-更新之前beforeUpdate()');
                // debugger 语句用于停止执行 JavaScript，并调用 (如果可用) 调试函数
                // 使用 debugger 语句类似于在代码中设置断点
                // debugger;
            },
            updated: function () {
                // 更新之后，虚拟dom已经转成了真实dom(修改后的)
                console.log('6-更新完毕updated()');
            },
            // beforeDestroy和destroyed能够看到this实例，但是无法操作
            beforeDestroy: function () {
                console.log(this)
                console.log('7-组件销毁之前beforeDestroy()');
                // 方法将不在起效果，因为已经准备销毁，可以调用函数，但是不能更改标题
                // this.update()
                console.log(this.title)
                // this.title="xxx"    // 无法更改
            },
            destroyed: function () {
                console.log('8-销毁完毕destroyed()');
                console.log(this)
                // 可以调用函数，但是不能更改标题
                // this.update()
            },
            methods: {
                destroy: function () {
                    // 销毁当前实例，销毁后不会进行修改操作
                    this.$destroy();
                },
                update() {
                    console.log("update()")
                    this.title = "update"
                }
            },
        });
        console.log(vm)
    </script>
</body>

</html>