vuemounted

在Vue中，mounted生命周期钩子函数是在组件的template成功挂载在$el中之后调用的。在这个阶段，一个完整的页面已经能够显示在浏览器中，所以在mounted方法中可以进行节点的操作。通常情况下，我们会在mounted方法中执行一些需要在页面展示过程中进行的操作，＊＊＊这时候需要不断访问后端接口查看用户是否支付成功，支付成功后进行跳转，我们就可以将查询函数的调用写在mounted函数中，并通过计时器不断调用。下面是一个示例代码：

mounted() {
  // 页面渲染之后执行,设置为3s一更新
  this.timer1 = setInterval(() => {
    this.queryOrderStatus(this.payObj.out_trade_no)
  }, 3000);
},
methods: {
  // 支付跳转
  queryOrderStatus(orderNo) {
    orderApi.queryPayStatus(orderNo)
      .then(response => {
        if (response.data.success) {
          // 支付成功，清除定时器
          clearInterval(this.timer1)
          // 提示
          this.$message({
            type: 'success',
            message: '支付成功! 💴'
          })
          // 跳转回到课程详情页面
          this.$router.push({
            path: '/course/' + this.payObj.course_id
          })
        }
      })
  }
}

总结起来，mounted方法适用于在页面渲染完成后执行一些需要在页面展示过程中进行的操作。相比之下，created方法是在组件实例创建完成之后调用的，此时DOM还没有被渲染出来，无法进行DOM操作。因此，如果需要获取渲染出来的所有属性值或进行DOM操作，应该使用mounted。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue中created，mounted，updated详解](https://blog.csdn.net/libusi001/article/details/127354508)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue中 mounted方法在什么情况下使用和js 定时器使用](https://blog.csdn.net/weixin_39802680/article/details/114733033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]