Vue.js--生命周期详解

最新推荐文章于 2024-05-28 10:15:00 发布

吴声子夜歌

最新推荐文章于 2024-05-28 10:15:00 发布

阅读量673

点赞数 5

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

本文链接：https://blog.csdn.net/cold___play/article/details/102378817

版权

Vue.js 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

生命周期

每个Vue实例创建时，都会经历一系列初始化过程，同时也会调用相应的声明周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。（类似于jQuery的ready()方法）。

<!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">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="myApp">
        <span>{{str}}</span>
        <input v-model="str">
    </div>
    <script>
        var vm = new Vue({ 
            el: "#myApp", 
            data: { 
                str: '生命周期'
            }, 
            
            /**
                新对象诞生：
                    Vue对象用新方法实例化。它创建了一个Vue类的对象来处理DOM元素。对象的
                    这个声明阶段可以通过BeforeCreated挂钩来访问。

                    我们可以在这个钩子中插入我们的代码，在对象初始化之前执行
            */
            beforeCreate: function () { 
                alert('Before Create'); 
            }, 

            /**
                创建（具有默认特性的对象）：
                    在这个生命阶段，对象及其事件完全初始化。 created 是访问这个阶段并编写代码的钩子。

            */
            created: function () { 
                alert('Created'); 
            }, 

            /**
                beforeMounted（对象在DOM中适合形状）:
                    这个钩子被调用 beforeMounted。在这个阶段，它检查是否有任何模板可用于
                    要在DOM中呈现的对象。如果没有找到模板，那么它将所定义元素的外部HTML视为模板。
            */
            beforeMount: function () { 
                alert('Before Mount'); 
            }, 

            /**
                已安装（DOM已准备就绪并放置在页面内）:
                    一旦模板准备就绪。它将数据放入模板并创建可呈现元素。用这个新的数据填充元
                    素替换DOM元素。这一切都发生在mounted钩子上。
            */
            mounted: function () { 
                alert('Mounted'); 
            }, 

            /**
                更改已完成，但尚未准备好更新DOM:
                    在外部事件/用户输入beforeUpdate发生更改时，此钩子即 在反映原始DOM元素的更改之前被触发。
            */
            beforeUpdate: function () { 
                alert('Before Update'); 
            }, 

            /**
                更新（在DOM中呈现的更改）:
                    然后，通过实际更新DOM对象并触发updated，屏幕上的变化得到呈现 。
            */
            updated: function () { 
                alert('Updated'); 
            }, 

            /**
                对象准备死掉:
                    就在Vue对象被破坏并从内存中释放之前， deforeDestroy 钩子被触发，
                    并允许我们在其中处理我们的自定义代码。
            */
            beforeDestroy: function () { 
                alert('Before Destroy'); 
            }, 

            /**
                销毁（对象停止并从内存中删除）:
                    该 destroyed 钩子被成功运行销毁对象上调用。
            */
            destroyed: function () { 
                alert('Destroyed'); 
            } 
        });
    </script>
</body>

</html>

吴声子夜歌

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue.js--生命周期详解

生命周期每个Vue实例创建时，都会经历一系列初始化过程，同时也会调用相应的声明周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。（类似于jQuery的ready()方法）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...
复制链接

扫一扫