Vue(8)生命周期

最新推荐文章于 2023-12-21 16:18:42 发布

就是三木啊

最新推荐文章于 2023-12-21 16:18:42 发布

阅读量150

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43783419/article/details/100976889

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入vue包 -->
		<script src="lib/vue.js"></script>
	</head>
	<body>
		<!-- 创建要渲染的元素 -->
		<div id="app">
			<input type="button" name="" id="" value="button" @click="msg='NO'"/>
			<h3 id="h3">{{msg}}</h3>
		</div>
		<script>
			// 创建vue实例
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'Ok',
				},
				methods:{
					show(){
						console.log('这是个show方法')
					}
				},
				beforeCreate() {
					// console.log(this.msg);
					// this.show();
				},
				created() {
					// console.log(this.msg);
					// this.show();
				},
				// beforeMount() {
				// 	console.log(document.getElementById('h3').innerText)
				// },
				// mounted() {
				// 	console.log(document.getElementById('h3').innerText)
				// },
				// beforeUpdate() {
				// 	console.log('界面上的数据：' + document.getElementById('h3').innerText);
				// 	console.log('data中的数据：' + this.msg)
				// },
				updated() {
					console.log('界面上的数据：' + document.getElementById('h3').innerText);
					console.log('data中的数据：' + this.msg)
				},
			})
		</script>
	</body>
</html>

什么是生命周期：从vue实例创建、运行、到销毁期间，总是有一些事件，这些事件统称为生命周期
生命周期钩子：就是生命周期时间的别名，也为生命周期函数；
主要的生命周期函数有：
- beforeCreate：data和methods还未被初始化前执行。
  vue实例中：
```
		beforeCreate() {
					console.log(this.msg);
					this.show();
				},
```
  页面上：
- creatde：在data和methods初始化完成后执行。
  vue实例中：
```
  	created() {
  				console.log(this.msg);
  				this.show();
  			},
```
  页面上：
- beforeMounted：内存中的模板没有渲染到页面之前执行。
  vue实例中：
```
  	beforeMount() {
  		console.log(document.getElementById('h3').innerText)
  	},
```
  页面上：
- moutend：在内存中的模板渲染到页面之后执行。
  vue实例中：
```
  	mounted() {
  		console.log(document.getElementById('h3').innerText)
  	},
```
  页面上：
- beforeUpdate：data数据更新，界面中的显示数据还没更新时执行。
  vue实例中：
```
  beforeUpdate() {
  		console.log('界面上的数据：' + document.getElementById('h3').innerText);
  		console.log('data中的数据：' + this.msg)
  	},
```
  页面上：
- update：data和界面显示数据保持同步时执行。
  vue实例中：
```
  updated() {
  		console.log('界面上的数据：' + document.getElementById('h3').innerText);
  		console.log('data中的数据：' + this.msg)
  	},
```
  页面上：
- beforeDestroy：vue实例已经从运行阶段到销毁阶段时执行，实例身上的data，methods，指令，过滤器…都处于可用状态。
- destroy：vue销毁后执行，所有的data，methods，指令，过滤器…，都不可用。

就是三木啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(8)生命周期

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>  <script src="lib/vue.js"></script> </head> &...
复制链接

扫一扫