关于created和mounted获取dom元素问题

最新推荐文章于 2024-04-18 09:45:16 发布

原创最新推荐文章于 2024-04-18 09:45:16 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文解析了Vue组件的created与updated阶段，说明了如何在created阶段获取特定DOM元素的限制，并强调了updated阶段可以获取所有元素的特点，帮助理解Vue生命周期的不同用途.

created

created也能获取dom元素，但是是已有的dom元素，比如子组件的created可以获取到父组件中的dom元素以及body等特殊元素，如图

created() {
    document.body.className = "addBg";
    console.log(
      "我现在在Home的created阶段 输出dom元素" +
        document.getElementsByTagName("h1")[0]
    );
    console.log(
      "我现在在Home的created阶段 输出dom元素" + document.getElementById("app")
    );
    console.log(
      "我现在在Home的created阶段 输出dom元素" +
        document.getElementsByTagName("body")[0]
    );
  },

h1是Home.vue子组件创建的，获取不到，<div id="app"></div>是父组件App.vue创建的，可以被获取

updated

updated可以获取所有dom元素

console.log(
      "我现在在Home的mounted阶段 输出dom元素" +
        document.getElementsByTagName("h1")[0]
    );
    console.log(
      "我现在在Home的mouted阶段 输出dom元素" + document.getElementById("app")
    );
    console.log(
      "我现在在Home的mouted阶段 输出dom元素" +
        document.getElementsByTagName("body")[0]
    );
}，