问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
104828720
    1.4k34353
    根据vuejs官方的生命周期图

    clipboard.png

    问题：

    为何我执行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>

    测试结果：

    clipboard.png

    求大神解答

    javascriptvue.js
    阅读 2.5k
    3 个回答
    得票最新
    头像
    冯恒智
      7.9k2428

      你这时用js访问dom，内容应该已经变了，只是同步代码还没执行完，浏览器不会更新渲染
      https://jsfiddle.net/5kvy3wpr/

      <!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(document.querySelector('#app').innerHTML);
            }
        });
    </script>
</html>
      头像
      纷飞的羽毛
        1.9k1514

        alert会造成线程阻塞

        头像
        橘子病
          14758

          mounted 是指 实例和DOM绑定了，但是上dom渲染要等到下一个nextTick；
          mounted() {

          this.$nextTick(()=>{
  alert("mounted");
})

          }

          查看全部 3 个回答
          推荐问题