vue 生命周期

最新推荐文章于 2020-02-11 22:42:04 发布

_内啥玩意啊

最新推荐文章于 2020-02-11 22:42:04 发布

阅读量105

点赞数 1

分类专栏：前端文章标签： vue 生命周期

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

图解：
这是完整的图：
在这里插入图片描述

这是分解：图太长了，分开截取

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    </head>
    <body>
        <div id='app'>
        	<button @click="msg='hahahah'">修改msg</button>
            <h3 id='h3'>{{msg}}</h3>
        </div>
    
    </body>
    <script>
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                msg:"这是我的消息"
            },
            methods:{
                show(){
                    console.log("执行了show方法")
                }
            },
            beforeCreate(){ //这是第一个声明周期函数，表示是例外完全被创建出来之前，会执行它。。。
                // data和methods还未初始化
                console.log("beforeCreated")
                console.log(this.msg) //undefined
                // this.show() 报错，未定义
            },
            created(){ //这是遇到的第二个生命周期函数
                // data和methods已经初始化好，要想操作data和method，最早只能在这个方法里面
                console.log("created")
                console.log(this.msg)
                this.show()
            },
            beforeMount(){ //这是遇到的第三个声明周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染(mount)到 页面中
                console.log("beforeMount")
                console.log(document.getElementById('h3').innerHTML); // 控制台输出 {{msg}}
                // 说明在 beforeMount 执行的时候，页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串
            },
            mounted(){  //这是遇到的第四个生命周期函数，表示，内存中的模板，已经真实挂载到了页面中，用户可以看到渲染好的页面了
            	console.log(document.getElementById('h3').innerHTML); // 控制台输出 这是我的消息
                //mounted是实例创建期间最后一个生命周期函数，当执行完mounted就表示，实例已经完全被创建好了
            },
            beforeUpdated(){  // 这时候表示我们的界面还没有被更新，当它被触发时，数据肯定是要更新了【数据更新了，页面还没有更新
  				console.log('界面上的元素内容是：' + document.getElementById('h3').innerHTML);  // 控制台输出 这是我的消息
  				console.log('data 中的 msg 数据是：' + this.msg);  // 控制台输出 data 中的 msg 数据是：hahahah
  				// 当执行beforeUpdated的时候，页面中的显示的数据是还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
            },
            updated(){
               console.log('界面上的元素内容是：' + document.getElementById('h3').innerHTML);  // 控制台输出 这是我的消息
  				console.log('data 中的 msg 数据是：' + this.msg);  // 控制台输出 data 中的 msg 数据是：这是我的消息
 				// 当执行updated的时候，页面尚未和data的数据已经同步了，是最新的
            },
            beforeDestroy(){},
            destroy(){},
        })
    </script>
</html>

_内啥玩意啊

关注

1
点赞
踩
0

收藏

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

图解：这是完整的图：这是分解：图太长了，分开截取代码示例：<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title></title>  ...
复制链接

扫一扫