vue学习

Vue3 操作详情

1. Vue3 介绍

Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面。Vue3 是 Vue.js 的最新主要版本，它带来了诸多性能提升和新特性，如 Composition API、Teleport、Suspense 等。

2. 安装 Vue3

2.1 使用 npm 安装

1. 确保你已经安装了 Node.js 和 npm。你可以在命令行中输入以下命令检查版本：

node -v
npm -v

1. 创建一个新的 Vue3 项目，使用 Vue CLI 工具：

npm install -g @vue/cli
vue create my - vue3 - project

在创建过程中，你可以选择默认配置，或者根据项目需求进行自定义配置。

2.2 使用 CDN 引入

在 HTML 文件中直接引入 Vue3 的 CDN 链接：

<script src="https://unpkg.com/vue@next"></script>

这种方式适用于快速原型开发或小型项目。

3. Vue3 基础语法

3.1 创建 Vue 实例

import { createApp } from 'vue'
const app = createApp({
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  }
})
app.mount('#app')

3.2 模板语法

1. 插值：在模板中使用双大括号（）进行文本插值。

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

1. 指令：例如v - if、v - for、v - bind（缩写为:）、v - on（缩写为@）等。

<!-- v - if 指令 -->
<div v - if="isShow">This is a visible div</div>
<!-- v - for 指令 -->
<ul>
  <li v - for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
<!-- v - bind 指令 -->
<img :src="imageUrl" alt="An image">
<!-- v - on 指令 -->
<button @click="handleClick">Click me</button>

4. Vue3 组件

4.1 创建组件

1. 单文件组件（.vue 文件）

<template>
  <div>
    <h1>{{ componentTitle }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const componentTitle = ref('This is a Vue3 component')
</script>

1. 全局注册组件

在 main.js 中：

import { createApp } from 'vue'
import MyComponent from './components/MyComponent.vue'
const app = createApp({})
app.component('MyComponent', MyComponent)
app.mount('#app')

1. 局部注册组件

在需要使用组件的父组件中：

<template>
  <div>
    <MyComponent />
  </div>
</template>

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

4.2 组件通信

1. 父子组件通信

• 父传子：父组件通过 props 向子组件传递数据。

• 子传父：子组件通过$emit触发事件，父组件监听该事件来接收子组件的数据。

1. 兄弟组件通信：可以通过一个中央事件总线或者使用 Vuex 等状态管理库来实现。

5. Vue3 响应式原理

Vue3 使用 Proxy 来实现响应式系统。与 Vue2 的 Object.defineProperty 相比，Proxy 有更好的性能和更强大的功能。

import { reactive } from 'vue'
const state = reactive({
  count: 0
})

当state.count的值发生变化时，Vue3 会自动检测到并更新与之绑定的 DOM。

6. Vue3 的 Composition API

Composition API 是 Vue3 的一个重要特性，它提供了一种更加灵活和高效的方式来组织组件逻辑。

6.1 setup 函数

setup函数是 Composition API 的入口点，在组件创建之前执行。

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>{{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => {
  count.value++
}
</script>

6.2 组合逻辑

通过组合不同的函数，你可以将相关的逻辑抽离成可复用的函数。

import { ref } from 'vue'
const useCounter = () => {
  const count = ref(0)
  const increment = () => {
    count.value++
  }
  return {
    count,
    increment
  }
}

在组件中使用：

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>{{ count }}</p>
  </div>
</template>

<script setup>
const { count, increment } = useCounter()
</script>

7. Vue3 的其他特性

7.1 Teleport

Teleport 提供了一种将组件的一部分渲染到 DOM 中其他位置的方法。

<template>
  <div>
    <button @click="showModal = true">Open Modal</button>
    <teleport to="body">
      <div v - if="showModal" class="modal">
        <div class="modal - content">
          <p>Modal content</p>
          <button @click="showModal = false">Close</button>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>

7.2 Suspense

Suspense 用于处理异步组件的加载状态。

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <p>Loading...</p>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() => import('./components/AsyncComponent.vue'))
</script>

通过以上内容，你可以对 Vue3 的基本操作有一个较为全面的了解，希望能帮助你在项目中更好地使用 Vue3。