Vue实例生命周期

Vue 阅读量

      Vue 是一个渐进式的 JS 框架，也就是一个没有太多限制的 JS 框架。和 Angular 相比，Vue 比 Angular 轻。Angular 是一个很重的框架，它给我们提供了一整套解决方案，Angular 就不是一个渐进式的框架，因为它有很多限制，就是用它的框架可以，但是必须要遵守它的规则，比如要使用它的组件机制，要使用对应的依赖注入，要使用对应它给我集成的东西。虽然可以集成第三方的东西，但是还是有一定的排他性，不太和其他的东西融合。Vue 和 Angular 相反，你可以使用我框架的同时去使用其他的库或者框架。都能很好的跟它们去集成起来。一些简单的语法可以去Vue 的官网学习。这篇文章主要是详细记录下 Vue 实例的生命周期。如果我们只是知道 Vue 的简单语法，可以去实现一些简单的项目。但是一旦发生问题是，我们就需要借助生命周期去寻找问题，甚至一些需求我们也可以根据生命周期的情况去定该把这个东西写在哪里，所以理解生命周期可以帮助我们：1.找错误，2.解决需求。

生命周期图解

       我们根据Vue 的官网给我们提供生命周期图示，来理解下实例的生命周期吧。


生命周期图示

钩子函数

       红框部分就是生命周期中涉及到的钩子函数，比如 beforeCreate，created 等等到 destoryed.其实我们真正能用到的也就几个，但是 Vue 给我们提供的方法有很多，我们等会具体说。

beforeCreate()

       当我们实例 Vue()对象，在这个对象还没有创建之前，我们就会拥有一个方法叫 beforeCreate。如果还没有将 Vue 对象创建出来，我们就可以调用这个方法。这个时候，它只对你当前的事件做了一些配置，还没有真正去识别属性里的东西。因此，Vue 对象还没有诞生前，可以使用这个方法。我们常常在这个方法里做一些加载动画的行为。

created()

       然后就开始进入到 created 这个方法中来了，当我们进入到 created 的时候，实例就已经出来了，组件就已经被创建好了，属性也成功的被绑定了。但是 DOM 还没有生成，因为这个时候我们还没有进入到下面,Element 这个属性还不存在。
我们在这个方法中常常做的事情:

1.获取对应的数据，比如我们请求网络接口，请求下来之后，把我们请求接口的数据赋给我们的属性，然后再往下走的时候就可以展示 DOM 了
2.结束 loading 加载，准备去渲染当前的 DOM

渲染模板

       当我们执行完 created,也就是说 Vue 实例化对象已经创建好之后，这个时候页面还没有展示出来，还要继续往下走。然后它会去看看有没有“el”,也就是 element 这个属性，如果有的话，它就会继续查看’template’这个选项有没有。

1
2
3
4
5
new ({
el: '#app',
components: { App },
template: '<App/>'
})

如果没有的话，它就会去查看 \$mount 这个里面有没有东西。

1
2
3
4
new ({
el: '#app',
components: { App }
}).$mount("#app")

       如果这两者都没有的话，那么当前的生命周期就结束了。因为她没有可渲染的东西，当然就不会往下执行了。有其中一个的话，就会去看看 template。有两种情况，一个是 template 中会执行一个具体的组件(比如执行的是 App.vue)，一个是对应的标签。然后就会执行 render 方法去渲染模板中对应的内容.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new ({
//具体的组件
el: '#app',
components: { App },
template: '<App/>'
})
//对应的标签
new ({
el: '#app',
template: `
    <div id="app">
        <p>Hello</p>
    </div>
`,
components: { App }
})

beforeMount()

       接下来，它就会进入到下一个钩子函数叫 beforeMount。Mount 是挂载，beforeMount 就是开始编译当前的模板了，这个方法是在虚拟 DOM 当中去执行的。也就是当前还不能看到对应的内容。它只是将这个东西挂载，但是还没有挂载上去，没有将真实的内容渲染到页面上去。可以在这里去做一些基础的工作，根据需求而定，

mounted()

      执行完 beforeMount 之后，就可以执行另一个函数 mounted。beforeMount 到 mounted 的中间：执行完 beforeMount 之后，开始将 element 指向的元素，把 templeate 的东西往里面放。然后到 mounted 这个钩子函数时，模板已经编译完了，编译完之后就开始挂载了，挂载的时候呢，基本 mounted 这个方法一旦结束之后，页面就已经显示出来了。这个就是 mounted.所以如果我们有些东西想让它在页面显示出来之后再去操作，那么我们就要写在 mounted 这个方法里面。

beforeUpdate()、updated()

      DOM 生成后，我们就可以看到对应的内容。看到内容后，我们还会对当前项目做的事情就是对应的一些更改（增删改查），更改的话就是我们的 update。update 有两个，一个是 beforeUpdate,beforeUpdate 是当前组件在发生更新之前，需要调用的一个钩子函数。还有一个叫 updated，这个是组件更新之后，就是我们已经更新了当前组件，只要这个方法一旦执行完之后，页面就已经是展示出来的效果，如果想在更新之前做一些事情的话，就可以在 beforeUpdate 这个方法中去实现。一般来说，我们想要在当前组件发生一些改变的时候，我们需要调用的是 updated 这个方法，

beforeDestory()、destroyed()

      上面结束之后，就进入到当前组件生命周期的尾部了，它在销毁之前，就调用一个 beforeDestory 这个钩子函数。此时实例仍然有功能。最后就是销毁之后，调用 destroyed。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

实例

      最后，我们来上手实践来帮助我们更好的理解钩子函数。以下是主要的代码，大家可以直接看看效果来帮助我更好的理解 Vue 实例的生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
export default {
  name: "LifeCycle",
  data() {
    return {
      title: "Vue实例的生命周期"
    };
  },
  methods: {
    changeTitle() {
      this.title = "生命周期Update钩子";
    }
  },
  beforeCreate() {
    alert("组件实例化之前的函数");
  },
  created() {
    alert("组件实例化完毕，但页面还未显示");
  },
  beforeMount() {
    alert("组件挂载前，页面仍未展示，但虚拟DOM已经配置");
  },
  mounted() {
    alert("组件挂载后，此方法执行后，页面显示");
  },
  beforeUpdate() {
    alert("组件更新前，页面仍未更新，但虚拟DOM已经配置");
  },
  updated() {
    alert("组件更新，此方法执行后，页面显示");
  },
  beforeDestroy() {
    alert("组件销毁前");
  },
  destroyed() {
    alert("组件销毁");
  }
};

Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :