Vue起步02-------生命周期函数

为什莫要了解生命周期函数呢?
01,因为在实际中,一个Vue实例从创建到销毁,期间我们可能需要在周期中的某些阶段某些事。然而其生命周期函数则就是我们所需要知道的某些阶段

02,在Vue2.0中,存在着beforeCreate、create 、beforeMount 、mounted 、beforeUpdate 、update 、beforeDestroy、destroy。
beforeCreate:基本数据data初始化之前
create:只是初始化基本数据data,还没有绑定挂载到目标元素之前
beforeMount:View层模板还没有数据注入之前
mounted:View层模板数据注入之后
其他存在迷惑就不叙述了…

03,具体示意图【出之官方文档图
鄙人英文不才,英文备注如下
mount----------嵌入
compile-------编译
render---------渲染
virtual----------虚拟
patch----------打补丁
teardown-----拆卸
component–组件
injection------注入,注射
reactivity-----反应
在这里插入图片描述
代码测试【绝大部分来源】主要是懂就好

<!DOCTYPE html>
<html>
<head>
    <title>vue_生命周期</title>
</head>
<body>

<div id="app">
	 <p>{{ message }}</p>
	 <button id="change">data改变</button>
	 <button id="destroy">销毁</button>
</div>
<script src="js/vue2.0.js"></script>
<script type="text/javascript">
    
  const vm = new Vue({
      el: '#app',
      data: {
          message : "burningSnow" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message) //undefined 
        },
		//初始化数据模型data
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message);
        }
    })
	document.querySelector('#change').addEventListener('click',() => vm.message = "燃情雪");
	document.querySelector('#destroy').addEventListener('click',() => {
		vm.$destroy();
		//拆卸了Vue实例的所有绑定事件,监听,组件等...所以目标元素不再受所挂载Vue实例的控制
		vm.message = "1111";//无效
	});
</script>
</body>
</html>

在此迷惑的是
beforeUpdate 、update:beforeUpdate函数里面打印的结果表示View层已经随之更新了啊?【虚拟DOM和真实DOM是两个不同概念的东西,感觉问题就出在这儿,,,,】
beforeDestroy、destroy:beforeDestroy在此函数中View已经就不收所挂载实例Vue控制了啊?
小生不才,很是迷惑…
菜鸟爬行中…

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值