Vue 简介 - 技术栈

一、什么是 Vue.js？

Vue （发音 /vjuː/，类似 "view"）是一个用于构建用户界面的 渐进式 JavaScript 框架。
由前 Google 工程师 尤雨溪（Evan You） 于 2014 年创建并开源。
核心库只关注视图层（View Layer），易于上手，也便于与第三方库或现有项目集成。

🔑 核心定位：渐进式（Progressive）

这意味着 Vue 可以这样使用：

使用方式	说明
作为 CDN 脚本引入	在 HTML 中直接 `<script>` 引入，为静态页面添加交互
构建单文件组件（SFC）	使用 `.vue` 文件组织代码，适合中大型项目
搭配 CLI 工具开发 SPA	使用 `Vue CLI` 或 `Vite` 构建现代化单页应用
服务端渲染（SSR）	使用 Nuxt.js 实现 SEO 友好型应用
全栈开发	结合后端框架（如 NestJS、Express）构建完整应用

二、Vue 的核心特性

1. 🎯 响应式数据绑定（Reactivity）

Vue 通过 Proxy（Vue 3） 或 Object.defineProperty（Vue 2） 实现数据劫持，当数据变化时，视图自动更新。

javascript 复制代码

const { createApp } = Vue;

createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}).mount('#app');

html 复制代码

<div id="app">
  {{ message }} <!-- 数据变化，此处自动更新 -->
</div>

2. 🧩 组件化（Component-Based）

将 UI 拆分为独立、可复用的组件，每个组件包含自己的模板、逻辑和样式。

html 复制代码

<!-- Button.vue -->
<template>
  <button @click="onClick">{{ text }}</button>
</template>

<script>
export default {
  props: ['text'],
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
}
</script>

3. 📐 指令系统（Directives）

以 v- 开头的特殊属性，用于在 DOM 上应用响应式行为。

指令	作用
`v-model`	双向数据绑定
`v-if` / `v-show`	条件渲染
`v-for`	列表渲染
`v-on` (`@`)	事件监听
`v-bind` (`:`)	属性绑定

html 复制代码

<input v-model="name" />
<p v-if="name">你好，{{ name }}！</p>
<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

4. 🔄 单向数据流 + 事件通信

父组件 → 子组件 ：通过 props 传递数据
子组件 → 父组件 ：通过 $emit 触发事件

html 复制代码

<!-- 父组件 -->
<ChildComponent :title="parentTitle" @update="handleUpdate" />

<!-- 子组件 -->
<script>
export default {
  props: ['title'],
  methods: {
    changeTitle() {
      this.$emit('update', 'New Title');
    }
  }
}
</script>

三、Vue 2 vs Vue 3：主要区别

特性	Vue 2	Vue 3
响应式原理	`Object.defineProperty`	`Proxy`（更高效）
Composition API	❌ 不支持	✅ 支持（逻辑复用更灵活）
Teleport	❌	✅ 将 DOM 移动到任意位置（如模态框）
Fragments	❌ 模板需单根元素	✅ 支持多根节点
性能	良好	更快的渲染、更小的包体积
TypeScript 支持	一般	原生支持，类型推断更强

✅ 推荐：新项目应优先选择 Vue 3。

四、一个简单的 Vue 应用示例

1. 通过 CDN 快速体验

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ title }}</h1>
    <input v-model="newItem" @keyup.enter="addItem" placeholder="输入内容" />
    <ul>
      <li v-for="item in items" :key="item.id" @click="removeItem(item)">
        {{ item.text }}
      </li>
    </ul>
  </div>

  <script>
    const { createApp, ref } = Vue;

    createApp({
      setup() {
        const title = ref('我的待办列表');
        const items = ref([
          { id: 1, text: '学习 Vue' },
          { id: 2, text: '编写代码' }
        ]);
        const newItem = ref('');

        function addItem() {
          if (newItem.value.trim()) {
            items.value.push({
              id: Date.now(),
              text: newItem.value
            });
            newItem.value = '';
          }
        }

        function removeItem(item) {
          items.value = items.value.filter(i => i !== item);
        }

        return {
          title,
          items,
          newItem,
          addItem,
          removeItem
        };
      }
    }).mount('#app');
  </script>
</body>
</html>

五、Vue 的生态系统

Vue 不只是一个框架，更是一套完整的开发生态：

工具	用途
Vue Router	官方路由管理器，实现 SPA 导航
Pinia（推荐） / Vuex	状态管理，集中管理应用数据
Vite	极速的前端构建工具，官方推荐
Nuxt.js	服务端渲染（SSR）和静态站点生成（SSG）框架
Vue DevTools	浏览器调试工具，可视化组件树和状态

六、Vue 适合哪些项目？

项目类型	是否适合
企业后台管理系统	✅ 非常适合（Element Plus、Ant Design Vue）
移动端 H5 页面	✅ 轻量、快速
单页应用（SPA）	✅ 核心应用场景
复杂的富交互应用	✅ 组件化 + 状态管理
渐进式 Web 应用（PWA）	✅ 支持良好
大型团队协作项目	✅ 类型安全（TS）+ 工程化支持强

七、学习路径建议

基础语法：模板、指令、计算属性、侦听器
组件开发：Props、Events、Slots
状态管理：Pinia
路由：Vue Router
工程化：Vite + TypeScript
进阶：Composition API、自定义指令、插件开发

八、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！