zoukankan      html  css  js  c++  java
  • Vue.js系列:生命周期钩子

    开发人员提供了一个Web开发人员可以在Vue.js应用程序的整个生命周期中使用的各种方法的讨论。

    生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法。从初始化开始到它被破坏时,对象都会遵循不同的生命阶段。这是一个着名的图表,表示挂钩顺序。

    让我们将代码添加到钩子并查看它们如何被解雇的阶段。

    <!DOCTYPE html ><html><head><div id='div1' v-bind:title="div_title">{{hello_message}}</div></head><body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var v1 = new Vue({el: "#div1",data: {hello_message: "Hello, there welcome to VueJS world",div_title: "This is my intro div",},beforeCreate: function(){alert('Before Create');},created: function(){alert('Created');},beforeMount: function(){alert('Before Mount');},mounted: function(){alert('Mounted');},beforeUpdate: function(){alert('Before Update');},updated: function(){alert('Updated');},beforeDestroy: function(){alert('Before Destroy');},destroyed: function(){alert('Destroyed');}});// To fire updatev1.$data.hello_message = "New message";// This can be invoked to destroy the object, which will fire the destroy hook//v1.$destroy();</script></body></html>

    beforeCreate(新对象诞生)

    Vue对象用新方法实例化。它创建一个Vue类的对象来处理DOM元素。对象的这个生命阶段可以通过beforeCreated 挂钩来访问 。我们可以在这个钩子中插入我们的代码,在对象初始化之前执行。

    创建(具有默认特性的对象)

    在这个生命阶段,对象及其事件完全初始化。 created 是访问这个阶段并编写代码的钩子。

    beforeMounted(对象在DOM中适合形状)

    这个钩子被调用 beforeMounted。在这个阶段,它检查是否有任何模板可用于要在DOM中呈现的对象。如果没有找到模板,那么它将所定义元素的外部HTML视为模板。

    已安装(DOM已准备就绪并放置在页面内)

    一旦模板准备就绪。它将数据放入模板并创建可呈现元素。用这个新的数据填充元素替换DOM元素。这一切都发生在mounted钩子上。

    beforeUpdate(更改已完成,但尚未准备好更新DOM)

    在外部事件/用户输入beforeUpdate发生更改时,此钩子即 在反映原始DOM元素的更改之前被触发。

    为了解决这个问题 beforeUpdated,我添加了下面的代码。它通过更新DOM来更改运行时中的hello_message。

    // To fire updatev1.$data.hello_message="New message";

    更新(在DOM中呈现的更改)

    然后,通过实际更新DOM对象并触发updated,屏幕上的变化得到呈现 。

    beforeDestroy(对象准备死掉)

    就在Vue对象被破坏并从内存中释放之前, deforeDestroy 钩子被触发,并允许我们在其中处理我们的自定义代码。

    为了激发这个钩子,我添加了下面的代码来销毁Vue对象。

    //这可以被调用来销毁该对象,这将触发销毁钩v1.$ destroy();

    销毁(对象停止并从内存中删除)

    该 destroyed 钩子被成功运行销毁对象上调用。

    概要

    我们可以使用生命周期钩子在Vue对象生命周期的不同阶段添加我们的自定义代码。它将帮助我们控制在DOM中创建对象时创建的流程,以及更新和删除对象。

  • 相关阅读:
    git remote: Support for password authentication was removed on August 13, 2021
    win10 安装vue 详解包括node.js、npm、webpack
    solr window 安装与启动
    solr 创建 core
    idea 创建 springboot 模块报错解决
    c# 设计模式篇
    javascript(DHTML)代码和客户端应用程序代码之间实现双向通信.
    委托,匿名方法,Lambda 表达式 的关系
    使用泛型实现单例模式提供者
    asp.net 文件编码问题
  • 原文地址:https://www.cnblogs.com/zjw2004112/p/11741047.html
Copyright © 2011-2022 走看看