vue学习：6、组件基础之生命周期

2019独角兽企业重金招聘Python工程师标准>>>

直接上看视频敲的测试样例代码，跑跑就清除啦

        <div id="app"></div>
		<script>
			var Test = {
				template: `<div>
						我是test组件{{text}}
						<hr/>
						<button @click="text=text+1" >我是按钮</button>
						
					</div>`,
				data: function() {
					return {
						text: 'hello world'
					}
				},
				beforeCreate: function() {
					//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
					console.log(this.text);
				},
				created: function() {
					//在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
					console.log(this.text+' 创建啦'); //发起ajax请求
				},
				beforeMount: function() {
					//DOM加载前
					console.log('beforeMount');
				},
				mounted: function() {
					//el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。						
					//注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
					//this.$nextTick(function () {
					// Code that will run only after the
					// entire view has been rendered
					//})
					console.log('mounted');
				},
				//基于数据改变,影响页面  beforeUpdate 和 updated 当有更改数据才触发，beforeUpdate可以获取原DOM，updated可以获取更新DOM
				beforeUpdate:function(){
					//改变前
					console.log(document.body.innerHTML);
				},
				updated:function(){
					//改变后
					console.log(document.body.innerHTML);
				},
				beforeDestroy:function(){
					//Vue 实例销毁之前调用。在这一步，实例仍然完全可用。
					console.log(document.body.innerHTML);
				},
				destroyed:function(){
					//Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
					console.log(document.body.innerHTML);
					console.log('销毁');
				},
				activated:function(){					
					console.log('keep-alive 组件激活时调用 激活');
				},
				deactivated:function(){					
					console.log('keep-alive 组件激活时调用 停用');
				}		
						
				//created 和 activated 都是v-if="true" 子组件的状态
				//但是，created 没有被 keep-alive 内置组件包裹
				//销毁和停用同上
			}
			
			var App={
				components:{
					test:Test
				},
				data:function(){
					return{
						isExist:true
					}
				},
				template:`<div>
						<keep-alive>
							<test v-if="isExist"></test>	
						</keep-alive>
						
						<button @click="isExist=!isExist">删除或创建组件</button>
						</div>`
				
			}

			new Vue({
				el: '#app',
				components: {
					app: App
				},
				template: '<div><app/></div>'
			})
		</script>

 

转载于:https://my.oschina.net/qingqingdego/blog/2660349