Vue父子组件声明周期_父子应用声明周期-CSDN博客

本文链接：https://blog.csdn.net/qq_38557202/article/details/82798656

记录下，避免忘了，还要做

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue</title>
	<script src="./vue/vue.js"></script>
	<script src="./vue/vue-router.min.js"></script>
	<style>
	</style>
</head>
<body>
	<div id="app">
		<span @click="childmsg = 'childnewsmsg'">{{ msg }}</span>
		<cpt-child :msg="childmsg"></cpt-child>
	</div>
</body>
<script>
var child = Vue.extend({
	template: '<div>cpt-child:{{ msg }}</div>',
	props: {
		msg: String
	},
	beforeCreate: function(){
		console.log('beforecreate parent')
	},	
	created: function(){
		console.log('created parent')
	},
	beforeMount: function(){
		console.log('beforeMount parent')
	},
	mounted: function(){
		console.log('mounted parent')
	},
	beforeUpdate: function(){
		console.log('beforeUpdate parent')
	},
	updated: function(){
		console.log('updated parent')
	},
	beforeDestroy: function(){
		console.log('beforeDestroy parent')
	},
	destroyed: function(){
		console.log('destroyed parent')
	}
})
var vm = new Vue({
	el: '#app',
	data: {
		msg: 'msg',
		childmsg: 'childmsg'
	},
	watch: {
		childmsg: function(newVal,oldVal){
			console.log('watch change') 
		}
	},
	components: {
		'cpt-child': child
	},
	beforeCreate: function(){
		console.log('beforecreate child')
	},	
	created: function(){
		console.log('created child')
	},
	beforeMount: function(){
		console.log('beforeMount child')
	},
	mounted: function(){
		console.log('mounted child')
	},
	beforeUpdate: function(){
		console.log('beforeUpdate child')
	},
	updated: function(){
		console.log('updated child')
	},
	beforeDestroy: function(){
		console.log('beforeDestroy child')
	},
	destroyed: function(){
		console.log('destroyed child')
	}	
})
</script>
</html>