vue中的生命周期函数

最新推荐文章于 2022-10-01 14:58:38 发布

心有猛虎轻嗅蔷薇

最新推荐文章于 2022-10-01 14:58:38 发布

阅读量115

点赞数

分类专栏： vue 生命周期函数文章标签： vue周期生命周期函数钩子函数

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

生命周期函数

1 篇文章 0 订阅

订阅专栏

今天在看生命周期有关的内容的时候看到了一篇不错的博客，写的非常的通俗易懂。
博客转自：https://www.cnblogs.com/wo1ow1ow1/p/11057700.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <script src="../js/vue.js" charset="utf-8"></script>
    <body>
        <div id="app">
            <h3 id="w3">{{ msg }}</h3>
        </div>
    </body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            msg:'ok'
        },
        methods:{
            show(){
                console.log("执行了show方法")
            }
        },
        beforeCreate() {  // 这是我们第一个遇到的生命周期函数, 表示实例完全被创建之前, 会执行它
            // console.log(this.msg)   // 输出undefined
            // this.show()  //输出this.show is not a function
            // 注意: 在 beforeCreate 生命周期函数被执行的时候, data 和 methods 中的 数据都还没有初始化
        },
        created() {  //这是我们遇到的第二个生命周期函数
            // console.log(this.msg)  //输出ok
            // this.show()   // 输出 "执行了show方法"
            // 在 created 中, data 和 methods 都已经初始化好了!
            // 如果要调用 methods 中的方法, 或者操作 data 中的数据, 最早, 只能在 created 中操作
        },
        beforeMount() {  //这是我们遇到的第三个生命周期函数, 表示 模板已经在内存中编译完成了, 但是尚未把 模板渲染到 页面中 
            // console.log(document.getElementById("w3").innerText)  // 输出 {{ msg }}
            // 在 beforeMount 执行的时候, 页面中的元素, 还没有被真正替换过来, 只是之前写的一些模板字符串  
        },
        mounted() {  //这是我们遇到的第四个生命周期函数, 表示 内存的模板, 已经真是的挂载到了页面上, 用户可以已经看到渲染好的页面
            console.log(document.getElementById("w3").innerText)  // 输出 ok
            // 注意: mounted 是 实例创建期间的最后一个生命周期函数, 当执行完 mounted 就表示, 实例已经被完全创建好了, 此时, 
            // 如果没有其它操作的话, 这个实例, 就静静的 躺在我们的内存中, 一动不动 
        }
    }) 
</script>

心有猛虎轻嗅蔷薇

关注

0
点赞
踩
0

收藏

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

今天在看生命周期有关的内容的时候看到了一篇不错的博客，写的非常的通俗易懂。博客转自：https://www.cnblogs.com/wo1ow1ow1/p/11057700.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title&...
复制链接

扫一扫