Vue入门（二十六）

todolist之基本结构——介绍常用生命周期

开始编写代码

        准备好上一讲的代码，打开 StartView.vue 文件

setup

setup 常用生命周期之一，不需要直接引入，组件创建的生命周期

代码

	export default defineComponent({
		name: 'Start', // 组件名称
		setup() { // 组件创建的过程
			console.log(111); // 即使在setup什么也不做它也会执行
			return {
				
			}
		},
	})

效果

onMounted

mounted

在实例挂载完成后被调用。

你可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。
下表包含如何在 setup () 内部调用生命周期钩子：

选项式 API	Hook inside setup
mounted	onMounted

onMounted 组件挂载的生命周期，常用生命周期之一

作用：

发送请求（和后端交互获取数据）

数据初始化操作（接收路由传递的参数）

代码

<script>
	// 编写 js 内容
	import {
		defineComponent,
		ref,
		onMounted
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'

	export default defineComponent({
		name: 'Start', // 组件名称
		setup() { // setup 常用生命周期之一，不需要直接引入，代表组件创建的过程
			// console.log(111); // 即使在setup什么也不做它也会执行
			onMounted(() => { // 组件挂载的生命周期
				// 组件挂载的过程
				// 数据 DOM...
				console.log('onMounted');
				// 发请求（和后端交互获取数据）
				// 数据初始化操作 接收路由传递的参数
			})
			console.log('setup');
			return {
				
			}
		},
	})
</script>

效果

可以看出 setup 在 onMounted 的前面执行，与代码的顺序无关

接收路由传递的参数（HomeView.vue）

可以先看看路由传参

代码

<template>
	<div>
		{{num}} --- {{name}} --- {{obj}}
	</div>
</template>

<script>
	import {
		defineComponent,
		computed,
		ref,
		onMounted
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		useRouter,
		useRoute
	} from 'vue-router'

	export default defineComponent({
		name: 'HomeView', // 组件名称
		setup() {
			// router是全局路由对象
			let router = useRouter()
			// route是当前路由对象
			let route = useRoute()
			// 接收路由传递的参数
			let num = ref(null)
			let name = ref('')
			let obj = ref({})
			onMounted(() => {
				num.value = route.params.num
				name.value = route.params.name
				obj.value = JSON.parse(route.params.obj)
			})
			return {
				num,
				name,
				obj
			}
		}
	})
</script>

obj: JSON.stringify(obj.value)

效果

onUnmounted

unmounted

官网说明：卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
你可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。
下表包含如何在 setup () 内部调用生命周期钩子：

选项式 API	Hook inside setup
unmounted	onUnmounted

onUnmounted 组件卸载时的生命周期，常用生命周期之一

作用：

清除定时器、闭包函数...

代码（StartView.vue）

<script>
	import {
		defineComponent,
		ref,
		onMounted,
		onUnmounted
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'

	export default defineComponent({
		name: 'Start',
		setup() { 
			onUnmounted(() => {
				// 组件卸载时的生命周期
				console.log('onUnmounted');
			})
			return {
				
			}
		},
	})
</script>

效果

跳转路由后就会执行onUnmounted

---

视频学习地址

课程导学，vue3.0实现todolist 教程-慕课网 (imooc.com)