vue基础知识

一、Vue 是什么

• 渐进式框架：只用一小部分功能即可上手，也能通过插件或官方生态（Router、Pinia、CLI 等）扩展到大型单页应用。

• 响应式视图层：数据变化驱动视图更新，视图操作也可通过事件回流更新数据，实现“双向绑定”。

• 组件化：一切 UI 都由可复用的组件构成，便于维护与组合。

二、快速上手

在页面中引入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
  const App = {
    data() { return { message: 'Hello Vue!' } }
  };
  Vue.createApp(App).mount('#app');
</script>

CLI 工具

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

三、模板语法

• 插值：{{ value }}

• 指令（以 v- 开头）

  • v-bind:attr="expr" / 简写 :attr="expr"

  • v-on:event="handler" / 简写 @event="handler"

  • v-if="cond"、v-else-if="cond"、v-else

  • v-show="cond" （仅控制 display）

  • v-for="item in list" :key="item.id"

  • v-model="data" （双向绑定 <input>、<select>、自定义组件）

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

四、选项式 API（Options API）

在组件中通过 export default {} 定义以下选项：

data

data() {
  return { count: 0 };
}

props

props: {
  title: String,
  size: { type: Number, default: 10 },
}

computed

computed: {
  double() { return this.count * 2; }
}

methods

methods: {
  inc() { this.count++; }
}

watch

watch: {
  count(newVal, oldVal) { console.log(newVal, oldVal) }
}

lifecycle hooks
created、mounted、updated、unmounted 等

export default {
  data() { return { count: 0 } },
  computed: {
    double() { return this.count * 2 }
  },
  methods: {
    inc() { this.count++ }
  },
  mounted() {
    console.log('组件已挂载');
  }
};

五、组合式 API（Composition API）

在 <script setup> 或 setup() 中以函数形式组织逻辑：

<script setup>
import { ref, computed, watch, onMounted } from 'vue';

const count = ref(0);
const double = computed(() => count.value * 2);
function inc() { count.value++; }

watch(count, (newVal, oldVal) => console.log(newVal, oldVal));
onMounted(() => console.log('mounted'));
</script>

<template>
  <button @click="inc">点击 {{ count }} 次，双倍 {{ double }}</button>
</template>

• ref / reactive：创建响应式数据

• computed：计算属性

• watch：侦听并处理副作用

• 生命周期：onMounted、onUnmounted、onBeforeUpdate 等

六、组件通信

• 父传子：<Child :propData="data" /> + props

• 子向父：this.$emit('eventName', payload) + <Child @eventName="handler" />

• provide / inject：跨多层组件传值

• 全局状态管理：Pinia（或 Vuex）

// Child.vue
export default {
  props: ['msg'],
  emits: ['ok'],
  template: `<div>{{ msg }} <button @click="$emit('ok', 123)">OK</button></div>`
};

七、路由与状态管理

1. Vue Router

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});
app.use(router);

Pinia（替代 Vuex）

import { defineStore } from 'pinia';
export const useMainStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: { inc() { this.count++ } },
});
// 组件中
const store = useMainStore();

八、常用工具与生态

• CLI：@vue/cli、Vite（更快的构建）

• UI 库：Element Plus、Ant Design Vue、Naive UI

• 动效：Vue Transitions、VueUse 动画组合函数

• 测试：Vue Test Utils + Jest / Vitest

• SSR / SSG：Nuxt.js

九、性能与优化

• 按需加载：组件懒加载 defineAsyncComponent

• v-memo、v-once：减少不必要的更新

• 合理拆分组件：避免单组件过大

• 打包分析：vite-plugin-visualizer / webpack-bundle-analyzer