Vue嵌套组件创建和销毁的顺序

最新推荐文章于 2024-07-19 12:00:10 发布
最新推荐文章于 2024-07-19 12:00:10 发布
阅读量1.1w 收藏 11
点赞数 4
文章标签： 前端Vue vue的生命周期 vue嵌套组件的创建顺序 vue vue vdom解读
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangyilinnuli/article/details/83929539
版权
本文探讨了Vue中嵌套组件的创建、挂载和销毁顺序。在组件创建过程中，beforeCreate、created和beforeMount按照从外到内的顺序执行。然而，mounted的顺序与创建相反，从内到外进行，因为Vue需要先构建内部组件的虚拟DOM。在销毁过程中，遵循从内到外的顺序，先执行最内层组件的beforeDestroy和destroyed。
摘要由CSDN通过智能技术生成

       理解生命周期和钩子函数的调用在工程中十分重要，关于Vue生命周期的理解我推荐这一遍详解Vue生命周期 。写得真不错，浅显易懂，任何初学者一看都能明白是怎么一回事。今天我当然不是来讲生命周期的，我要将的是嵌套组件的创建顺序，嵌套组件件钩子函数的执行顺序，最后是销毁顺序。闲话少说，直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试Vue</title>
    <script src="js/vue.js"></script>

