生命周期

最新推荐文章于 2024-04-07 10:15:00 发布

Paul0755

最新推荐文章于 2024-04-07 10:15:00 发布

阅读量86

点赞数

分类专栏： Vue.js 文章标签： vue生命周期

本文链接：https://blog.csdn.net/paolo998/article/details/101317348

版权

Vue.js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Vue生命周期可以总共分为8个阶段：
beforeCreate（创建前）,
created（创建后）,
beforeMount(载入前),
mounted（载入后）,
beforeUpdate（更新前）,
updated（更新后）,
beforeDestroy（销毁前）,
destroyed（销毁后）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">{{arr}}<br>{{name}}
			<abc></abc>
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					name: "呵呵",
					arr: [1, 2],
					obj1: {
						a: 3
					}
				},
				filters: {},
				computed: {},
				methods: {},
				components: {
					'abc': {
						template: '<h1>自定义组件!</h1>'
					}
				},
				beforeCreate: function() {
					document.write("1 data属性光声明没有赋值的时候<br>")
				},
				created: function() {
					document.write("2 data属性完成了赋值<br>")
				},
				beforeMount: function() {
					document.write("3 页面上的{{name}}还没有被渲染成真正的数据<br>")
				},
				mounted: function() {
					document.write("4 页面上的{{name}}被渲染成真正的数据<br>")
				},
				beforeUpdate: function() {
					document.write("5 数据（data属性）更新之前会执行的函数<br>")
					app.$destroy()//销毁
				},
				updated: function() {
					document.write("6 数据（data属性）更新完会执行的函数<br>")
				},
				beforeDestroy: function() {
					document.write("7 实例被销毁之前会执行的函数<br>")
				},
				destroyed: function() {
					document.write("8 实例被销毁后会执行的函数<br>")
				}
			});
			Vue.set(app.$data.arr, 0, 3);  
			Vue.set(app.$data,"name","哈哈"); 
			//
		</script>
	</body>
</html>