首页技术文章详情

理解 Vue 生命周期钩子

原创2020-08-26 16:40:54 快审 推荐 顶置 1269
理解 Vue 生命周期钩子

理解组件的生命周期,有利于我们了接到 vue 在创建组件的过程。以及使用生命周期钩子赋予我们更多的能力。




创建(初始化阶段)

创建钩子是在您的组件中运行的第一个钩子。 它们允许您在组件甚至在添加到DOM之前执行操作。 与任何其他钩子不同,创建钩子也在服务器端渲染期间运行。

如果您需要在客户端呈现和服务器渲染期间在组件中设置东西,请使用创建挂钩。同样在创建钩子忠 您将无法访问模板。

beforeCreated

beforeCreate 钩子在组件的初始化前运行。 data 还没被附加上 reactvie 特型,events 也还没建立好。

<script>export default {
  beforeCreate() {
    console.log('Nothing gets called before me!')
  }}</script>

created

在 created 钩子中,你能够访问 reactive data 和 events。但是模板和虚拟DOM无法访问

export default {
    data: () => ({
        property: 'lys'
    }),

    computed: {
        propertyComputed() {
            console.log('I change when this.property changes.');
            return this.property;
        }
    },

    created() {
        this.property = 'laoergege';
        console.log(`propertyComputed is ${this.propertyComputed}`)
    }}



挂载(插入到DOM阶段)

Mounting hook 允许我们在组件渲染前后访问组件。当然他们不会再服务端渲染被调用。如果您需要在初始化时为组件提取一些数据。 为此而使用created (or created + activated for keep-alive components),特别是如果在服务器端呈现期间需要该数据。

beforeMount

beforeMount钩子在初始渲染发生之前和模板或渲染函数被编译之后运行。

 beforeMount() {
        console.log(`this.$el doesn't exist yet, but it will soon!`);
        console.log(`this.$el is ${this.$el}`);
    }




mounted

使用 mounted 钩子,你将拥有访问组件模板能力。mounted 钩子是经常使用的生命周期钩子。我使用最多的方式是在 created 里获取组件需要的数据或者在 mounted 中修改 DOM。

<template>
  <p>I'm text inside the component.

随机快审展示 刷新 快审榜
加入快审,优先展示

加入VIP

发表评论

  • * 评论内容:
  •  

精彩评论

  • 无任何评论信息!