vue的生命周期

最新推荐文章于 2023-12-18 13:34:35 发布

Wpiper

最新推荐文章于 2023-12-18 13:34:35 发布

阅读量359

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_51817638/article/details/122518892

版权

Vue的生命周期
Vue实例有一个完整的生命周期，也就是从开始创建到初始化数据，编译模板，挂载DOM，渲染，更新，渲染，卸载等一系列过程，称为Vue的生命周期

生命周期钩子：就是生命周期事件的别名

主要的生命周期钩子函数：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="WEB-INF/lib/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">
        {{msg}}
    </h3>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'ok'
        },
        methods:{
            show(){
                console.log("执行了show方法")
            }
        },
        beforeCreate()  //这是我们遇到的第一和生命周期函数，表示实例完全被创建之前会执行它
        {
            console.log(this.msg)
            this.show()
            //注意：在beforeCreate生命周期函数执行的时候，data和method中数据都还没有初始化
        },
        created()//这是遇到的第二个生命周期函数
        {
            console.log(this.msg)
            this.show()//在created中，data和methods都已经被初始化好了
            //如果要调用methods中的方法或者操作data中的数据，最早只能在created中操作
        },
        beforeMount()//这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
        {
          console.log(document.getElementById('h3').innerText);//{{msg}}
            //在brforeMount执行的时候，页面中的元素没有被真正的替换过来，只是之前写的一些模板字符串
        },
        mounted()//这是遇到的第四个生命周期函数，表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
        {
            console.log(document.getElementById('h3').innerText)
            //注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时
            //如果没有其他操作的话，这个实例就静静的躺在我们的内存中一动不动
        },
        //接下来是运行中的两个事件
        beforeUpdate()//这时候，表示我们的界面还没有被更新，但是数据被更新了，只有data中的数据被更改了，才会触发这个事件
        {
          console.log('界面上元素的内容'+document.getElementById('h3').innerText);//这时候没有输出,因为msg没有被改变,点了修改msg的按钮，输出为ok
            //当点击修改按钮时，data中的msg数据会被修改
            console.log('data中的数据是'+this.msg);
            //得出结论；当执行beforeUpdate的时候，页面中显示的数据，还是旧的，此时data数据是最新的，页面尚未和
            //最新的数据同步
        },
        updated()
        {
            console.log('界面上元素的内容'+document.getElementById('h3').innerText);//no
            console.log('data中的数据是'+this.msg);//no
            //updated事件被执行的时候，页面和data数据已经保持同步了，都是最新的
        }
    })
</script>
</body>
</html>