Vue3 是 Vue.js 的重大更新，提供了性能提升、简洁 API 和强大功能。本文将带你从零开始，一步步学习如何使用 Vue3 构建动态网页，并通过实战项目来加深理解。

首先，确保你的开发环境中已安装 Node.js 和 npm。接下来，通过 npm 来安装 Vue CLI，这是 Vue3 的命令行工具，用于快速创建项目。

# 安装Vue CLI
npm install -g @vue/cli

创建一个新的 Vue3 项目：

# 初始化Vue3项目
vue create my-vue-project
# 进入项目目录
cd my-vue-project
# 启动开发服务器
npm run serve

这里，我们创建了一个名为 my-vue-project 的新 Vue3 项目，并启动了开发服务器。打开浏览器访问 http://localhost:8080，你将看到一个简单的 "Hello Vue3基础语法

数据绑定与插值表达式

在 Vue3 中，数据绑定是实现视图与数据同步的关键。通过 v-model 指令，我们可以在输入框与组件状态之间建立双向绑定。

<!-- App.vue -->
<template>
  <div>
    {{ message }}
    <input v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};
</script>

条件渲染与列表渲染

条件渲染和列表渲染是 Vue3 实现动态视图的强大工具。使用 v-if 和 v-for 指令，你可以根据条件和数据集动态展示内容。

<!-- App.vue -->
<template>
  <div>
    <div v-if="showMessage">显示消息</div>
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true,
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    };
  }
};
</script>

事件处理与表单输入绑定

事件处理是 Vue3 中一个强大的特性，允许你绑定自定义事件和表单输入到组件上。通过 v-on 指令，可以实现事件监听。

<!-- App.vue -->
<template>
  <div>
    <button v-on:click="addItem">添加项目</button>
    <input v-model="projectName" v-on:keyup.enter="addItem" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      projectName: '',
      items: ['Project1', 'Project2']
    };
  },
  methods: {
    addItem() {
      if (this.projectName.trim()) {
        this.items.push(this.projectName);
        this.projectName = '';
      }
    }
  }
};
</script>

组件化开发是 Vue3 的一大特色，通过创建自定义组件，可以复用代码并提高代码组织性。

<!-- components/MyComponent.vue -->
<template>
  <div>我是自定义组件</div>
</template>

<script>
export default {
  props: {
    message: String,
    type: String
  }
};
</script>

<!-- App.vue -->
<template>
  <div>
    <my-component v-bind:message="message" v-bind:type="type" />
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      message: '测试组件',
      type: 'info'
    };
  }
};
</script>

Ref与Reactive基础

在 Vue3 中，ref 和 reactive 是实现响应式的核心工具。ref 用于创建可变的原始值引用，而 reactive 则用于创建响应式的对象实例。

// 创建一个可变值引用
const number = ref(0);

// 创建一个响应式对象实例
const data = reactive({
  name: 'Vue3'
});

computed计算属性

computed 属性允许我们在 Vue3 中创建复杂的计算属性，getter 和 setter 用于获取和设置属性值。

// 创建一个计算属性
const fullName = computed({
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  set(newName) {
    const parts = newName.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
});

Watch侦听器

watch 侦听器允许我们在数据属性变化时执行特定的代码。这对于实现更复杂的逻辑处理非常有用。

watch: {
  message(newVal, oldVal) {
    console.log(`Message changed: ${oldVal} -> ${newVal}`);
  }
}

Setup函数详解

setup 函数是 Vue3 的核心，它提供了更强大的 API 来构建组件逻辑。通过 setup, 我们可以直接返回响应式数据、方法和生命周期钩子。

// setup函数的使用
export default {
  setup(props, { emit }) {
    const message = ref('初始消息');
    const handleClick = () => {
      message.value = '点击事件触发';
      emit('change-message', message.value);
    };
    return { message, handleClick };
  }
};

使用Composition API重构组件

将 setup 函数引入组件内部，可以清晰地将逻辑和状态分开，增强代码的可读性和可维护性。

<!-- App.vue -->
<template>
  <div>
    <button @click="handleClick">{{ message }}</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('初始消息');
    const handleClick = () => {
      message.value = '点击事件触发';
    };
    onMounted(() => {
      console.log('已加载');
    });
    return { message, handleClick };
  }
};
</script>

Vue Router基本使用

Vue Router 是 Vue.js 的官方路由管理器，它的使用可以极大地简化单页面应用的路由管理。

// 导入Vue Router
import { createRouter, createWebHistory } from 'vue-router';
// 导入路由组件
import Home from './views/Home.vue';
import About from './views/About.vue';

// 配置路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// 使用路由
export default router;

Vuex入门与状态管理

Vuex 是 Vue.js 的状态管理库，用于集中管理状态树，适用于大型应用的状态管理。

// 安装Vuex
npm install vuex

// 创建store
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

创建多页面项目

在 my-vue-project 项目中，我们将构建一个包含两个页面的应用：Home 和 About。

# 创建路由组件
vue generate component Home
vue generate component About

集成路由与状态管理

在 src/router/index.js 中集成路由配置，并在 src/store/index.js 中集成 Vuex。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

实现页面功能

在每个组件中实现特定的功能，如计数器、按钮点击事件等。

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>主页</h1>
    <p>计数器: {{ count }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

通过以上步骤，你已经从零开始构建了使用 Vue3 的动态网页，并通过实战项目深入了解了 Vue3 的核心概念和实际应用。随着项目的深入学习和实践，你将能够开发出更加复杂和具有交互性的应用。