为什么vue执行 mounted() 生命周期时,页面的插值表达式还没给替换掉?

根据vuejs官方的生命周期图

https://img2.mukewang.com/5ce0ed3a00012da206150800.jpg

问题:

为何我执行mounted()函数时,发现页面的{{xxx}}表达式还没给替换成真正的数据呢?测试代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

    </head>

    <body>

        <div id="app">

            <h1>{{message}}</h1>

        </div>

    </body>

    

    <script>

        var vm = new Vue({

            el:'#app',

            data:{

                message: '我是一个消息'

            },

            mounted() {

                alert("mounted");

            }

        });

    </script>

</html>

测试结果:

https://img1.mukewang.com/5ce0ed48000154cf08000305.jpg

HUX布斯
浏览 1449回答 2
2回答

心有法竹

alert会造成线程阻塞
打开App,查看更多内容
随时随地看视频慕课网APP