vue 生命周期详细介绍和代码解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>生命周期</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="修改usg" @click="msg='no'">
        <h1 id="h1text">{
   
   { msg }}</h1>
    </div>
    <script>
        // var app = new Vue  表示开始创建一个Vue的实例对象
        var app = new Vue({
            el:"#app",
            data:{
                msg:'ok',
            },
            methods:{
                show(){
                    console.log('执行了show方法')
                }
            },
            //这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
            beforeCreate() {
                //注意： 在beforeCreate 生命周期函数执行的时候，data和methods中的数据都还没有初始化
                // console.log(this.msg)
                // this.show()
            },
            // 这是我们遇到的第二个生命周期函数
            //注意：在created中，data和methods都已经初始化好了
            //如果要调用 methods中的方法，或者操作data中的数据，最早，只能在 created中操作
            created() {
                // console.log(this.msg)
                // this.show()  
            },
            //这是我们遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到 页面中

            beforeMount() {
                // console.log(document.getElementById('h1text').innerText)
                //在beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串  
                //另一种解释此函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时，页面还是旧的
            },
            // 这是我们遇到的第4个生命周期函数，表示内存中的模板，已经真实的挂载到了页面中，用户已经看到渲染好的页面了。
            mounted() {
                // console.log('data中的msg数据是:'+this.msg)
                // console.log(document.getElementById('h1text').innerText)
                //注意： mounted 是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例，就静静的 躺在我们内存中，一动不动

                // 只要执行完了mounted,就表示整个Vue 实例已经初始化完毕了；此时，组件已经脱离了创建阶段；进入到了运行阶段
            },
            //接下来运行两个生命周期
            //这些是组件运行阶段的生命周期函数只有两个：beforeUpdate 和updata 这俩事件，会根据data数据的改变，有选择性的触发0次到多次
            //得出结论： 当执行 beforeUpdate()的时候，页面中的显示数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
            beforeUpdate() {
                // console.log('data中的msg数据是:'+this.msg)
                // console.log(document.getElementById('h1text').innerText)
            },
            //updated事件执行的时候，页面和data数据已经保持同步了，都是最新的
            updated() {
                    console.log('data中的msg数据是:'+this.msg)
                console.log(document.getElementById('h1text').innerText)
               
            },
             //当执行 beforeDestory钩子函数时候，实例身上所有的data和所有的methods，以及过滤器，指令都处于可用状态，此时，还没有真正执行销毁的过程
             //当执行到destroyed 函数的时候，组件已经完全销毁了，此时，组件中所有的数据，方法，指令，过滤器。。。都已经不可用了
        })
    </script>
</body>
</html>
vue 生命周期详细介绍和代码解析

おすすめ
