Vue.js的介绍和生命周期

Tavish Aggarwal.

V
UE.JS是一个JavaScript库,可帮助您使用MVVM(Model-View-ViewModel)架构模式构建Web应用程序。 

为什么要使用vue.js?

正如我们所知,市场上有很多框架,为项目选择合适的框架变得非常挑份。使用vue.js的原因是:“它是因为虚拟DOM的快速”。

以下是显示vue.js如何将vue.js与角度或反应类似的其他流行框架进行比较的统计数据。

 

 

现在这个问题是虚拟DOM的是什么?

DOM代表文档对象模型。正如我们所知,HTML DOM始终是树木结构,这很好。因为我们可以轻松地遍历树。正确的?

但不幸的是很容易迅速意味着。现在与现代应用程序,我们在DOM中有1000个Div,很难管理和更新。并且更新DOM是昂贵的操作。

避免上面的问题 虚拟DOM comes into action.

使用Virtual DOM,我们可以轻松管理和更新我们的DOM。 Virtual DOM是HTML DOM的抽象,可根据状态更改选择性地呈现节点的子树。它可以使最少的DOM操纵量成为可能,以便保持您的组件最新。

要了解虚拟DOM甚至更好,我们可以想到虚拟DOM,因为我们创建了我们可以随着我们想要的更改的轻量级副本,然后将其保存到我们真实的DOM。听起来很简单。

摘要:Virtual DOM是一种技术,避免使用DOM直接操纵并使用轻量的JavaScript对象,从而创建我们的DOM。

了解视图生命周期

现在,让我们看看如何使用Vue.js在页面上呈现视图。下面的图表显示将帮助我们如何创建组件,添加到DOM,更新并最终被销毁。

 

vue.js生命周期

 

现在,很明显,组件可以在四个阶段下进行。这些都是:

  1. 创建
  2. 安装
  3. 更新
  4. 破坏

好的!现在让我们详细看看上面提到的阶段的究竟是什么意思。

创建

 这是在我们的组件中运行的第一步。此状态允许我们在DOM中添加组件之前执行操作。

该状态进一步分为三个州:

  1. Beforecreate - 这是尚未创建数据和事件的状态
  2. 初始化状态 - 这是数据和事件已初始化并且已准备好创建的状态。
  3. 创建 - 这是数据和事件初始化但未安装到DOM的状态。

一旦初始化数据和事件,它就准备好被遵循为在安装状态下发生的模板。

安装

这是允许我们在首先和之后立即访问组件的状态。在此状态中,将创建虚拟DOM并将其挂载到DOM树。

国家进一步分为三个州:

  1. BeFeMount - 这是一个在模板渲染发生之前的状态。主要是,您不会使用此状态。
  2. 创建Virtual DOM - 这是创建虚拟DOM的状态,并已准备好安装
  3. 挂载 - 这是虚拟DOM安装到DOM树和HTML的状态,已准备好呈现。

安装Virtual DOM后,它处于侦听任何其他更改的状态,并且已准备好重新渲染DOM。

更新

这是任何更新发生的状态,导致DOM重新呈现。 

该州进一步分为三个步骤:

  1. breasupdate - 这是一旦我们的数据更新后运行的状态,准备好重新呈现。
  2. 重新渲染虚拟DOM - 这是使用更新的更改所做的DOM重新呈现DOM的状态。
  3. 更新 - 这是更新的Virtual DOM将安装到DOM树的状态。

破坏

如果在任何点要求是摧毁DOM并清理DOM,这种州将进入行动。

该状态也进一步分为三个州:

  1. beforedestroy - 这是我们在销毁之前清理事件和数据的状态。
  2. 撕毁虚拟DOM - 这是虚拟DOM被撕毁的状态,并准备挂载到DOM树。
  3. 被销毁 - 这是组件完全从DOM树销毁的状态,并且没有任何东西。

在即将到来的博客中,我将用Vue.js描述国家变更,我们将看到每个州的重要性。

作者信息

Tavish Aggarwal.

网站: http://tavishaggarwal.com

Tavish Aggarwal.是一个数据科学家 在一个海德拉巴工作,具有广泛的经验,在跨电子商务,财务,医疗保健等等不同领域解决现实世界的业务问题。 他对技术充满热情,喜欢在团队中工作。

类别