vue2.x生命周期学习

最新推荐文章于 2024-08-05 19:23:36 发布

阿宅的小天地

最新推荐文章于 2024-08-05 19:23:36 发布

阅读量576

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/u014137329/article/details/121774160

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

主要就记录下各个生命周期在干什么，加强记忆。

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。其中需要注意this.$el, this.$data，前者是DOM，后者是响应数据。结果如图：

可以看到在created阶段中，已经可以获取到this.$data，在创建周期中，Vue里对props、data、computed等做了初始化。

beforeMount阶段中，this.$el中name:{{name}}, 因为此时页面上已存在的DOM元素作为 Vue 实例的挂载目标。如果此时创建的Vue实例没有指定el的情况下，在mounted阶段获取this.$el；

beforeCreate：

Vue实例化的时候，在Vue的源码instance中，有如下初始化顺序（生命周期、事件、渲染），所以此时beforeCreate中，el和data都为undefined。

vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

created：

el还是undefined，而数据已经在initState与data中的属性进行绑定，在这里可以在渲染前更改数据但不会触发其他的钩子函数，一般可以在这里做初始数据的获取。需要注意此时的DOM并没有渲染，不要对DOM进行修改。

beforeMount：

从官网图上可一看出从created到beforeMount有两个判断：has el？has template？

首先判断Vue实例中是否有el选项，如果没有，则停止生命周期，直到mounted调用时继续执行。如果有el，则继续判断选项中是否有template，如果有，则把template作为参数传递给render函数。没有，则使用outerHTML进行编译。

所以此时的el为<div id="app"> name: {{name}} </div>。此时data里面的name值还没有更新到DOM上，可以在这个阶段对数据获取更改等。

mounted：

这个阶段把数据渲染到html，页面加载完成。此时可以按照需求向后台发送请求等。

beforeUpdate：

更新前状态，当view层数据变化之前，触发。

updated：

数据更新，重新渲染完成。

beforeDestroy：

销毁前，多用于清除定时器。

destroyed：

销毁后，多用于解除事件监听、清空数据。

当父子组件存在时，生命周期的执行顺序是：父组件beforeCreate => 父组件created => 父组件beforeMount =>子组件 child beforeCreate => 子组件 child created => 子组件 child beforeMount =>子组件 child Mounted =>父组件 mounted

销毁时顺序是：

测试代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">
    name: {{name}}
    <button @click="visible = !visible">显示/隐藏子组件</button>
    <child v-if="visible"></child>
  </div>
  <script>
    var vm = new Vue({
      // beforeMount是否能获取$el
      el: '#app',
      components: {
        'child': {
          template: `<div>
                        age: {{age}}
                      </div>`,
          data() {
            return {
              age: 18
            }
          },
          beforeCreate() {
            console.error("child beforeCreate");
            console.group("this.$el", this.$el)
            console.group("this.$data", this.$data)
          },
          created() {
            console.error("child created");
            console.group("this.$el", this.$el)
            console.group("this.$data", this.$data)
          },
          beforeMount() {
            console.error("child beforeMount");
            console.group("this.$el", this.$el)
            console.group("this.$data", this.$data)
          },
          mounted() {
            console.error("child mounted");
            console.group("this.$el", this.$el)
            console.group("this.$data", this.$data)
          },
          beforeUpdate() {
            console.error("child beforeUpdate");
            console.group("this.$el", this.$el)
            console.group("this.$data", this.$data)
          },
          updated() {
            console.error("child updated");
            console.group("this.$el", this.$el)
            console.group("this.$data", this.$data)
          },
          beforeDestroy() {
            console.error("child beforeDestroy");
            console.group("this.$el", this.$el)
            console.group("this.$data", this.$data)
          },
          destroyed() {
            console.error("child destroyed");
            console.group("this.$el", this.$el)
            console.group("this.$data", this.$data)
          }
        },
      },
      data() {
        return {
          name: 'test',
          visible: true
        }
      },
      beforeCreate() {
        console.error("beforeCreate");
        console.group("this.$el", this.$el)
        console.group("this.$data", this.$data)
      },
      created() {
        console.error("created");
        console.group("this.$el", this.$el)
        console.group("this.$data", this.$data)
      },
      beforeMount() {
        console.error("beforeMount");
        console.group("this.$el", this.$el)
        console.group("this.$data", this.$data)
      },
      mounted() {
        console.error("mounted");
        console.group("this.$el", this.$el)
        console.group("this.$data", this.$data)
      },
      beforeUpdate() {
        console.error("beforeUpdate");
        console.group("this.$el", this.$el)
        console.group("this.$data", this.$data)
      },
      updated() {
        console.error("updated");
        console.group("this.$el", this.$el)
        console.group("this.$data", this.$data)
      },
      beforeDestroy() {
        console.error("beforeDestroy");
        console.group("this.$el", this.$el)
        console.group("this.$data", this.$data)
      },
      destroyed() {
        console.error("destroyed");
        console.group("this.$el", this.$el)
        console.group("this.$data", this.$data)
      }
    })
  </script>
</body>

</html>

阿宅的小天地

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.x生命周期学习

主要就记录下各个生命周期在干什么，加强记忆。beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。其中需要注意this.$el, this.$data，前者是DOM，后者是响应数据。结果如图：可以看到在created阶段中，已经可以获取到this.$data，在创建周期中，Vue里对props、data、computed等做了初始化。beforeMount阶段中，th...
复制链接

扫一扫

专栏目录