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

最新推荐文章于 2022-05-31 15:18:48 发布

燃情雪

最新推荐文章于 2022-05-31 15:18:48 发布

阅读量190

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/h1234561234561/article/details/89815841

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

为什莫要了解生命周期函数呢？
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
评论
Vue起步02-------生命周期函数

为什莫要了解生命周期函数呢？01，因为在实际中，一个Vue实例从创建到销毁，期间我们可能需要在周期中的某些阶段做某些事。然而其生命周期函数则就是我们所需要知道的某些阶段。02，在Vue2.0中，存在着beforeCreate、create 、beforeMount 、mounted 、beforeUpdate 、update 、beforeDestroy、destroy。beforeCrea...
复制链接

扫一扫

专栏目录