Vue2.0生命周期/钩子函数理解

最新推荐文章于 2023-02-17 20:23:14 发布

__Forward

最新推荐文章于 2023-02-17 20:23:14 发布

阅读量386

点赞数

分类专栏：前端文章标签： Vue2.0 Vue生命周期 Vue钩子函数

本文链接：https://blog.csdn.net/w306026355/article/details/88945048

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue官方的生命周期图

测试代码

可以看到一共有八个钩子函数，来一段测试代码；创建一个html文件，用浏览器打开，F12，点Console看结果

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var vm = new Vue({
      el: '#app',
      data: {
          message : "她爱微笑" 
      },
       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)  
        },
        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)
        }
    })
</script>
</body>
</html>

create和mount相关

页面加载可以看到，执行了四个钩子函数

beforeCreate（创建前）：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created（创建完成）：组件属性挂载成功，可以对data进行修改

beforeMount（dom挂载前）：el虚拟dom被创建，但是data中的数据值并没有渲染到虚拟dom

mounted（dom挂载完成）：渲染真实的el dom，data的数据被按需的挂载到dom中

update相关

现在更改一下message的值，看一下会执行哪些钩子函数

在浏览器console中输入vm.message = ‘Hello World！’

可以看到执行了beforeUpdate和updated两个钩子函数

beforeUpdate（更新前）：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

updated（更新后）：数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

destroy相关

现在销毁vm对象，看一下会执行哪些钩子函数

在console输入vm.$destroy();命令

beforeDestroy（销毁前）：立即执行beforeDestroy

destroyed（销毁完成）：现在dom已经成为了空壳，现在已经和vue没有关系了，现在操作data并不会渲染到页面中

总结

beforeCreate：可以做一些初始化的操作
created：可以去ajax异步请求数据，但不能放到dom中去，可以将拿到的数据放到data中去
beforeMount：可以做初始数据的获取，加载loading样式等等…
mounted：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行
beforeUpdate：会和之前的dom进行对比并重新渲染
updated：可以操作渲染好的dom
beforeDestroy：可以出现一些”你确认删除xx吗？“
destroyed：提示”xx组件已经被删除“，清空相关内容

不足之处还请慷慨指出

参考文章

Vue2.0 探索之路——生命周期和钩子函数的一些理解

vue 生命周期详解

对vue生命周期/钩子函数的理解

__Forward

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0生命周期/钩子函数理解

Vue官方的生命周期图测试代码可以看到一共有八个钩子函数，来一段测试代码；创建一个html文件，用浏览器打开，F12，点Console看结果<!DOCTYPE html><html><head> <title></title> <script src="https://cdn.jsdelivr.net/...
复制链接

扫一扫