vue里面的mounted

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

vue里面的mounted

对于 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 钩子函数中执行的操作是永久性的,无需担心它们会被重复调用。

相关文章

这篇文章我们将通过debug源码的方式来带你搞清楚defineAsync...
欧阳老老实实的更新自己的高质量vue源码文章,还被某2.6k st...
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个...
组合式 (Composition) API 的一大特点是“非常灵活”,但也因...
相信你最近应该看到了不少介绍Vue Vine的文章,这篇文章我们...
前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文...