2021-07-07

最新推荐文章于 2021-11-10 17:26:45 发布

全栈JAVA学习

最新推荐文章于 2021-11-10 17:26:45 发布

阅读量63

点赞数

本文链接：https://blog.csdn.net/weixin_46763689/article/details/118554599

版权

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">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
</head>
<body>
    <!-- 生命周期钩子==生命周期函数==生命周期事件  -->
    <div id="app">
        <h3 id="h3">{{msg}}</h3>
        <input type="button" value="改变" @click="msg='no';">
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'ok'
            },
            methods: {
                show(){
                    console.log(this.msg);
                }
            },
            beforeCreate() {
                //这是第一个生命周期函数，表示实例完全被创建出来之前，会执行他 
                //注意：在这个生命周期函数执行的时候，data和methods中的数据和方法都没被初始化
                // console.log(this.msg);//undefined
                // console.log(this.show());//报错，说this.show不是一个function，没有被定义
            },
            created() {
                //这是第二个生命周期函数，表示初始化data和methods完毕
                // console.log(this.msg);//ok
                // this.show();//ok
                //如果需要调用methods中的方法，或者操作data中的数据，最早也需要在created生命周期函数中操作
            },
            beforeMount() {
                //这是第三个生命周期函数，表示 模板已经在内存中编译完成了，但是尚未 把模板渲染到页面中去
                // console.log(document.getElementById('h3').innerHTML);//{{msg}}
                //在beforeMount执行的时候，页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串
            },
            mounted() {
                //这是第四个生命周期函数，表示 内存中的模板已经挂载到页面中去了，用户已经可以看到渲染好的页面了
                // console.log(document.getElementById('h3').innerHTML);//ok
                //mounted 是实例创建期间的最后一个生命周期函数，当执行完后，表示实例已经被完成创建好了，如果没有其他操作的话，这个实例已经创建完毕
            },
            //下面两个生命周期函数是运行中的两个事件
            beforeUpdate() {
                //表示我们界面还没有被更新，但是数据被更新了
                // console.log(document.getElementById('h3').innerHTML);//ok
                // console.log(this.msg);//no
                //得出结论：当执行beforeUpdate的时候，页面中的显示的数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
            },
            updated() {
                // console.log(document.getElementById('h3').innerHTML);//no
                // console.log(this.msg);//no
                //updated页面和data数据已经保持同步了，都是最新的
            },
        })
    </script>
</body>
</html>

在这里插入图片描述
可以通过运行代码示例，来熟悉这个Vue生命周期函数的调用过程，以及钩子函数运行的时间和意义。

全栈JAVA学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-07

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"> <ti
复制链接

扫一扫