生命周期钩子函数

浏览 114

课文

这节课我们来详细学习 Vue 实例的生命周期钩子。

生命周期钩子

Vue 实例从被创建出来,就开始经历它的生命周期。在生命周期的过程中,它会提供一些功能,这些功能会在生命周期的每个过渡步骤中执行,以便我们在这些阶段执行某些任务。我们可以把生命周期想象成一个管道,这个管道上面有很多钩子,把我们要做的某些任务钩住。所以这些函数被称为“生命周期钩子(Hook)”。

Vue 总共有 8 个生命周期钩子。每个生命周期阶段都有 2 个钩子,总结如下:

  1. create hook
    • beforeCreate
    • created
  2. mount hook
    • beforeMount
    • mounted
  3. update hook
    • beforeUpdate
    • updated
  4. before hook
    • beforeDestroy
    • destroyed

接下来我们将分别学习每个钩子。

创建 Hook

beforeCreate

beforeCreate 会在在组件初始化时运行。这时 data 和 methods 都没有被挂载到 Vue 实例上。

new Vue({
    el: '#app',
    data: {
    	name: '张三'
    },
    methods: {},
    beforeCreate() {
      console.log(this.name);
    }
})

在上面的示例中,当 beforeCreate 钩子运行时,会在控制台输出 undefined,因为 data 尚未被处理。

created

created 允许访问通过 created 钩子激活的反应数据和事件。这时 template 和虚拟 DOM 还没有被渲染和创建。

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<div id="app"></div>

<script>
new Vue({
    el: '#app',
  	data: {
      name: '张三'
    },
  	template: '<div>my name is {{ name }}</div>',
    created() {
      const el = document.getElementById('app')
      console.log(el.innerHTML)
    }
})
</script>

</body>
</html>

此时打印的内容是空白的,说明此时 template 并没有被渲染到页面中。

挂载 hook

beforeMount

beforeMount 发生在初始渲染发生之后,需要呈现的内容都已经被编译完成。

new Vue({
    el: '#app',
    beforeMount() {
      console.log('模板已完成渲染')
      console.log('虚拟 DOM 尚未创建:', this.$el)
    }
})

其中 this.$el 是虚拟 DOM 所对应的真实 DOM 的包装对象,此时还没有这个对象,所以是 undefined。

mounted

在 mounted 钩子中,可以完全访问反应式组件、模板和呈现的 DOM(通过this.$el)。

可以在 mounted 中来修改DOM,尤其是在和其它 UI 框架/库集成的时候格外有用。

new Vue({
    el: '#app',
    mounted() {
      console.log('虚拟 DOM 已创建:', Object.keys(this.$el.__vue__).join('\n'))
    }
})

在上面的示例中,我们打印了 this.$el.vue 上面的所有属性。

更新 hook

beforeUpdate

beforeUpdate 钩子在组件上的响应式数据(data)发生变化后运行,这时开始更新。但此时是在修补 DOM 和重新渲染 DOM 之前进行的。

我们可以在 beforeUpdate 中获取组件上的任何响应数据的最新状态。

new Vue({
    el: '#app',
  	data: {
      name: '张三'
    },
  	template: '<div>my name is {{ name }}</div>',
    beforeCreate() {
       setTimeout(() => this.name='李四', 1000)
    },
    beforeUpdate() {
        console.log(this.name);
    }
})

updated

updated 钩子在组件上的数据更新,并且 DOM 重新渲染后运行。

我们可以在属性更新后,在 updated 中根据需要来访问真实的 DOM。

new Vue({
    el: '#app',
  	data: {
      name: '张三'
    },
  	template: '<div id="name">my name is {{ name }}</div>',
    beforeCreate() {
       setTimeout(() => this.name='李四', 1000)
    },
    beforeUpdate() {
        console.log(this.name);
    },
    updated() {
        console.log(document.getElementById('name').innerHTML);
    }
})

销毁 hook

beforeDestroy

beforeDestroy 在组件销毁前执行。这时的组件仍将完全存在并正常运行。

beforeDestroy 非常适合清理事件和一些副作用。

const vm = new Vue({
    el: '#app',
    beforeDestroy() {
        console.log('我马上就要被销毁了!!!');
    }
})

vm.$destroy()

destroyed

组件销毁后,会进入 destroyed 钩子,这时组件上几乎没有任何东西。附着在它上面的一切都被销毁了。

通常我们会在 destroyed 中做一些延迟执行的任务,比如通知服务器,组件已被销毁。

new Vue({
    el: '#app',
    destroyed() {
        console.log('我已经被销毁了!');
    }
})

**恭喜!**🎉🎊 现在您已经掌握了 Vue.js 所有的生命周期钩子。

下面是调用了 Vue 实例所有生命周期钩子的可执行示例。

我已经在每一个生命周期 hook 中通过控制台打印了消息,这样以便你查看钩子的执行顺序。

<!DOCTYPE html>
<html>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <body>
    <div id="app"></div>

    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          date: Date()
        },
        template: `<div>
          <h1>这是一个用于观察 Vue.js 生命周期的示例</h1>
          <p>请打开浏览器的控制台观察它们是以什么顺序来执行的。</p>
          <h3>每隔 1 秒会更新时间,所以每隔一秒会执行一次 update hooks。</h3>
          <h3>Vue.js 实例将会在 3 秒后自动销毁,所以 destroy hooks 将会在 3 秒后被执行。</h3>
          <h3>当前时间:{{ this.date }}</h3>
        </div>
        `,
        beforeCreate() {
          console.log("beforeCreate:事件和生命周期已初始化");
        },
        created() {
          console.log("created:Vue 实例已创建");
        },
        beforeMount() {
          console.log("beforeMount:$el 尚未被创建");
        },
        mounted() {
          console.log("mounted:$el 已创建,DOM 已被替换");
        },
        beforeUpdate() {
          console.log("beforeUpdate:虚拟 DOM 尚未被重新渲染和更新");
        },
        updated() {
          console.log("updated:虚拟 DOM 已经被重新渲染和更新");
        },
        beforeDestroy() {
          console.log(
            "beforeDestroy:开始销毁,数据响应式和事件监听尚未被移除"
          );
        },
        destroyed() {
          console.log("destroyed:销毁完毕,数据响应式和事件监听已被移除");
        },
      });

      const timer = setInterval(function () {
        vm.date = new Date()
      }, 1000);

      setTimeout(function () {
        vm.$destroy();
        clearInterval(timer)
      }, 3000);
    </script>
  </body>
</html>

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1