vue的生命周期函数

最新推荐文章于 2023-08-09 10:07:46 发布

艺术就是派大星220

最新推荐文章于 2023-08-09 10:07:46 发布

阅读量156

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Rossbort/article/details/120319231

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

生命周期函数〔俗称构子函数),是根据Vue的整个渲染机制，在渲染的每一个关键节点上,提供对应的函数,让我们进行一些相关的操作的

Vue.component私有组件每—次组件的调用都相当于new Vue一次

使用组件时 vue会把template语法编译(生成一个虚拟DOMvm._vnode ) , vue底层开始把虚拟DOM变为真实的DOM( DOM对象）【dom diff]】,最后把真实DOM渲染到页面中

updata阶段：第—次生成虚拟DOM_vnode后（会存储起来).开始变为真实DOM，第一次渲染页面完成:当数据有更新，重新生成虚拟DOM,会拿这一次的虚拟DOM和上一次的进行对比,生成对应的补丁包【DOM DIFF]，最后把不同的部分生成真实的DOM进行重新渲染

destroyed阶段：销毁的时候，页面已经渲染的真实DOM不动(路由跳转除外）,其它之前挂载的东西都消失了

上图：

<body>
	<div id="app">
		<h3 id="title">{{name}}</h3>
	</div>

	<!-- IMPORT JS -->
	<script src="node_modules/vue/dist/vue.min.js"></script>
	<script>
		let vm = new Vue({
			el: '#app',
			data: {
				name: "珠峰培训",
				age: 11
			},
			beforeCreate() {
				// 创建实例之前：实例还没有创建出来呢
				// console.log("BEFORE CREATE", this.name);
				// => 此时实例都没有（或者数据都没有挂载呢），做啥事都没用，所以项目中我们一般也就在这里：根据一些信息的判断，决定是否继续向下渲染，如果不需要向下，则跳转到其它的组件 （可能会做一些组件是否渲染的权限校验：路由中的导航守卫可能更适合干这个事情）
			},
			created() {
				// 实例创建完成：DATA/METHODS等已经挂载到实例上了
				// console.log("CREATED", this.name);
				// =>对于页面中的数据需要从服务器获取动态绑定，因为获取数据是异步的，在没有获取数据之前，我们就会下渲染组件，这样导致第一次渲染组件其实是没有拿到数据的；拿到数据后通过修改数据控制组件重新渲染；为了让页面展示数据的速度更快一些，我们尽可能把获取数据提前（一般都是在created发送异步请求数据）
			},
			beforeMount() {
				// 第一次渲染DOM之前：此时页面中还没有DOM元素呢
				// console.log("BEFORE MOUNT", document.getElementById('title')); //里面内容还是 {{name}}
				// =>有的人也会在这里发送异步数据
			},
			mounted() {
				// 第一次渲染DOM之后：真实DOM渲染完了
				// console.log("MOUNTED", document.getElementById('title')); //里面内容还是 "珠峰培训"
				// =>第一次页面已经渲染完，页面中已经有我们想要的DOM信息，所以我们经常在这里做一些DOM的处理或者监听工作的
			},
			beforeUpdate() {
				// 修改新的DOM之前
				// console.log("BEFORE UPDATE");
			},
			updated() {
				// 修改新的DOM之后 
				// console.log("UPDATED");
				// =>和mounted类似，但是这里不能做一件事：修改响应数据（这样会导致修改操作的死循环）
			},
			beforeDestroy() {
				// 销毁之前
				// console.log("BEFORE DESTORY");
				// =>该保存保存，该提示提示，一些事此时不处理以后就没机会了
			},
			destroyed() {
				// 销毁之后
				// console.log("DESTORYED", this);
			}
		});
	</script>
</body>

艺术就是派大星220

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue的生命周期函数

上图：<body> <div id="app"> <h3 id="title">{{name}}</h3> </div>  <script src="node_modules/vue/dist/vue.min.js"></script> <script> let vm = new Vue({ el: '#app', ..
复制链接

扫一扫