Vue 2 原理及重要知识点
1. 响应式系统
- 核心：Vue 2 使用
Object.defineProperty实现数据响应式。 - 原理：通过递归遍历数据对象，将每个属性转换为 getter 和 setter，在数据变化时触发视图更新。
- 局限：无法检测到对象属性的添加或删除，数组的变化需要通过特定方法（如
push、pop等）触发。
2. 虚拟 DOM
- 核心：Vue 2 使用虚拟 DOM 提高渲染性能。
- 原理：通过 JS 对象模拟真实 DOM，数据变化时生成新的虚拟 DOM，与旧的虚拟 DOM 进行对比（diff 算法），找出最小更新范围，最后批量更新真实 DOM。
3. 模板编译
- 核心：Vue 2 的模板会被编译成渲染函数。
- 原理：模板通过 Vue 的编译器转换为 render 函数，render 函数返回虚拟 DOM 节点，最终生成真实 DOM。
4. 生命周期钩子
-
核心：Vue 2 提供了一系列生命周期钩子函数，允许在组件不同阶段执行代码。
-
重要钩子：
beforeCreate：实例初始化后，数据观测和事件配置之前。created：实例创建完成，数据观测和事件配置完成。beforeMount：挂载开始之前，render 函数首次调用。mounted：实例挂载到 DOM 后调用。beforeUpdate：数据更新时，DOM 重新渲染前。updated：数据更新后，DOM 重新渲染后。beforeDestroy：实例销毁前。destroyed：实例销毁后。
5. 组件系统
-
核心：Vue 2 采用组件化开发模式。
-
特点：
- 组件是可复用的 Vue 实例。
- 通过
props进行父子组件通信。 - 通过
$emit触发父组件事件。 - 通过
slot实现内容分发。
6. 指令
-
核心：Vue 2 提供了一系列内置指令，用于操作 DOM。
-
常用指令：
v-bind：动态绑定属性。v-model：双向数据绑定。v-for：列表渲染。v-if/v-else：条件渲染。v-on：事件监听。
7. 计算属性和侦听器
- 计算属性：
computed，基于依赖的缓存，适合复杂逻辑计算。 - 侦听器：
watch，监听数据变化，适合异步或开销较大的操作。
Vue 2 项目结构
一个典型的 Vue 2 项目结构如下：
my-vue-project/
├── public/ # 静态资源目录（不经过 webpack 处理）
│ └── index.html # 入口 HTML 文件
├── src/ # 项目源码目录
│ ├── assets/ # 静态资源（图片、字体等）
│ ├── components/ # 组件目录
│ ├── views/ # 页面级组件
│ ├── router/ # 路由配置
│ ├── store/ # Vuex 状态管理
│ ├── App.vue # 根组件
│ ├── main.js # 项目入口文件
├── .gitignore # Git 忽略文件配置
├── babel.config.js # Babel 配置文件
├── package.json # 项目依赖和脚本配置
├── README.md # 项目说明文件
└── vue.config.js # Vue CLI 配置文件（可选）
Vue 2 安装方法
1. 使用 Vue CLI 创建项目
Vue CLI 是官方推荐的脚手架工具，适合快速搭建 Vue 项目。
# 全局安装 Vue CLI
npm install -g @vue/cli
# 创建项目
vue create my-vue-project
# 进入项目目录
cd my-vue-project
# 启动开发服务器
npm run serve
2. 直接引入 Vue.js
如果不需要复杂的构建工具，可以直接通过 <script> 标签引入 Vue.js。
<!DOCTYPE html>
<html>
<head>
<title>My Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
3. 使用 npm 安装
如果已有项目，可以通过 npm 安装 Vue 2。
# 安装 Vue 2
npm install vue@2
# 安装 Vue Router（如果需要）
npm install vue-router@3
# 安装 Vuex（如果需要）
npm install vuex@3
Summary
- 原理：Vue 2 的核心是响应式系统和虚拟 DOM，通过
Object.defineProperty实现数据绑定。 - 重要知识点：响应式、虚拟 DOM、生命周期、组件系统、指令、计算属性和侦听器。
- 项目结构：典型的 Vue 2 项目包括
public、src、components、router、store等目录。 - 安装方法：可以通过 Vue CLI、直接引入 Vue.js 或 npm 安装。
