vue里面的mounted

在 Vue.js 中，mounted 是一个生命周期钩子函数，它会在 Vue 实例挂载之后（即元素渲染完毕并且可以访问）立即被调用。这个钩子函数常用于在视图渲染后执行一些操作，例如初始化数据、调用API等等。

对于 mounted 生命周期钩子，它在所有钩子函数中被调用最早，也是最常用的钩子函数之一。使用 mounted 钩子函数，可以确保 Vue 实例已经完全加载并准备好了供我们使用。在此之后，我们可以执行许多操作，例如修改数据，访问外部API或手动绑定事件处理程序。

new Vue({
  el: '#app',mounted() {
    console.log('Vue实例已经加载完毕')
  }
})

当 Vue 实例首次渲染到 DOM 后，mounted 钩子函数被调用。在这个例子中，我们简单地通过控制台打印一条信息，证明 Vue 实例已经加载成功。

在 mounted 钩子函数中，我们还可以访问 DOM 元素。有时候，我们需要修改一些元素或者获取元素的属性，例如下面的例子中，我们添加了一个名为 "text" 的 data 属性，然后在 mounted 钩子函数中获取这个元素的文本值，并将它保存到 data 中。

new Vue({
  el: '#app',data: {
    text: ''
  },mounted() {
    this.text = document.getElementById('myElement').textContent
  }
})

在这个例子中，我们将 Vue 实例的 data 对象添加了一个名为 text 的属性。然后在 mounted 钩子函数中，我们通过getElementById() 方法获取元素 "myElement" 的文本内容，并且将这个文本内容保存到 Vue 实例的 data 对象中。这个例子很简单，但是你可以利用这个功能来完成更复杂的任务。

需要注意的是，mounted 钩子函数只会被调用一次。Vue 实例在创建之后，只有在重新创建实例时才会再次调用 mounted 钩子函数。因此，在 mounted 钩子函数中执行的操作是永久性的，无需担心它们会被重复调用。