当前位置：首页 > article >正文

【Vue】Vue扫盲（六）关于 Vue 项目运行以及文件关系和关联的详细介绍

article 2024/10/20 16:27:11

一、Vue 项目运行过程
编译阶段
Vue 通过编译器将构建的模板转换为渲染函数。这个过程包括模板解析、AST（抽象语法树）生成和优化等操作。
例如，对于一个简单的 Vue 模板

，编译器会解析其中的插值表达式{{message}}，生成相应的 AST 节点，并进行优化，最终生成一个渲染函数，该函数知道如何根据数据的变化来更新 DOM。
挂载阶段
首先创建 Vue 实例，在实例创建过程中有一系列生命周期钩子函数被调用（如beforeCreate、created等）。
然后将编译好的渲染函数与 Vue 实例进行关联，开始挂载操作。在挂载过程中，也会经过beforeMount和mounted等生命周期钩子。
当挂载完成后，Vue 实例就与 DOM 建立了联系，数据的变化可以实时反映在 DOM 上。
更新阶段
当数据发生变化时，Vue 会检测到变化并重新执行渲染函数。这个过程会经过beforeUpdate和updated等生命周期钩子。
例如，如果message的值发生了改变，Vue 会重新计算渲染函数的结果，并更新 DOM 中相应的部分，以显示新的值。
销毁阶段
当 Vue 实例不再需要时，会进入销毁阶段，调用beforeDestroy和destroyed等生命周期钩子。
在这个阶段，可以进行一些清理工作，如解绑事件监听器、清除定时器等。

二、文件关系和关联
index.html
是整个项目的入口页面，是项目运行的基础。它通常包含一个

这样的容器元素，Vue 实例会挂载到这个元素上。
例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue Project</title>
</head>

<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>

</html>

2.main.js
是项目的入口文件，主要作用是初始化 Vue 实例，并引入所需要的插件。
它会导入App.vue组件，并创建 Vue 实例，将其挂载到index.html中的#app元素上。例如：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

3.App.vue
是根组件，所有页面都是在App.vue下进行扩展和构建的。
它包含一个标签用于定义组件的模板，一个

<template>
  <div>
    <h1>Hello, Vue!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to my Vue app'
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

4.components 文件夹
用于存放项目中的各个子组件。这些子组件可以在App.vue或其他组件中被引用和使用。
例如，如果有一个HelloWorld.vue组件在components文件夹中，它可以在App.vue中这样被引用：

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld
  }
};
</script>