Vue.js 学习笔记

1. 核心概念

1.1 Vue 实例

每个 Vue 应用的核心是一个 Vue 实例。实例管理数据、模板和 DOM 之间的绑定关系：

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

1.2 模板语法

Vue 的模板语法简洁直观，可以轻松实现数据与页面的绑定：

• 插值：用 {{ message }} 将数据渲染到页面。

• 属性绑定：用 v-bind 或简写 : 绑定属性，如 :src="imageUrl"。

• 事件绑定：用 v-on 或简写 @ 来绑定事件，如 @click="doSomething"。

2. Vue 指令

Vue 提供了丰富的指令，常见的有：

• v-if：条件渲染，用于根据条件动态显示或隐藏元素。

<p v-if="isVisible">Visible content</p>

• v-for：循环渲染，用于渲染列表。

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

• v-model：双向绑定，一般用于表单输入和数据同步。

<input v-model="username">

3. 组件化开发

Vue 的核心优势在于其组件化开发。组件封装了逻辑、样式和模板，使代码更易复用和维护。

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

组件之间可以通过 props 传递数据，从而实现父子组件通信：

<my-component :title="title"></my-component>

4. Vue 生命周期

Vue 实例在不同阶段有一系列生命周期钩子函数：

• created：实例创建完成，数据已经可以访问。

• mounted：模板挂载完成，DOM 可访问。

• updated：响应式数据更新时触发。

• destroyed：实例销毁时调用，用于清理事件监听等。

5. Vue Router

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页应用。

• 定义路由：

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];
const router = new VueRouter({
  routes
});

导航链接：

<router-link to="/home">Home</router-link>
<router-view></router-view>

6. Vuex 状态管理

Vuex 是 Vue.js 的官方状态管理库，用于管理应用的全局状态。

• State：存储全局状态。

• Mutations：用于同步更新状态。

• Actions：用于异步操作。

• Getters：用于计算派生状态。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

7. Composition API

Composition API 是 Vue 3 引入的新特性，使代码逻辑组织更加灵活和模块化。

7.1 setup 函数

setup 是 Composition API 的核心方法，用于定义组件的初始化逻辑。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment };
  }
};

7.2 ref 和 reactive

• ref：用于定义基本类型的响应式数据，访问时需通过 .value。

• reactive：用于定义对象类型的响应式数据。

import { reactive } from 'vue';

const state = reactive({ name: 'Alice', age: 25 });

7.3 watch 和 computed

• watch：监控响应式数据的变化。

import { watch } from 'vue';

watch(() => state.name, (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`);
});

• computed：计算属性，缓存计算结果，只有在依赖改变时才重新计算。

import { computed } from 'vue';

const doubleCount = computed(() => count.value * 2);

8.组件通信

• 父组件向子组件传递数据：使用 props。

<!-- ParentComponent.vue -->
<ChildComponent :message="parentMessage" />

<!-- ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
};
</script>

• 子组件向父组件传递数据：使用 $emit 触发事件。

<!-- ChildComponent.vue -->
<template>
  <button @click="$emit('message-from-child', 'Hello from Child!')">Send</button>
</template>

<!-- ParentComponent.vue -->
<ChildComponent @message-from-child="receiveMessage" />

• 非父子组件通信：可以使用事件总线（Event Bus）或 Vuex。

// eventBus.js
export const EventBus = new Vue();

// 在组件 A 中发送
EventBus.$emit('message-event', 'Hello from Component A');

// 在组件 B 中接收
EventBus.$on('message-event', (msg) => { /* Handle msg */ });