Vue (三) 生命周期--钩子函数

最新推荐文章于 2025-07-03 15:39:44 发布

久醉绕心弦，

最新推荐文章于 2025-07-03 15:39:44 发布

阅读量577

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_42262081/article/details/120449401

生命周期

Vue官网生命周期的描述
在这里插入图片描述

钩子函数

1. beforeCreate
创建Vue实例化之前所调用的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<h1>{
  
  {message}}</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
     
     
				el: "#app",
				data: {
     
     
					message: "Vue"
				},
				beforeCreate: function() {
     
     
					console.group('------beforeCreate--vue创建前状态------');
					console.log("el     : " + this.$el); //undefined
					console.log("data   : " + this.$data); //undefined 
					console.log("message: " + this.message)
				},
			})
		</script>
	</body>
</html>

在这里插入图片描述
2. created
实例创建完成，此时可以访问实例中的data的属性和methods中的方法，但不能操作dom。因为页面还未加载成功，页面未显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<h1>{
  
  {message}}</h1>