</head>
<body>
    <div id="app" style="border: 1px solid red;padding: 10px">
        <div >
            根组件
            <button @click="handleClick">根组件销毁</button>
        </div>
        <a-component></a-component>
        <b-component></b-component>
    </div>
    
    <script>
        Vue.component('a-component' , {
            template : `
最低0.47元/天 解锁文章
perryhuan9
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
- 更新和销毁过程同样遵循这个顺序：父组件的更新钩子（`beforeUpdate`和`updated`）会在子组件的相应钩子之后执行，而父组件的`beforeDestroy`和`destroyed`钩子则会在子组件的相应钩子之前执行。 在使用`...
Vue销毁流程+Vue中组件的使用（嵌套）+Vue实例与组件实例+Vue中一个重要的内置关系+单文件组件的使用，尚硅谷Vue系列教程学习笔记（6）
weixin_43749999的博客
08-19 2746
本学习笔记主要包含如下内容： 051-销毁流程 052-生命周期总结 053-对组件的理解 054-非单文件组件 055-组件的几个注意点 056-组件的嵌套 057-VueComponent 058-Vue实例与组件实例 059-一个重要的内置关系 060-单文件组件
vue的页面刷新和单独组件的销毁重建
浩星
08-22 7722
首先：vue的全局页面刷新方法，原理都是一样，用v-if控制组件的状态，然后在销毁重建 //1、在app.vue中定义方法： <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view>//1、加v-if,控制整个app页面 </div&...
【Vue】深入解析 Vue 生命周期：从创建到销毁的完整流程
最新发布
lph159的博客
07-19 744
Vue 生命周期是指Vue 实例从创建到销毁的整个过程。每个 Vue 组件都有一个生命周期，在不同的生命周期阶段，可以执行特定的操作。创建阶段：Vue 实例的初始化过程。挂载阶段：将 Vue 实例挂载到 DOM 上。更新阶段：响应数据变化并更新视图。销毁阶段：Vue 实例及其所有子组件的销毁过程。
vue中对组件的生命周期的理解
weixin_41277748的博客
04-15 183
组件的生命周期简述过程 实例被创建-->【beforeCreate】--> 注入-->【created】--> 生成虚拟dom树[VNode]-->【beforeMount】--> 生成真实DOM-->【mounted】--> 已挂载-->【数据改变beforeUpdate】-->重新渲染 已挂载<--【update】<--重新渲染 已挂载-->【beforeDestroy】--> 销毁组件-->【de
Vue.js 组件销毁有几种情况？
千锋教育
03-06 7649
显式销毁：在组件实例上调用 $destroy() 方法可以显式销毁一个组件实例，它会解除所有的绑定并移除 DOM 中的元素。在组件销毁时，Vue.js 会自动执行一些生命周期钩子函数，包括 beforeDestroy() 和 destroyed()。路由切换：当使用 Vue.js 路由切换时，旧的组件实例会被销毁，新的组件实例会被创建并挂载到 DOM 中。条件渲染：当一个组件通过 v-if 或 v-show 指令被移除时，它会被销毁。父组件销毁：当一个父组件被销毁时，它的所有子组件也会被销毁。
vue中定时器的销毁和创建
weixin_44303631的博客
03-04 845
封装定时器方法
Cookbook组件形式：优化 Vue 组件的运行时性能
10-17
- `keep-alive`组件可以缓存组件实例，防止重复创建和销毁，提高性能，但要注意它也会增加内存占用。 8. **组件懒加载与按需导入**： - 使用动态导入（`import()`）和路由懒加载，只在组件实际需要时才导入，减少...
vue-devtools（vue调试插件）
05-04
3. **生命周期钩子**：显示组件的生命周期钩子调用顺序，有助于理解组件何时被创建、更新或销毁，以及相应函数的执行情况。 4. **Vue实例信息**：提供组件实例的详细信息，包括props、data、methods、computed属性...
Vue.js面试题.pdf
05-01
它解决了组件复用性和内容分发的问题，使组件能够更加灵活地嵌套和扩展。 #### 20. 如何在Vue.js中处理路由权限控制？请说明在Vue Router中如何实现路由守卫。 在Vue Router中，可以通过路由守卫实现路由权限控制...
vue从使用到源码实现教程详解
11-22
组件间的生命周期和钩子函数执行顺序在嵌套组件中尤为重要。例如，当父组件A中包含子组件B时，它们的移入和移出顺序如下： - 不使用`keep-alive`： - 进入：`canActivate` -> `init` -> `create` -> `beforeCompile...
Vue生命周期
m0_64707449的博客
06-05 234
1.vue⽣命周期的特点 创建前： beforeCreate 组件实例被创建之初，data 和 methods 中的数据还没有初始化 创建后： created 组件实例已经完全创建，data 和 methods 都已经初始化好了 挂载前： beforeMount 指令已经解析完毕，内存中已经⽣成dom树，但是尚未挂载到页⾯中去 挂载后： mounted dom渲染完毕页⾯和内存的数据已经同步 更新前： beforeUpdate 组件数据更新之前调⽤， 此时页⾯中显⽰的数据还是旧的，但 data 是最新的，
vue3组件销毁
wangzhen12138的博客
05-21 2746
在 Vue 3 中，组件的销毁通常涉及几个步骤和考虑因素。组件的销毁意味着从 DOM 中移除该组件，并清除与之相关的所有事件监听器和子组件。来控制组件的销毁与创建。这种方法能够确保组件在不再需要时被正确销毁，同时遵循 Vue 的生命周期管理。如果你需要更细粒度的控制，可以考虑使用 Vue 提供的生命周期钩子，如。方法，因为它会跳过组件的生命周期钩子，可能会导致一些难以追踪的 bug。时，Vue 会销毁该组件及其所有子组件，并从 DOM 中移除。如果你想在销毁组件之前保存其状态，并在之后恢复它，可以使用。
关于vue组件的销毁与重载
weixin_67033054的博客
11-17 5283
组件摧毁的总结
Vue父子组件生命周期的先后顺序
qq_57334853的博客
07-11 2817
Vue父子组件生命周期的先后顺序 组件的调用顺序是先父后子，渲染完成的顺序是先子后父。组件的销毁操作是先父后子，销毁完成的顺序是先子后父 初次渲染完成触发的声明周期 挂载/加载/渲染阶段 子组件更新阶段 父组件更新阶段 销毁阶段............
Vue 生命周期探索：第四篇：生命周期-销毁流程
pymxb1991的专栏
07-17 4596
Vue 生命周期-销毁流程
vue--组件机制--动态组件component
cmy741741的博客
11-27 1146
动态渲染一个组件。 <component v-bind:is="currentTabComponent"></component> 默认情况下，当组件在切换的时候都会重新创建组件，但是有些时候我们希望组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。 <keep-alive> <component v-bind:is="currentT...
Vue路由钩子在生命周期函数的体现
晨曦的博客
11-28 756
非重用组件,开始组件实例的生命周期:beforeCreate&created,beforeMount&mounted。deactivated:离开缓存组件a,或者触发a的beforeDestroy和destroyed组件销毁钩子。路由导航,keep-alive,和组件生命周期钩子结合起来,触发顺序,假设是从a组件离开,第一次进入b组件;beforeRouteLeave:路由组件的组件离开路由前的钩子,可取消路由离开。beforeRouteEnter:路由组件的组件进入路由前钩子。
vue 内置组件transition（进入&离开过渡）的使用
逆风优雅的博客
06-10 8346
Vue 提供了 的封装组件，在以下情况下，可以给任何元素和组件添加进入/离开过渡。transitionProps：事件：用法： 元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。 案例一：css过渡： 效果图： 案例二：css动画 效果图： 除了使用vue默认的动画，v-enter,v-leave-to这种，我们还可以自定义类名。 transtion也可以通过内置的钩子实现，过渡和动画效果：
vue局部组件创建和全局组件创建
05-02
在 Vue 中，我们可以通过两种方式来创建组件，即局部组件和全局组件。 局部组件创建： 局部组件是在某个组件内部定义的组件，在该组件内部可以直接使用，但在其他组件中是不可用的。 示例代码： ``` <template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from './MyComponent.vue'; export default { name: 'MyParentComponent', components: { 'my-component': MyComponent } } </script> ``` 在这个示例中，我们在 `MyParentComponent` 组件中定义了一个名为 `MyComponent` 的局部组件，并在模板中使用了它。 全局组件创建： 全局组件可以在任何组件中使用，通常在 `main.js` 或 `App.vue` 中定义。 示例代码： ``` // main.js import Vue from 'vue'; import MyComponent from './MyComponent.vue'; Vue.component('my-component', MyComponent); ``` 在这个示例中，我们在 `main.js` 中定义了一个名为 `MyComponent` 的全局组件，并使用 `Vue.component` 方法将其注册到 Vue 中。此时，在任何组件中都可以使用 `<my-component></my-component>` 标签来使用这个组件。 需要注意的是，全局组件会被注册到全局 Vue 实例中，因此会增加应用的整体大小，而局部组件则只会在需要使用时才被加载，因此更加高效。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值