vue2知识点————(声明周期,vue动态组件 )

vue2的知识点,更多前端知识在主页,还有其他知识会持续更新

初始化阶段

beforeCreate:在组件初始化完成后立即调用

会在实例初始化完成,props解析完成之后,data()和computed等选项处理之前立即调用

Created :在组件实例处理完所有状态相关的选项后调用

场景: 网络请求, 注册全局事件

这个钩子被调用时,以下内容已完成设置:响应式数据,计算属性,方法和侦听器,

但是此时挂载阶段未开始,因此$el属性不可用

挂载阶段

beforeMount :在组件被挂载之前调用

这个钩子被调用时,组件已经完成了其相应式状态的设置,但还没有创建dom节点,它即将首次执行dom渲染过程

场景:预处理data,不会触发updata钩子函数

Mounted :在组件被挂载之后调用

场景:挂载后真实DOM

更新阶段

beforeUpdate 在组件即将因为一个响应式状态更而更新其DOM树之前调用

Updated 在组件因为一个响应式状态变更而更新dom树其dom树之后调用

销毁阶段

beforeDestroy() 生命周期钩子函数被执行

在实例销毁之前被调用。在这个阶段,实例仍然完全可用,可以访问到所有数据和方法。

Destrodyed

在实例销毁后被调用。此时,实例中的所有东西都已被解绑定,事件监听器已被移除,所有子实例也已被销毁。

vue动态组件

动态组件在 Vue.js 中是一种非常有用的功能,它允许你根据不同的条件渲染不同的组件。Vue 提供了多种方式来实现动态组件,主要包括以下几种方法:

使用 <component> 元素

Vue 中的 <component> 元素可以动态地绑定到不同的组件上,通过一个属性来指定当前需要渲染的组件。

复制代码
<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

使用 v-ifv-else

通过 v-ifv-else 指令,你可以根据条件切换不同的组件。

复制代码
<template>
  <div>
    <ComponentA v-if="isComponentAVisible" />
    <ComponentB v-else />
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      isComponentAVisible: true
    };
  },
  methods: {
    toggleComponent() {
      this.isComponentAVisible = !this.isComponentAVisible;
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

使用 :is 属性

你也可以在动态组件上直接使用 :is 属性来动态绑定组件名称。

复制代码
<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: ComponentA
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === ComponentA ? ComponentB : ComponentA;
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
}
</script>
相关推荐
在路上`几秒前
前端学习之后端java小白(三)-sql外键约束一对多
java·前端·学习
Pu_Nine_91 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
東雪蓮☆2 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵2 小时前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
柯南二号2 小时前
【大前端】 断点续传 + 分片上传(大文件上传优化) 的前端示例
前端
前端小超超2 小时前
如何配置capacitor 打包的安卓app固定竖屏展示?
android·前端·gitee
xiaopengbc2 小时前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君2 小时前
React中台系统如何嵌入到业务系统中
前端
Slice_cy2 小时前
不定高虚拟列表
前端
m0_748461392 小时前
Spring Boot + Vue 项目中使用 Redis 分布式锁案例
vue.js·spring boot·redis