09 生命周期

最新推荐文章于 2024-07-07 00:15:00 发布

学习总不晚

最新推荐文章于 2024-07-07 00:15:00 发布

阅读量98

点赞数

分类专栏： Vue 文章标签： Vue生命周期

本文链接：https://blog.csdn.net/u013472738/article/details/100184513

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed

辣子鸡：香辣入口，犹如吃了炫迈一样 - - - 根本停不下来


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.6.10.js"></script>
</head>

<body>
    <div id="app">

    </div>


    <script>

        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            beforeCreate() {// 这是我们遇到的第一个周期函数，表示 实例完全被创建出来之前，会执行它
                //注意：在 beforeCreate 生命周期函数执行的时候，data和methods中的数据还没有被初始化

            },
            created() {//这是第二个生命周期函数
                //在created中；data和methods 都已经被初始化好啦
                //如果调用 methods中的 方法，或者操作data 中的数据 最早 ，只能在created 中操作
            },
            beforeMount() {//第三个 周期函数  表示模版已经在内存中编辑完成啦；但是尚未吧模版渲染到页面中
                //在 beforeMount 执行的时候， 页面中的元素 ，还没有被真正替换过来，只是之前写的（如：data中的属性值）一些模版字符串

            },
            mounted() {//第四个周期函数    表示 内存中的模版；已经真实的挂载到页面中 ，用户已经可以看到渲染好的页面了
                //注意： mounted 是 实例创建期间的最后一个生命周期函数；但执行晚 mounted 就表示：实例已经被完全创建好了；此时 如果没有其他操作的话；这个实例 就静静的躺在我们的内存中

            },
            beforeUpdate() { //  这个时候；表示 我们的界面还没有被更新（但是数据已经被更新过了）
                //得出的结论是：当执行beforeUpdate 的时候，页面中的显示的数据；还是旧的；此时data 数据是最新的；页面尚未和 最新的数据保持同步


            },
            updated() {// updated事件执行的时候；页面和data 数据已经保持同步了；都是最新的。
            },
            beforeDestroy() {
                //当执行 beforeDestroy 钩子函数的时候；Vue实例就已经从运行阶段；进入到了 销毁阶段；
                //当执行beforeDestroy 的时候，实例身上所有的data 和 所有的methods ,以及过滤器、指令...都处于可用状态，还没有真正执行销毁的过程


            },
            destroyed() {//当执行到 destroyed 函数的时候 ，组件已经被完全销毁了，此时，组件中的所有数据、方法、指令、过滤器... 都已经不可以使用了 。
            }

        })

    </script>
</body>

</html>

生命周期图例

在这里插入图片描述

学习总不晚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
09 生命周期

生命周期beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestorydestoryed辣子鸡：香辣入口，犹如吃了炫迈一样 - - - 根本停不下来<!DOCTYPE html><html lang="en"><head> <meta cha...
复制链接

扫一扫

专栏目录