Vue3从零开始系列-06_数据结构&生命周期

最新推荐文章于 2024-11-15 20:51:51 发布

NormalCode

最新推荐文章于 2024-11-15 20:51:51 发布

阅读量236

点赞数 1

分类专栏： Vue3从零开始系列文章标签：数据结构 vue.js

本文链接：https://blog.csdn.net/qq_28809149/article/details/120178827

版权

Vue3从零开始系列专栏收录该内容

8 篇文章 1 订阅

订阅专栏

这篇博客探讨了Vue3中的数据结构和组件化，通过实例展示了如何构建组件树。同时，详细阐述了Vue组件的生命周期，包括beforeCreate、created、beforeMount、mounted等各个阶段，并通过代码演示了数据变化时的生命周期触发情况。文章强调理解这些概念对于掌握Vue的架构至关重要。

摘要由CSDN通过智能技术生成

这里我走马观花的说一下数据结构和生命周期
具体，可以看下官方
但我个人感觉有点不好理解。说说我的看法。

数据结构

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>05_VUE3_Study_组件化应用构建</title>
	<meta charset="utf-8">
	<meta author="Daniel_shi">
</head>
<body>
	<div id="app">
		
		<ul>
			<todo-item v-for="book in books" v-bind:book="book" v-bind:key="book.id"></todo-item>
		</ul>


	</div>


</body>
</html>

<script src="vue.global.min.js"></script>
<script type="text/javascript">
	// 配置
	var appConfig = {
		data(){
			return{
				books:[
					{	id:1, name:"《鹿鼎记》", author:"金庸"},
					{	id:2, name:"《假如给我三天光明》", author:"海伦·凯勒"},
					{	id:3, name:"《安徒生童话》", author:"安徒生"},
				]
			}

		},

	};

	// 创建对象
	var app = Vue.createApp(appConfig);

	// 模板名称
	var componentName = "todo-item";

	// 模板配置
	var componentConfig = {
		props:['book'],
		template:'<li style="border:2px solid green">{{ book.name }} - {{ book.author }}</li>'
	}

	// 定义组件
	app.component(componentName,componentConfig);


	// 挂到DOM元素上
	app.mount("#app");
</script>

拿之前的代码举例，

Vue的大体数据结构也是一颗树，不停的往树上加枝干Component。

app.component(componentName,componentConfig);
app.component(componentName2,componentConfig2);
app.component(componentName3,componentConfig3);
....
app.component(componentNameN,componentConfigN);

然后组件Component也可以给自己加Component。最后形成一颗树。

生命周期

顺序，选择（分支），循环。代码执行的先后循环。这步做完了，下一步改干嘛。
在这里插入图片描述

good，看不懂。

直接上代码。

<!DOCTYPE html>
<html>
<head>
	<title>06_VUE3_Study_数据结构&生命周期</title>
	<meta charset="utf-8">
	<meta author="Daniel_shi">
</head>
<body>
	<div id="app">
		
	</div>

</body>
</html>

<script src="vue.global.min.js"></script>
<script type="text/javascript">
	// 配置
	var appConfig = {
		data(){
			return{
				a : 123
			}
		},
		beforeCreate(){
			console.log("Step: beforeCreate");
		},
		created(){
			console.log("Step: created");
		},
		beforeMount(){
			console.log("Step: beforeMount");
		},
		mounted(){
			console.log("Step: mounted");
		},
		beforeUpdate(){
			console.log("Step: beforeUpdate");
		},
		updated(){
			console.log("Step: updated");
		},
		beforeMount(){
			console.log("Step: beforeMount");
		},
		unmounted(){
			console.log("Step: unmounted");
		},

	};

	// 创建对象
	var app = Vue.createApp(appConfig);

	// 挂到DOM元素上
	var vm = app.mount("#app");

	console.log(vm.$data.a);
	console.log(vm.a);

	vm.a = 15;

	console.log(vm.$data.a);
	console.log(vm.a);


	// 解绑
	app.unmount();
</script>

在这里插入图片描述

一步一步的打印了，所以至少知道原来这个图说的是，一个流程图。方法写到对应的批次里面就好了。

这里有些是没有触发的，比如updated。这时候你要看图了
在这里插入图片描述
When data changes当数据改变。但我已经修改了啊， vm.a = 15;打印出来也修改了啊？？

后面再说。
直接复制代码
看用法

<!DOCTYPE html>
<html>
<head>
	<title>06_VUE3_Study_数据结构&生命周期</title>
	<meta charset="utf-8">
	<meta author="Daniel_shi">
</head>
<body>
	<div id="app">
		{{ a }}
	</div>

</body>
</html>

<script src="vue.global.min.js"></script>
<script type="text/javascript">
	// 配置
	var appConfig = {
		data(){
			return{
				a : 123
			}
		},
		beforeCreate(){
			console.log("Step: beforeCreate");
		},
		created(){
			console.log("Step: created");
		},
		beforeMount(){
			console.log("Step: beforeMount");
		},
		mounted(){
			console.log("Step: mounted");
			this.a++;
		},
		beforeUpdate(){
			console.log("Step: beforeUpdate");
		},
		updated(){
			console.log("Step: updated");
		},
		beforeMount(){
			console.log("Step: beforeMount");
		},
		unmounted(){
			console.log("Step: unmounted");
		},

	};

	// 创建对象
	var app = Vue.createApp(appConfig);

	// 挂到DOM元素上
	var vm = app.mount("#app");

	console.log(vm.$data.a);
	console.log(vm.a);

	vm.a = 15;

	console.log(vm.$data.a);
	console.log(vm.a);


	// 解绑
	//app.unmount();
</script>