Vue3核心概念与项目创建指南-CSDN博客

本文链接：https://blog.csdn.net/qq_54889094/article/details/130857307

Vue3笔记整理

Vue2笔记点击这里

Vue3官网

Vue2中绝大多数的 API 与特性在 Vue3 中同样支持，同时 Vue3 中还新新增了特有的功能，并废弃了 Vue2 中的某些旧功能。

在这里，如果你对 Vue2 一点也不了解，并且想快速上手 Vue 的项目，那么直接学习 Vue3 即可，而如果你对 Vue2 有一定的认识，那么你学习 Vue3 也不需要多少时间就能学会，这就是对于 Vue 版本学习的选择

Vue3与Vue2的对比

Vue3废弃Vue2的哪些旧功能

在 Vue3 中过滤器已经不在支持使用，官方建议使用计算属性或方法代替被剔除的过滤器功能
在 Vue2 当中，<template> 节点内的 DOM 结构仅支持单个根节点。但是，在 Vue3 的版本中，<template> 节点中支持定义多个根节点

创建 Vue 的 SPA 项目

基于 vite 创建 SPA 项目

Vite 创建的项目仅支持 Vue3，过程如下

npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev

Vite的基本使用

基于 vue-cli 创建 SPA 项目

vue-cli 支持 Vue2 和 Vue3，过程如下

vue-cli的基础知识

Vue3选项式 API 和组合式 API

其实，如果你是了解 Vue2 的开发人员，那么你对选项式 API 已经不会陌生了，而 Vue3 同样支持选项式 API，在下面的笔记中，我们会详细介绍 Vue3 新增的内容，即组合式 API，它是推荐的用法，选项式 API 可以看 Vue2笔记这篇文章

setup 特殊钩子函数

Swiper.vue 文件如下

<template>
  <div>
    <h3>Swiper 轮播图组件</h3>
  </div>
</template>

<script>
export default {
  name: 'Swiper',
  // `setup` 是一个专门用于组合式 API 的特殊钩子函数
  setup() {
    return {}
  }
}
</script>

它有一个语法糖如下

<template>
  <div>
    <h3>Swiper 轮播图组件</h3>
  </div>
</template>

<script setup>
// name 为自动生成，为文件名称
</script>

响应式

<template>
  <div>
    <h3>Swiper 轮播图组件{{ state.count }}</h3>
  </div>
</template>

<script>
// reactive 函数可以创建一个响应式对象或数组
import { reactive } from 'vue'

export default {
  name: 'MySwiper',
  // 在这个特殊钩子函数中使用组合式 API
  setup() {
    const state = reactive({ count: 0 })

    // 暴露 state 到模板
    return {
      state
    }
  }
}
</script>

使用语法糖代码如下

<template>
  <div>
    <h3>Swiper 轮播图组件{{ state.count }}</h3>
  </div>
</template>

<script setup>
// reactive 函数可以创建一个响应式对象或数组
import { reactive } from 'vue'

const state = reactive({ count: 0 })
</script>

响应式基础

侦听器

去官网学习

计算属性

去官网学习

应用实例

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例

main.js 的初始代码如下

// 按需引入 createApp 函数
import { createApp } from 'vue'
// 引入 App 根组件
import App from './App.vue'
// 引入全局样式
import './index.css'

// 创建一个应用实例并挂载
createApp(App).mount('#app')

挂载应用

应用实例必须在调用了 mount() 方法后才会渲染出来，该方法接收一个容器参数，可以是一个实际的 DOM 元素，也可以是一个 CSS 选择器字符串

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

全局注册组件

我们可以使用 Vue 应用实例的 app.component() 方法，让组件在当前 Vue 应用中全局可用。

main.js 文件如下

// 按需引入 createApp 函数
import { createApp } from 'vue'
// 引入 App 根组件
import App from './App.vue'
// 导入全局注册的组件
import Swiper from './components/Swiper.vue'
// 引入全局样式
import './index.css'

// 创建一个应用实例
const app = createApp(App)
// 调用 component() 方法，注册全局组件
app.component('MySwiper', Swiper)

// 挂载一个应用实例
app.mount('#app')

Swiper.vue 文件如下

<template>
  <div>
    <h3>Swiper 轮播图组件</h3>
  </div>
</template>

<script>
export default {
  name: 'Swiper'
}
</script>

App.vue 文件如下

<template>
  <h1>App 根组件</h1>
  <hr>
  <!-- 全局注册组件使用 -->
  <MySwiper></MySwiper>
</template>

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

局部注册组件（组合式API）

Search.vue 文件如下

<template>
  <div>
    <h3>Search 搜索组件</h3>
  </div>
</template>

App.vue 文件如下

<template>
  <h1>App 根组件</h1>
  <hr>
  <!-- 全局注册组件使用 -->
  <MySwiper></MySwiper>
  <!-- 局部注册组件的使用 -->
  <Search></Search>
</template>

<script setup>
import Search from './components/Search.vue'
</script>
<style>
</style>

组件的props（组合式API）

Search.vue 文件如下

<template>
  <div>
    <h3>Search 搜索组件</h3>
  </div>
</template>

<script setup>
// 定义自定义属性
const props = defineProps(['foo'])

console.log(props.foo)
</script>

App.vue 文件如下

<template>
  <h1>App 根组件</h1>
  <hr>
  <!-- 全局注册组件使用 -->
  <MySwiper></MySwiper>
  <!-- 局部注册组件的使用 -->
  <!-- 传递自定义属性 -->
  <my-search foo="abc"></my-search>
</template>

<script setup>
import MySearch from './components/Search.vue'
</script>
<style>
</style>

props 的对象格式

Search.vue 文件如下

<template>
  <div>
    <h3>Search 搜索组件</h3>
  </div>
</template>

<script setup>
// 定义自定义属性
// const props = defineProps(['foo'])

// 使用对象格式定义 props
const props = defineProps({
  // 对于以对象形式声明中的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数
  foo: String,
  likes: Number
})

console.log(props.foo)
</script>

props 的效验

下面引用了官方的语句进行说明

Vue 组件可以更细致地声明对传入的 props 的校验要求。比如我们上面已经看到过的类型声明，如果传入的值不满足类型要求，Vue 会在浏览器控制台中抛出警告来提醒使用者。这在开发给其他开发者使用的组件时非常有用。

要声明对 props 的校验，你可以向 defineProps() 宏提供一个带有 props 校验选项的对象，例如：

<template>
  <div>
    <h3>Search 搜索组件</h3>
  </div>
</template>

<script setup>
// props 效验
const props = defineProps({
  propsA: Number,
  propsB: [Number, String],
  propsC: {
    // 类型
    type: String,
    // 必填
    required: true,
    // 默认值
    default: 'c'
  },
  foo: {
    type: String,
    required: true,
    default: 'abc'
  }
  // 更多细节可在官网查看
})

console.log(props.foo)
console.log(props.propsC)
</script>