Vue基础-生命周期

最新推荐文章于 2023-12-08 14:03:12 发布

多一点开心

最新推荐文章于 2023-12-08 14:03:12 发布

阅读量88

点赞数

分类专栏： vue

本文为博主原创文章，署名（BY）-非商业性使用（NC）-禁止演绎（ND），转载请附上原文链接和本申明。

本文链接：https://blog.csdn.net/qq_38060231/article/details/108871711

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

生命周期

一、生命周期图示
二、详解
三、代码

一、生命周期图示

在这里插入图片描述

二、详解

生命周期函数是vue实例某一个时间点会自动执行的函数

在这里插入图片描述

在初始化事件和生命周期结束的时间点会执行beforeCreate函数

接着会处理一些外部的注入和双向绑定相关内容，会自动执行created函数

有模板数据但是渲染之前会执行beforeMount函数（即lalala没有显示在页面上）
模板数据数据相结合挂载到页面上时要执行mounted函数（即lalala显示在页面上）
在这里插入图片描述
当vm.$destory(）被调用（即组件将要被销毁的时候）会执行beforeDestory方法
组件完全被销毁得是后会执行destoryed方法

当数据发生改变还没有重新渲染的时候beforeUpdate方法会执行，重新渲染之后updated方法会执行，在data里面定义一个数据
在这里插入图片描述

在这里插入图片描述
这写函数不需要我们手动调用，他们会在某个时刻自动执行，这些函数直接定义在vue实例之上，不需要定义在methods里面

三、代码

<!DOCTYPE html>
<html>
 <head>
 	<meta charset="utf-8">
 	<title>vue实例生命周期函数</title>
 <script src="./vue.js"></script>
 </head>
 <body>
 <div id ="app"></div>
 <script>
   /* 生命周期函数是vue实例某一个时间点会自动执行的函数 */
   var vm = new Vue({
     el: "#app",
     /* template: "<div>lalala</div>", */
     template: "<div>{{test}}</div>",
     data: {
       test: "go"
     },
     beforeCreate: function() {
       console.log("beforeCreate");
     },
     created: function() {
       console.log("created");
     },
     beforeMount: function() {
       console.log(this.$el);
       console.log("beforeMount");
     },
     mounted: function() {
       console.log(this.$el);
       console.log("mounted");
     },
     beforeDestroy: function() {
       console.log("beforeDestroy");
     },
     destroyed: function() {
       console.log("destroyed");
     },
     beforeUpdate: function() {
       console.log("beforeUpdate");
     },
     updated: function() {
       console.log("updated");
     }
   })
 </script>
 </body>
</html>