gpt4 book ai didi

javascript - 为什么在以下情况下 DOM 渲染后会出现未定义的情况?

转载 作者:行者123 更新时间:2023-11-28 03:24:27 25 4
gpt4 key购买 nike

文章11 Vue.js Lifecycle Hooks中的演示

我很困惑为什么我在 3 秒后无法在 mounted 中获取 DOM,而如果立即 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>
}
})

最佳答案

您需要使用粗箭头语法来确保 this 正确绑定(bind):

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

参见What is the use of the JavaScript 'bind' method?获取相关信息。

关于javascript - 为什么在以下情况下 DOM 渲染后会出现未定义的情况?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58777707/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com