vue的生命周期函数

最新推荐文章于 2025-04-01 09:54:40 发布

原创最新推荐文章于 2025-04-01 09:54:40 发布 · 478 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p id="p">{{msg}}</p>
        <input type='text' v-model="msg">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'test'
            },
            methods: {
                show () {
                    console.log('show方法')
                },
            },
            // 生命周期
            beforeCreate() {
                // 在beforeCreate执行的时候，data和methods中的数据都还没被初始化
                console.log(this.msg);
                this.show();
            },
            created() {
                //data 和methods 已经被初始化了
                console.log(this.msg);
                this.show();
            },
            beforeMount() {
                //模板在内存中编译完成，但是尚未把模板渲染到页面中
                //打印{{msg}}，没有渲染
                console.log(document.getElementById('p').innerHTML)
            },
            mounted () {
                //已经渲染到页面上
                console.log(document.getElementById('p').innerHTML)
            },
            beforeUpdate() {
                //data 值更新时
                //data 数据已经更新，但页面尚未更新
                console.log(document.getElementById('p').innerHTML + '~~~~~') //页面
                console.log(this.msg + '###') //data数据
            },
            updated () {
                //data 值更新渲染到页面上
                console.log(document.getElementById('p').innerHTML + '!!!')
                console.log(this.msg + '***')
            },
        })
    </script>
</body>
</html>