用通俗易懂的语言讲述 Vue.js 生命周期和组件原理

前端

2023-09-05 19:36:02

Vue.js 生命周期

Vue.js 的生命周期由以下阶段组成：

实例化 ：Vue.js 实例被创建时，会触发实例化阶段。在此阶段，Vue.js 实例的属性和方法被初始化。
挂载：Vue.js 实例被挂载到 DOM 元素时，会触发挂载阶段。在此阶段，Vue.js 实例的模板被编译成虚拟 DOM，然后虚拟 DOM 被渲染到实际的 DOM 中。
更新：当 Vue.js 实例的数据发生变化时，会触发更新阶段。在此阶段，Vue.js 实例的虚拟 DOM 会被更新，然后更新后的虚拟 DOM 会被渲染到实际的 DOM 中。
销毁：当 Vue.js 实例被销毁时，会触发销毁阶段。在此阶段，Vue.js 实例的所有事件监听器和子组件都会被销毁。

Vue.js 组件原理

Vue.js 组件是可复用的 Vue.js 实例。组件可以被组合在一起形成更复杂的 UI。组件的创建和使用方式如下：

组件定义 ：组件的定义包括两个部分：模板和脚本。模板是组件的 HTML 结构，脚本是组件的 JavaScript 代码。
组件注册 ：组件被定义后，需要在 Vue.js 实例中注册才能使用。注册组件时，需要指定组件的名称和组件的定义。
组件使用 ：组件可以在模板中使用。在模板中使用组件时，需要指定组件的名称和组件的属性。

Vue.js 生命周期和组件原理的实践

以下是一个使用 Vue.js 生命周期和组件原理构建的简单应用程序：

<div id="app">
  <component :is="currentComponent"></component>
</div>

const app = new Vue({
  el: '#app',
  data: {
    currentComponent: 'component-a'
  },
  components: {
    'component-a': {
      template: '<div>Component A</div>'
    },
    'component-b': {
      template: '<div>Component B</div>'
    }
  }
});

在这个应用程序中，我们定义了两个组件：component-a 和 component-b。component-a 的模板是 <div>Component A</div>，component-b 的模板是 <div>Component B</div>。

我们还定义了一个 Vue.js 实例 app。app 实例的数据包含了一个属性 currentComponent，该属性的值是一个字符串，表示当前正在显示的组件的名称。

当 app 实例被挂载到 DOM 元素 #app 时，会触发挂载阶段。在此阶段，app 实例的模板被编译成虚拟 DOM，然后虚拟 DOM 被渲染到实际的 DOM 中。

当 app 实例的数据发生变化时，会触发更新阶段。在此阶段，app 实例的虚拟 DOM 会被更新，然后更新后的虚拟 DOM 会被渲染到实际的 DOM 中。

当 app 实例被销毁时，会触发销毁阶段。在此阶段，app 实例的所有事件监听器和子组件都会被销毁。