Vue从生到死

Vue官网生命周期图
爱他就要把它刻在身上。哈哈

探索生命周期

Vue从生到死_第1张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{message}}</h1>
			<h2 :class="classstyle">类名绑定</h2>
		</div>
		<script type="text/javascript">
			let app = new Vue({
				el:'#app',
				data(){
					return{
						message:"嘿嘿嘿",
						classstyle:"red"
					}
				},
				beforeCreate() {
					console.log("beforeCreate:创建之前")
					console.log("数据:"+this.message)
					console.log("函数"+this.clickEven)
					console.log("------------------------------------")
				},
				created() {
					console.log("Created:创建之后")
					console.log("数据:"+this.message)
					console.log("函数"+this.clickEven)
					console.log("------------------------------------")
				},
				beforeMount() {
					console.log("beforeMount:渲染前")
					console.log("数据:"+this.message)
					console.log("函数"+this.clickEven)
					console.log(document.querySelector('.red'))
					console.log("------------------------------------")
				},
				mounted() {
					console.log("mounted:渲染后")
					console.log("数据:"+this.message)
					console.log("函数"+this.clickEven)
					console.log(document.querySelector('.red'))
					console.log("------------------------------------")
				},
				beforeUpdate() {
					console.log("beforeUpdate:更新前")
					console.log("数据:"+this.message)
					console.log("函数"+this.clickEven)
					console.log(document.querySelector('.red'))
					console.log("------------------------------------")
				},
				updated() {
					console.log("updated:更新后")
					console.log("数据:"+this.message)
					console.log("函数"+this.clickEven)
					console.log(document.querySelector('.red'))
					console.log("------------------------------------")
				},
				methods:{
					clickEven(){
						console.log("我是方法")
					}
				}
			})
		</script>
	</body>
</html>




Vue从生到死_第2张图片
更新值的情况:
Vue从生到死_第3张图片
更新属性:
Vue从生到死_第4张图片

Vue 组件 探索生命周期:

全局注册的组件:

Vue.component('hello-component',{
	template:'

{{msg}}

'
, data(){ return { msg:"我是子组件哟" } } })

全局注册的组件可以在任何vue实例中使用,又因为组件是可以复用的vue实例,所以他们与new Vue具有相同的参数
挂载子组件到vue实例中:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<button @click="destoy">父组件按钮销毁子组件</button>
			<hello-component v-if="isShow"></hello-component>
		</div>
		<script type="text/javascript">
			//创建子组件:
			let con1 = Vue.component('hello-component',{
				template:'

{{msg}}

子组件属性绑定

'
, data(){ return { msg:"我是子组件哟", style:"red" } }, beforeCreate() { console.log("beforeCreate:创建之前") console.log("数据:"+this.msg) console.log("属性: "+document.querySelector('.red')) console.log("------------------------------------") }, created() { console.log("Created:创建之后") console.log("数据:"+this.msg) console.log("属性: "+document.querySelector('.red')) console.log("------------------------------------") }, beforeMount() { console.log("beforeMount:渲染前") console.log("数据:"+this.msg) console.log("属性: "+document.querySelector('.red')) console.log("------------------------------------") }, mounted() { console.log("mounted:渲染后") console.log("数据:"+this.msg) console.log("属性: "+document.querySelector('.red')) console.log("------------------------------------") }, beforeUpdate() { console.log("beforeUpdate:更新前") console.log("数据:"+this.msg) console.log("属性: "+document.querySelector('.red')) console.log("------------------------------------") }, updated() { console.log("updated:更新后") console.log("数据:"+this.msg) console.log("属性: "+document.querySelector('.red')) console.log("------------------------------------") }, beforeDestroy() { console.log("beforeDestroy:销毁前") console.log("数据:"+this.msg) console.log("属性: "+document.querySelector('.red')) console.log("------------------------------------") }, destroyed() { console.log("beforeDestroy:销毁后") console.log("数据:"+this.msg) console.log("属性: "+document.querySelector('.red')) console.log("------------------------------------") }, methods:{ changeMsg(){ this.msg = 'zizujianyo' }, changeStyle(){ this.style = 'bule' } } }) let app = new Vue({ el:'#app', data(){ return{ isShow:true } }, methods:{ destoy(){ this.isShow = !this.isShow } }, //挂载子组件: components:{ con1 } }) </script> </body> </html>

Vue从生到死_第5张图片Vue从生到死_第6张图片Vue从生到死_第7张图片
Vue从生到死_第8张图片
这里使用的是v-if,当子组件从新显示时,子组件又从新创建并渲染:
Vue从生到死_第9张图片
但是如果使用v-show是不会销毁与从新建立子组件的,所以,v-show性能比较高

你可能感兴趣的:(vue)