深入理解mounted函数

小蓝 • 2024-12-24 13:13 • 编程

一、mounted函数的基本概念

mounted函数是Vue.js中常用的一个生命周期函数，它在实例挂载后调用，此时DOM已经被渲染出来了。mounted函数可以用来进行一些初始数据的请求和UI的操作。


new Vue({
  el: '#app',
  mounted: function () {
    // Do something when the instance has been mounted
  }
})

二、mounted函数的作用

1.进行数据初始化操作

2.调用其他组件方法、获取其他组件属性

3.在DOM渲染完毕后进行操作

4.从服务端加载初始数据

5.调用第三方插件


new Vue({
  el: '#app',
  data: {},
  mounted: function () {
    // 初始化数据
    this.loadData()
    // 调用其他组件方法
    this.$refs.component1.method1()
    // 获取其他组件属性
    console.log(this.$refs.component1.property1)
    // 加载初始数据
    this.$http.get('/api/data').then(response => {
      this.data = response.data
    })
    // 调用第三方插件
    $('.my-selector').myPlugin()
  }
})

三、mounted函数与异步操作的关系

mounted函数可以用于进行异步操作，比如请求数据、获取元素等。异步操作完成之后，可以根据需要进行页面的刷新或操作。需要注意的是，如果异步操作的执行时间过长，可能会导致DOM渲染缓慢甚至卡顿。

四、mounted函数与组件生命周期的关系

mounted函数是在组件挂载后调用的生命周期函数。组件的生命周期可以分为三个阶段：创建、更新和销毁。mounted函数所在的挂载阶段属于创建阶段。在创建阶段，Vue.js会进行组件和虚拟DOM的初始化，包括实例化、注入、编译、挂载等过程，此时组件已经绑定了相应的数据和方法，但页面还未渲染出来。

五、mounted函数案例分析

以下是一个使用mounted函数进行异步操作的示例代码：


new Vue({
  el: '#app',
  data: {
    content: null
  },
  mounted () {
    this.loadContent()
  },
  methods: {
    loadContent () {
      axios.get('/api/content')
        .then((response) => {
          this.content = response.data
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
})

这段代码中，mounted函数会在组件挂载完成后调用，然后会调用loadContent方法异步地从服务端加载博客文章的内容，加载完成后将内容赋值给content变量，最终在页面上渲染出来。

六、mounted函数与定时器的关系

在mounted函数中使用定时器可以实现定时执行一些操作，例如定时请求数据、刷新页面等。需要注意的是，如果定时器的执行时间过长，可能会导致页面卡顿或甚至崩溃。

七、结语

本文详细介绍了mounted函数的基本概念、作用、与异步操作的关系、与组件生命周期的关系、案例和与定时器的关系。深入理解mounted函数对于Vue.js的开发者来说非常重要，能够更好地掌握Vue.js的生命周期和组件挂载的过程。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/290735.html