Vue前端框架12 组件生命周期、生命周期的应用、动态组件、组件保持存活、异步组件、依赖注入、Vue应用原理

文章目录

一、组件生命周期

每个Vue组件在创建时需要经历一系列的初始化步骤,比如设置侦听,编译模板,挂载实例到DOM,或者数据改变时更新DOM。

在这个过程中,也会运行生命周期钩子函数,可以让我们在特定阶段运行自己的代码。

javascript 复制代码
<template>
  <h3>组件的生命周期</h3>
  <p>{{message}}</p>
  <button @click="updateMessage">更新数据</button>

</template>

<script>
/**
 * 生命周期函数分为四个时期
 * 创建期:beforeCreate、created
 * 挂载期:beforeMount、mounted
 * 更新期:beforeUpdate、updated
 * 销毁期:beforeUnmount、unmounted
 */
export default {
  name: 'App',
  data(){
    return{
      message:"更新之前"
    }
  },
  methods:{
    updateMessage(){
      this.message="更新之后"
    }
  },
  beforeCreate(){
    console.log("组件创建之前")
  },
  created(){
    console.log("组件创建")
  },
  beforeMount(){
    console.log("组件挂载之前")
  },
  mounted(){
    console.log("组件挂载")
  },
  beforeUpdate(){
    console.log("组件更新之前")
  },
  updated(){
    console.log("组件更新")
  },
  beforeUnmount(){
    console.log("组件销毁之前")
  },
  unmounted(){
    console.log("组件销毁")
  }
}
</script>

二、生命周期的应用

主要俩个应用:

1、通过ref获取元素DOM结构

2、模拟网络请求渲染数据

javascript 复制代码
<template>
  <h3 ref="title">组件的生命周期</h3>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      message:"更新之前"
    }
  },
  beforeMount(){
    console.log("组件挂载之前")
    console.log(this.$refs.title)
  },
  mounted(){
    console.log("组件挂载")
    console.log(this.$refs.title)
  }
}
</script>

三、动态组件

javascript 复制代码
<template>
  <Component :is="tabComponent"></Component>
  <button @click="changeHandle">切换组件</button>
</template>

<script>
import ComponentA from "@/components/componentA";
import ComponentB from "@/components/ComponentB";
export default {
  name: "ComponentMain",
  components: {ComponentB, ComponentA},
  data(){
    return{
      tabComponent:ComponentA
    }
  },
  methods:{
    changeHandle(){
      this.tabComponent= this.tabComponent=="ComponentA" ? "ComponentB":"ComponentA"
    }
  }
}
</script>

<style scoped>

</style>

四、组件保持存活

在使用上面说的component:is 在多个组件之间切换时,被切换的组件会被卸载

可以通过keep-alive 组件强制被切换掉的组件依然保持存活状态

javascript 复制代码
<template>
  <keep-alive>
    <Component :is="tabComponent"></Component>
  </keep-alive>
  <button @click="changeHandle">切换组件</button>
</template>

<script>
import ComponentA from "@/components/componentA";
import ComponentB from "@/components/ComponentB";
export default {
  name: "ComponentMain",
  components: {ComponentB, ComponentA},
  data(){
    return{
      tabComponent:ComponentA
    }
  },
  methods:{
    changeHandle(){
      this.tabComponent= this.tabComponent=="ComponentA" ? "ComponentB":"ComponentA"
    }
  }
}
</script>

<style scoped>

</style>
javascript 复制代码
<template>
  <h3>ComponentA</h3>
  <p>{{message}}</p>
  <button @click="changeHandle">切换数据</button>
</template>
<script>
  export default {
    data(){
      return{
        message:"老数据"
      }
    },
    methods:{
      changeHandle(){
        this.message="新数据"
      }
    }
  }
</script>

五、异步组件

Vue通过defineAsyncComponent方法来实现此功能

javascript 复制代码
<template>
  <keep-alive>
    <Component :is="tabComponent"></Component>
  </keep-alive>
  <button @click="changeHandle">切换组件</button>
</template>

<script>
import ComponentA from "@/components/componentA";
//实现异步加载组件
import {defineAsyncComponent} from "vue";
const ComponentB=defineAsyncComponent(()=>
  import("@/components/ComponentB")
)
export default {
  name: "ComponentMain",
  components: {ComponentB, ComponentA},
  data(){
    return{
      tabComponent:ComponentA
    }
  },
  methods:{
    changeHandle(){
      this.tabComponent= this.tabComponent=="ComponentA" ? "ComponentB":"ComponentA"
    }
  }
}
</script>

<style scoped>

</style>

六、依赖注入

prop只可以进行逐层透传

provide和inject可以帮助我们解决逐层透传带来的复杂操作

javascript 复制代码
<template>
  <Cpeople2></Cpeople2>
</template>

<script>
//注意 provide和inject只可以上传下 不可以反向
import Cpeople2 from "@/components/Cpeople2";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Cpeople1",
  data(){
    return{
      message:"爷爷的财产"
    }
  },
  // provide:{
  //   message:"爷爷的财产"
  // },
  provide(){
    return{
      message:this.message
    }
  },
  components: {Cpeople2}
}
</script>

<style scoped>

</style>
javascript 复制代码
<template>
  <P>{{message}}</P>
  <P>{{fullMessage}}</P>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Cpeople3",
//  通过 inject 获得 祖宗的provide
  inject:["message"],
  data(){
    return{
      fullMessage:this.message
    }
  }
}
</script>

<style scoped>

</style>

也可以从根开始传

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'

const app=createApp(App)
//注入全局数据
app.provide("gData","全局数据")

app.mount('#app')

七、Vue应用

每个Vue应用都是从createApp函数创建的一个新的应用实例

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'

const app=createApp({
//根组件选项
})
//注入全局数据
app.provide("gData","全局数据")

app.mount('#app')

一般我们都用App.vue作为我们的根组件

只有调用了mount()方法后才可以渲染出来

公共资源存放在src目录下的assets文件夹下

主要的入口就是index,html文件

相关推荐
阳树阳树1 分钟前
signal-新的状态管理模式
前端·javascript
fakaifa2 分钟前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
爱摄影的程序猿5 分钟前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
木木黄木木18 分钟前
HTML5手写签名板项目实战教程
前端·html·html5
姑苏洛言41 分钟前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家43 分钟前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya1 小时前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me1 小时前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__1 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭1 小时前
需求:对表格操作列中的操作进行局部刷新
前端