vue生命周期

最新推荐文章于 2024-08-12 20:19:45 发布

weixin_40793759

最新推荐文章于 2024-08-12 20:19:45 发布

阅读量83

点赞数

分类专栏：个人学习

本文链接：https://blog.csdn.net/weixin_40793759/article/details/93396487

版权

个人学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{message + '这是在outer HTML中的'}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    template: "<h1>{{message +'这是在template中的'}}</h1>",
    // render: function(createElement) {
    //     return createElement('h1', 'this is createElement')
    // },
    data: {
      message: 'Vue的生命周期'
    },
    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); //已被初始化
      
    //   this.$mount({el: '#app'}) //这个el参数就是挂在的dom接点
    },
    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); //已被初始化 
      this.mes()
    },
    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); 
      this.message = 'vue lifecycle'
    },
    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)
    },
    methods:{
        mes(){
            console.log('mes',this.message)
            this.message = 'vue life'
        }
    }
  })
</script>
</html>

在这里插入图片描述

Vue 生命周期
从创建到销毁发生的一系列状态叫做什么周期，在这个过程中vue会提供状态函数给我们进行，该状态的操作，这个函数叫做钩子函数/生命周期函数/生命周期钩子
过程
1.new实例化—beforeCreate
Vue 实例初始化，读取所有的生命周期函数，并没有执行，不会调用，beforeCreate函数输出的所有方法属性元素都是未定义状态
2.beforeCreate—created
created函数截至，vue实例化创建完成，可读取属性，计算属性，添加监听 set get方法，读取watch方法，也可调用部分method方法（此时还是没有el选项，没有挂在Dom元素上，视图无变化，只是data数据变化）

3.created—beforeMount
判断是否有el配置，或者是被调用了 $m o u n t () 都会走下一步判断有没有 e l 或者是$ mount()作用的dom结构，如果没有截止到created
注意：
此时输出的$el只是虚拟dom，并没有直接渲染到页面上，此时是没有dom结构的***
```
 （1）.如果vue实例对象中有render函数或者template参数选项，会首先执行render函数渲染，如没有render函数则将template作为模板编译成render函数。
 （2）.如果没有template选项，则将外部HTML作为模板编译。
 （3）.可以看到template中的模板优先级要高于outer HTML的优先级
   综合排名优先级：render函数选项 > template选项 > outer HTML.
```
4.beforeMount—mounted
如果有dom结构，给vue实例对象添加 $el成员，读取dom结构渲染vue指令 {{}}，并且替换掉挂在的DOM元素，也就是挂载的过程，可以看见下面{{message}}渲染dom完成这里可以操作dom或者ref操作dom，用法ref= "id" ,this.$ ref,这里的id为唯一值，手写id会覆盖，但是用v-for 遍历ref，id成了一个数组，不会覆盖。
之后一般执行交互操作。

5.beforeUpdate钩子函数和updated钩子函数间的生命周期

发现触发了组件的更新：
可以看到mounted中调用mes方法，实际mounted、beforeUpdate、updated这三个周期输出的$el都是一样的message，这个因为data changed时是三个函数一整个observe同步过程
在beforeUpdate时还可以反悔进行data changed操作

6.beforeDestroy和destroyed钩子函数间的生命周期
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。