2.1 vue组件

入口文件详解 

在 Vue 2 项目中，main.js 文件扮演着至关重要的角色。它通常是整个应用程序的入口点，负责初始化 Vue 实例，并将这个实例挂载到 HTML 文档中的一个特定元素上。以下是对 main.js 文件的详细解析：

基础结构

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

Vue.config.productionTip = false;

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

组件详解

1. 引入 Vue 和根组件:

   • import Vue from 'vue';：导入 Vue 库，这是使用 Vue 框架的前提。
   • import App from './App.vue';：导入项目的根组件（通常命名为 App.vue），它是所有其他组件的父组件。

2. 配置项:

   • Vue.config.productionTip = false;：默认情况下，当你的应用处于生产环境时，Vue 会在控制台输出一条提示消息。设置为 false 可以禁用这条提示。

3. 创建 Vue 实例:

   • 使用 new Vue({ ... }) 创建一个新的 Vue 实例。
   • render: h => h(App)：这是一个简写形式的渲染函数，用来渲染 App 组件。这里的 h 是 createElement 的缩写，它是一个用来生成虚拟 DOM 节点的函数。

4. 挂载 Vue 实例:

   • .$mount('#app')：手动将 Vue 实例挂载到 HTML 文档中 id 为 #app 的元素上。等同于在选项中直接设置 el: '#app'。

 子组件和父组件

根组件是Vue应用的入口组件，通常是通过new Vue()创建的实例组件，在项目中对应App.vue 文件，它是所有其他组件的父组件，形成组件树的顶层结构。子组件则是被根组件或其他父组件包含的组件，通过嵌套方式存在于组件树中，用于封装独立的功能模块 

生命周期执行顺序（父子组件场景）

初始化阶段：

父beforeCreate

→ 父created → 父beforeMount → 子beforeCreate → 子created → 子beforeMount → 子mounted → 父mounted

更新阶段：

父beforeUpdate

→ 子beforeUpdate → 子updated → 父updated

销毁阶段：

父beforeDestroy

→ 子beforeDestroy → 子destroyed → 父destroyed

关键注意事项

1. mounted与$nextTick：mounted不保证子组件全部挂载，需等待所有DOM就绪时使用this.$nextTick(() => { ... })。
2. 避免在updated中修改数据：可能导致死循环，如需修改可在beforeUpdate中处理。

根组件与子组件的应用场景

• 根组件：负责全局状态管理、路由配置、应用入口等顶层逻辑。
• 子组件：封装页面中的独立功能模块，如列表项、按钮、表单等，通过props接收根组件传递的配置数据，通过事件与根组件交互，实现功能解耦和复用。

vue组件组成部分 

Vue 2 是一个流行的渐进式 JavaScript 框架，用于构建用户界面。组件是 Vue 中的核心概念之一，它们允许你将用户界面分割成独立且可复用的部分。每个 Vue 组件通常包含以下部分：

1. 模板(Template): 使用HTML来声明组件的布局和结构。
2. 脚本(Script): 包含逻辑代码，通过选项如 data, methods, computed 等定义组件的行为。
3. 样式(Style): 可选地，你可以为组件定义样式，并且可以使用 scoped 属性限制样式仅应用于当前组件。

基础结构

一个基本的 Vue 2 组件如下所示：

<template>
  <div class="example">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    // 定义方法
  },
  computed: {
    // 计算属性
  },
  // 其他选项...
}
</script>

<style scoped>
.example {
  color: blue;
}
</style>

关键概念

 data 必须为函数

---

data 为什么必须是函数？

核心原因：避免数据污染

• 问题场景：若 data 直接定义为对象，多个组件实例会共享同一数据对象。

  // ❌ 错误写法（导致所有实例共享数据）
  data: { count: 0 }
  

• 正确写法：data 必须是函数，每次创建实例时返回独立的数据副本。

  // ✅ 正确写法（每个实例拥有独立数据）
  data() {
    return { count: 0 } // 函数返回新对象
  }
  

底层原理 

Vue 在创建组件实例时，会调用 data 函数生成响应式数据对象。若直接使用对象，所有实例将指向同一内存地址，修改一处会影响所有实例。