介绍Vue

1. 基本概念

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。它被设计为可以自底向上逐层应用，核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。

2. 核心特性

渐进式框架

可以在项目中逐步引入，不需要重写整个应用
从简单的页面交互到复杂的 SPA 都能胜任

响应式数据绑定

数据变化自动更新视图
基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现

组件化开发

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

双向数据绑定

v-model 指令实现表单元素的双向绑定

<input v-model="message" />

3. Vue 模板语法

插值表达式

<template>
  <div>{{ message }}</div>
</template>

指令系统

<template>
  <div v-if="show">条件渲染</div>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
  <button @click="handleClick">点击事件</button>
</template>

4. 组件结构（单文件组件）

<template>
  <!-- 模板 -->
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>
 
<style scoped>
/* 样式 */
.hello {
  color: #42b883;
}
</style>

5. Vue 3 新特性

Composition API

import { ref, reactive, computed, onMounted } from 'vue'
 
export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'John' })
    
    const doubledCount = computed(() => count.value * 2)
    
    onMounted(() => {
      console.log('组件挂载完成')
    })
    
    return { count, user, doubledCount }
  }
}

更好的 TypeScript 支持 性能提升 - 更小的包体积，更快的渲染 多个根节点 - Fragment 支持 Teleport - 组件传送功能

6. 核心功能

指令系统

v-if/v-else：条件渲染
v-for：列表渲染
v-model：双向绑定
v-bind（:）：属性绑定
v-on（@）：事件监听

计算属性和侦听器

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
},
watch: {
  message(newVal, oldVal) {
    console.log('message changed')
  }
}

组件通信

Props down：父传子
Events up：子传父
Provide/Inject：跨层级传递
Vuex/Pinia：状态管理

7. 生态系统

官方工具

Vue CLI / Vite：项目脚手架
Vue Router：路由管理
Vuex / Pinia：状态管理
Vue DevTools：开发调试工具

UI 组件库

Element UI/Plus：桌面端
Vant：移动端
Quasar：跨平台

8. Vue 2 vs Vue 3 主要差异

特性	Vue 2	Vue 3
API	Options API	Composition API + Options API
响应式	Object.defineProperty	Proxy
TypeScript	支持一般	原生支持
性能	较好	更优秀
包体积	较大	更小

9. 优势

学习曲线平缓 - 容易上手，文档友好 渐进式 - 可以逐步采用，不需要重写项目 性能优秀 - 响应式系统高效 开发体验好 - 模板语法直观，调试方便 中文社区活跃 - 作者是华人，中文资料丰富

前端面试题库

探索