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

一、组件生命周期

每个Vue组件在创建时需要经历一系列的初始化步骤，比如设置侦听，编译模板，挂载实例到DOM，或者数据改变时更新DOM。
在这个过程中，也会运行生命周期钩子函数，可以让我们在特定阶段运行自己的代码。

<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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

二、生命周期的应用

主要俩个应用：
1、通过ref获取元素DOM结构
2、模拟网络请求渲染数据

<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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三、动态组件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

四、组件保持存活

在使用上面说的component:is 在多个组件之间切换时，被切换的组件会被卸载
可以通过keep-alive 组件强制被切换掉的组件依然保持存活状态

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

五、异步组件

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

六、依赖注入

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

也可以从根开始传

import { createApp } from 'vue'
import App from './App.vue'

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

app.mount('#app')


1
2
3
4
5
6
7
8
9
10

七、Vue应用

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

import { createApp } from 'vue'
import App from './App.vue'

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

app.mount('#app')


1
2
3
4
5
6
7
8
9
10
11
12

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

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

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

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