Vue生命周期详解(图解)

最新推荐文章于 2024-06-19 11:11:55 发布

置顶 IT程序员的日常

最新推荐文章于 2024-06-19 11:11:55 发布

阅读量6.5k

点赞数 37

分类专栏： vue 文章标签： VUE vue生命周期 vue生命周期详解

本文链接：https://blog.csdn.net/FengyCoder/article/details/85227113

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

程序员学习必备书籍推荐：

首先我们对Vue生命周期官方给出的图进行详细解释

什么是生命周期?
简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程
生命周期方法?
Vue从生到死的过程中伴随着各种各样的事件,这些事件会自动触发一些方法.这些方法我们统称为生命周期方法
生命周期钩子 = 生命周期函数 = 生命周期事件

创建期间生命周期方法
    beforeCreate:
    created:
    beforeMount
    mounted
运行期间生命周期方法
    beforeUpdate
    updated
销毁期间的生命周期方法
    beforeDestroy
    destroyed

代码解释:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期方法</title>
    <!--引入vue框架-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
</div>

<script>
   
    let vm = new Vue({
        el:'#app',
        data:{
            msg:"IT程序员的日常"
        },
        methods:{
            say:function () {
                console.log("IT程序员的日常");
            }
        },
        beforeCreate:function () {
            /*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/
            //console.log(this.msg);
            //this.say();
            //console.log(this.say);
        },
        created:function () {
            /*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods
            * 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问
            */
            //console.log(this.msg);
            //this.say();
            // console.log(this.say);
        },
        beforeMount:function () {
            /*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/
            // console.log(document.querySelector("p").innerText);
            // console.log(document.querySelector("p").innerHTML);
        },
        mounted:function () {
            /*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/
            console.log(document.querySelector("p").innerText);
            console.log(document.querySelector("p").innerHTML);
        },
        beforeUpdate:function(){
            /*主要data中的数据发生了变化就会执行
            * 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
            *
            * */
            // console.log(this.msg);
            // console.log(document.querySelector("p").innerText);
            // console.log(document.querySelector("p").innerHTML);
        },
        updated:function () {
            /*主要data中的数据发生了变化就会执行
           * 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
           *
           * */
            console.log(this.msg);
            console.log(document.querySelector("p").innerText);
            console.log(document.querySelector("p").innerHTML);
        },
         beforeDestroy:function(){
            /*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
            * 最后能使用Vue实例的地址
            * */
        },
        destroyed:function () {
            /*
            * 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
            * */
        }

    })
</script>
</body>
</html>

IT程序员的日常

关注

37
点赞
踩
163

收藏

觉得还不错? 一键收藏
10
评论
Vue生命周期详解(图解)

首先我们对Vue生命周期官方给出的图进行详细解释vue生命周期详细图解什么是生命周期?简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程生命周期方法?Vue从生到死的过程中伴随着各种各样的事件,这些事件会自动触发一些方法.这些方法我们统称为生命周期方法...
复制链接

扫一扫

专栏目录