vue3入门特性

Vue 3 是一个用于构建用户界面的渐进式 JavaScript 框架：核心思想是通过声明式的方式来描述 UI 组件，并通过响应式系统来自动更新 UI。Vue 3 引入了许多新特性和改进，包括组合式 API（Composition API）、更好的性能和 TypeScript 支持。

Vue 3 使用原理

1. 声明式渲染：

   • Vue 允许你通过声明式的方式来描述 UI。你只需要定义数据和模板，Vue 会自动将数据渲染到模板中。

2. 响应式系统：

   • Vue 的响应式系统会自动追踪数据的变化，并在数据变化时更新 UI。Vue 3 使用 Proxy 对象来实现响应式系统，相比 Vue 2 的 Object.defineProperty，性能更好，功能更强大。

3. 组件化：

   • Vue 允许你将 UI 分解成独立的、可复用的组件。每个组件包含自己的模板、数据和逻辑。

4. 组合式 API：

   • Vue 3 引入了组合式 API，允许你通过函数来组织组件的逻辑。这种方式更灵活，更易于复用和测试。

代码实例

1. 安装 Vue 3

使用 Vue CLI 或 Vite 来创建一个 Vue 3 项目。这里我使用 Vite。

npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

2. 创建一个简单的 Vue 3 组件

在 src 目录下创建一个新的组件文件 HelloWorld.vue：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Click me</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue 3!');

function updateMessage() {
  message.value = 'You clicked the button!';
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

3. 使用组件

在 src/App.vue 中使用 HelloWorld 组件：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue';
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4. 运行项目

在终端中运行以下命令来启动开发服务器：

npm run dev

打开浏览器访问 http://localhost:3000

详细说明

1. 声明式渲染：

   • 在 HelloWorld.vue 中，我们使用模板语法 {{ message }} 来绑定数据 message。Vue 会自动将 message 的值渲染到模板中。

2. 响应式系统：

   • 我们使用 ref 函数创建了一个响应式数据 message。当 message 的值发生变化时，Vue 会自动更新 UI。

3. 组件化：

   • 我们将 UI 分解成独立的组件 HelloWorld，并在 App.vue 中使用它。每个组件包含自己的模板、数据和逻辑。

4. 组合式 API：

   • 我们使用组合式 API（ref 和 setup）来组织组件的逻辑。ref 创建了一个响应式数据，setup 函数是组件的入口点，用于初始化数据和定义方法。
     在使用 Vue 3 创建项目时，通常会有一个标准的目录结构。这个结构有助于组织代码，使项目更易于维护和扩展。以下是一个典型的 Vue 3 项目目录结构及其各个部分的作用：

典型的 Vue 3 项目目录结构

my-vue-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.js
└── yarn.lock / package-lock.json

各个目录和文件的作用

1. node_modules/：

   • 作用：存放项目的所有依赖包。这个目录由包管理器（如 npm 或 yarn）自动生成和管理。

2. public/：

   • 作用：存放静态资源，这些资源不会被 Webpack 处理，直接复制到最终的构建目录。
   • favicon.ico：网站的图标。
   • index.html：项目的入口 HTML 文件。Vue CLI 会在构建时自动注入生成的 JavaScript 和 CSS 文件。

3. src/：

   • 作用：存放项目的源代码。
   • assets/：存放静态资源，如图片、字体等。这些资源会被 Webpack 处理。
     • logo.png：示例图片文件。
   • components/：存放 Vue 组件。
     • HelloWorld.vue：示例组件文件。
   • views/：存放视图组件，通常用于路由。
     • Home.vue：示例视图文件。
   • App.vue：根组件，所有其他组件都是这个组件的子组件。
   • main.js：项目的入口文件，创建 Vue 实例并挂载到 DOM。
   • router.js：路由配置文件（如果使用 Vue Router）。

4. .gitignore：

   • 作用：指定哪些文件和目录不应该被 Git 版本控制系统追踪。

5. index.html：

   • 作用：项目的入口 HTML 文件。与 public/index.html 类似，但通常用于开发环境。

6. package.json：

   • 作用：项目的配置文件，包含项目的基本信息、依赖包、脚本等。

7. README.md：

   • 作用：项目的说明文件，通常用于描述项目的用途、安装和使用方法。

8. vite.config.js：

   • 作用：Vite 的配置文件，用于配置项目的构建和开发环境。

9. yarn.lock / package-lock.json：

   • 作用：锁定依赖包的版本，确保在不同环境中安装的依赖包版本一致。

代码示例

以下是一些关键文件的示例代码：

src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

src/App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/router.js

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

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

const router = createRouter