Зачем получать неопределенный после рендеринга DOM в следующем случае? - PullRequest
1 голос
/ 09 ноября 2019

Это демо в статье 11 Vue.js Lifecycle Hooks

Я запутался, почему не могу получить DOM через mounted через 3 секунды, хотя могу получить результатесли соблюдается console.log немедленно.

<!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="lifecycle">
        <h1>{{ title }}</h1> 
         <button @click="title='New Title'">Update Title</button>
       </div>
    <script src='practice.js'></script>
</body>

</html>
new Vue({
    el:'#lifecycle',
    data:{
        title:'hello Vue'
    },
    beforeCreate:function(){
        console.log("beforeCreate()",this.title);
    },
    created:function(){
        console.log('created()',this.title);
    },
    beforeMount:function(){
        console.log('beforeMount()',this.$el);
    },

    // confusion
    mounted:function(){
        setTimeout(function(){
            console.log('mounted()',this.$el); // result: undefined
        },3000);
       // console.log('mounted()',this.$el);
       // result : <div id="lifecycle">...</div>
    }
})

1 Ответ

0 голосов
/ 09 ноября 2019

Вам необходимо использовать синтаксис жирной стрелки, чтобы убедиться, что this привязан правильно:

setTimeout(() => {
  console.log('mounted()', this.$el);
}, 3000);

См. Как используется метод JavaScript 'bind'? для связанныхИнформация.

...