Vue 基础语法
一、Vue 基础语法
1. 创建 Vue 应用实例
Vue 的核心是通过创建应用实例来管理页面的视图和数据。
代码示例：
const app = createApp({
template: '<h1>Hello, Vue!</h1>'
});
app.mount('#app');
核心流程解析：
● createApp：Vue 3 中用于创建应用实例的方法，接收一个根组件（对象或函数）作为参数。
● mount：将应用实例挂载到指定的 DOM 元素（如 #app）。
● 自动绑定模板：如果未显式定义 template，Vue 会自动将容器的 innerHTML 作为模板。
全局配置与扩展：
app.config.errorHandler = (err, instance, info) => {
console.error('错误信息:', err, '上下文:', info);
};
通过 app.config 可以配置全局行为，如错误处理、性能监控等。
2. 模板语法与数据绑定
(1) 插值表达式（Mustache 语法）
通过双大括号 {{ }} 将数据动态绑定到 DOM。
<div id="app">
<p>当前消息: {{ message }}</p>
</div>
<script>
const app = createApp({
data() {
return { message: 'Hello Vue!' };
}
});
app.mount('#app');
</script>
(2) 属性绑定（v-bind）
动态绑定 HTML 属性，如 id、class 等。
<div v-bind:id="dynamicId"></div>
<!-- 简写语法 -->
<div :id></div> <!-- 等价于 :id="id" -->
(3) 表单双向绑定（v-model）
实现表单元素与数据的双向同步。
<input v-model="message" placeholder="输入内容">
(4) 条件渲染（v-if/v-show）
根据条件决定是否渲染元素。
<p v-if="seen">现在你看到我了</p>
<p v-show="isVisible">我会切换显示状态</p>
(5) 列表渲染（v-for）
循环渲染列表数据。
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
(6) 事件绑定（v-on）
监听 DOM 事件并执行方法。
<button @click="increment">Increment</button>
<script>
const app = createApp({
data() {
return { count: 0 };
},
methods: {
increment() {
this.count++;
}
}
});
</script>
3. 组件化开发
组件是 Vue 的核心特性之一，允许将 UI 拆分为可复用的模块。
(1) 定义组件
const MyComponent = {
template: `<div>这是一个组件</div>`
};
(2) 注册组件
app.component('MyComponent', MyComponent);
(3) 组件通信
● 父子通信（props/$emit）：
<!-- 父组件 -->
<MyComponent :message="parentMsg" @update="handleUpdate" />
// 子组件
const MyComponent = {
props: ['message'],
template: `<div>{{ message }}</div>`
};
● 跨层级通信（provide/inject）：
// 父组件
const app = createApp({
provide() {
return { theme: 'dark' };
}
});
// 子组件
const ChildComponent = {
inject: ['theme']
};
● 全局状态管理（Vuex/Pinia）：
// Vuex 示例
const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) {
state.count++;
}
}
});
4. 生命周期钩子
Vue 组件从创建到销毁的过程中会触发一系列生命周期钩子。
Vue 3 生命周期对比 Vue 2：
| Vue 2 钩子 | Vue 3 钩子 | 作用 |
|---|---|---|
| beforeCreate | setup() | 初始化前 |
| created | setup() | 初始化完成 |
| beforeMount | onBeforeMount() | 挂载前 |
| mounted | onMounted() | 挂载完成 |
| beforeUpdate | onBeforeUpdate() | 数据更新前 |
| updated | onUpdated() | 数据更新后 |
代码示例：
const app = createApp({
mounted() {
console.log('组件已挂载');
}
});
二、Vue 核心原理
1. 响应式系统
Vue 的核心特性是响应式数据绑定，即数据变化时视图自动更新。
(1) Vue 2 的响应式原理
● Object.defineProperty：通过劫持对象的 getter 和 setter 来追踪依赖。
● 依赖收集（Watcher/Dep）：每个数据属性维护一个 Dep，当数据变化时通知所有依赖的 Watcher 更新视图。
(2) Vue 3 的响应式原理
● Proxy/Reflect：Vue 3 使用 Proxy 替代 Object.defineProperty，支持更全面的拦截操作。
● reactive 和 ref：
const state = reactive({ count: 0 });
const count = ref(0);
代码示例：
const data = { message: 'Hello Vue!' };
const proxy = new Proxy(data, {
get(target, key) {
console.log('获取数据:', key);
return Reflect.get(target, key);
},
set(target, key, value) {
console.log('设置数据:', key, value);
return Reflect.set(target, key, value);
}
});
2. 虚拟 DOM 与 Diff 算法
Vue 通过虚拟 DOM 提升性能，避免频繁直接操作真实 DOM。
(1) 虚拟 DOM 的构建
Vue 将模板编译为虚拟 DOM 树（VNode），然后通过 Diff 算法对比新旧树的差异。
(2) Diff 算法
● 同层比较：只比较同一层级的节点，时间复杂度为 O(n)。
● Key 优化：通过 key 属性快速定位节点，减少不必要的重排。
代码示例：
<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return { message: 'Hello Vue!' };
}
};
</script>
3. 模板编译原理
Vue 的模板语法最终会被编译为 render 函数，生成虚拟 DOM。
编译流程：
● 解析模板：将 HTML 模板解析为抽象语法树（AST）。
● 优化 AST：标记静态节点以优化后续更新。
● 生成 render 函数：将 AST 转换为可执行的 JavaScript 代码。
代码示例：
// 模板
const template = `<div id="app"><p>{{ message }}</p></div>`;
// 编译后
function render() {
return h('div', { id: 'app' }, [
h('p', {}, [message])
]);
}
三、总结与最佳实践
1. 核心优势
● 响应式系统：数据驱动视图，无需手动操作 DOM。
● 组件化设计：高复用性、易维护的代码结构。
● 高效的虚拟 DOM：通过 Diff 算法最小化 DOM 操作。
2. 最佳实践
● 使用 Composition API：Vue 3 的 setup() 和 ref/reactive 提升代码可读性。
● 避免直接操作 DOM：优先使用 Vue 的数据绑定和指令。
● 合理使用 Key：在 v-for 中始终添加 :key 优化渲染性能。
3. 学习资源推荐
● 官方文档：Vue 3 官方文档
● 书籍：《Vue.js 设计与实现》（霍春阳）
● 社区：掘金、知乎、GitHub 开源项目（如 element-plus）
