vue 组件加载完成回调

在Vue组件加载完成后执行回调函数，你可以使用Vue的生命周期钩子函数`mounted`来实现。`mounted`钩子函数在组件渲染到DOM后被调用，表示组件已经被挂载到页面上。

下面是一个使用`mounted`钩子函数的示例：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 在组件加载完成后执行的回调函数
    console.log('组件加载完成');
    // 执行其他操作
  }
}
</script>

在上面的示例中，当组件加载完成后，会打印出"组件加载完成"的信息。你可以在`mounted`钩子函数中执行任何你想要的操作，例如发送Ajax请求、初始化数据等。

希望对你有所帮助！如果还有其他问题，请随时提问。

相关问题

vue2子组件延迟加载

对于Vue 2，延迟加载子组件可以通过异步组件实现。异步组件允许将组件的加载推迟到它们被需要的时候。

在Vue 2中，你可以使用`Vue.component`方法来注册异步组件。下面是一个示例：

// 父组件
Vue.component('my-async-component', function (resolve) {
  // 这个特殊的 require 语法告诉 webpack
  // 自动将编译后的代码分割成不同的块，
  // 这些块将通过 Ajax 请求自动下载。
  require(['./MyAsyncComponent.vue'], resolve)
})

// 使用异步组件
<template>
  <div>
    <my-async-component></my-async-component>
  </div>
</template>

在这个示例中，`MyAsyncComponent.vue`是需要延迟加载的子组件。通过使用`Vue.component`方法注册异步组件，并传入一个回调函数，回调函数中使用`require`来异步加载组件。当父组件需要渲染`my-async-component`时，该组件才会被加载。

请注意，使用异步组件需要构建工具（如Webpack），以便将组件代码拆分成不同的块并按需加载。

vue封装图片懒加载组件

根据提供的引用内容，Vue封装图片懒加载组件的实现原理如下:

1. 首先，通过全局注册组件，将懒加载组件注册到Vue中。这个懒加载组件是一个在页面加载时不立即显示的占位组件，用于提升网页性能和用户体验。
2. 然后，使用自定义指令来实现懒加载功能。这个指令可以应用在需要懒加载的图片元素上，例如`<img v-lazy="item.src" alt="" />`。
3. 在指令的逻辑中，使用`useIntersectionObserver`函数来监听图片元素是否在可视区域内。当图片元素进入可视区域时，触发回调函数。
4. 在回调函数中，停止监听，给图片元素设置`src`属性，值为要加载的图片的路径。如果加载失败，显示默认的图片。
5. 最后，在Vue的安装方法中，将懒加载组件和指令注册到Vue中，使其可以在整个Vue应用中使用。

综上所述，以上是Vue封装图片懒加载组件的实现原理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue中实现图片懒加载的方法（一）](https://blog.csdn.net/weixin_54145360/article/details/127789692)[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%"]
- *3* [【Vue3】 vue3图片懒加载-封装自定义指令](https://blog.csdn.net/weixin_46862327/article/details/129035539)[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 ]