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');组件详解
引入 Vue 和根组件:
import Vue from 'vue';：导入 Vue 库，这是使用 Vue 框架的前提。import App from './App.vue';：导入项目的根组件（通常命名为App.vue），它是所有其他组件的父组件。
配置项:
Vue.config.productionTip = false;：默认情况下，当你的应用处于生产环境时，Vue 会在控制台输出一条提示消息。设置为false可以禁用这条提示。
创建 Vue 实例:
- 使用
new Vue({ ... })创建一个新的 Vue 实例。 render: h => h(App)：这是一个简写形式的渲染函数，用来渲染App组件。这里的h是createElement的缩写，它是一个用来生成虚拟 DOM 节点的函数。
- 使用
挂载 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
关键注意事项
mounted与$nextTick：mounted不保证子组件全部挂载，需等待所有DOM就绪时使用this.$nextTick(() => { ... })。- 避免在
updated中修改数据：可能导致死循环，如需修改可在beforeUpdate中处理。
根组件与子组件的应用场景
- 根组件：负责全局状态管理、路由配置、应用入口等顶层逻辑。
- 子组件：封装页面中的独立功能模块，如列表项、按钮、表单等，通过props接收根组件传递的配置数据，通过事件与根组件交互，实现功能解耦和复用。
vue组件组成部分
Vue 2 是一个流行的渐进式 JavaScript 框架，用于构建用户界面。组件是 Vue 中的核心概念之一，它们允许你将用户界面分割成独立且可复用的部分。每个 Vue 组件通常包含以下部分：
- 模板(Template): 使用HTML来声明组件的布局和结构。
- 脚本(Script): 包含逻辑代码，通过选项如
data,methods,computed等定义组件的行为。 - 样式(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 函数生成响应式数据对象。若直接使用对象，所有实例将指向同一内存地址，修改一处会影响所有实例。