Vue3开发：create-vue与组合式API详解及Pinia状态管理-CSDN博客

npm create vue@latest 和 npm init vite-app 的作用和用法不同，它们适用于不同的场景。如果你想要创建一个完整的 Vue.js 项目，可以使用 npm create vue@latest 命令；如果你想要创建一个基于 Vite.js 的项目，可以使用 npm init vite-app 命令。

2. 梳理项目的结构

node_modules 目录用来存放第三方依赖包
public 是公共的静态资源目录
src 是项目的源代码目录（程序员写的所有代码都要放在此目录下）
.gitignore 是 Git 的忽略文件
index.html 是 SPA 单页面应用程序中唯一的 HTML 页面
package.json 是项目的包管理配置文件

assets 目录用来存放项目中所有的静态资源文件（css、fonts等）
components 目录用来存放项目中所有的自定义组件
App.vue 是项目的根组件
index.css 是项目的全局样式表文件
main.js 是整个项目的打包入口文件

组合式API

1、组合式API - setup选项

总结：

1. setup选项的执行时机？

beforeCreate钩子之前自动执行

2. setup写代码的特点是什么？

定义数据 + 函数然后以对象方式return

3. <script setup>解决了什么问题？

经过语法糖的封装更简单的使用组合式API

4. setup中的this还指向组件实例吗？

指向undefined

2、组合式API - reactive和ref函数

reactive()

作用： 接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤：

<script setup>
//导入
import { reactive } from 'vue'
//执行函数 传入参数 变量接收
const state = reactive(对象类型数据)
</script>

ref()

作用： 接收简单类型或者对象类型的数据传入并返回一个响应式的对象

核心步骤：

<script setup>
//导入
import { reactive } from 'vue'
//执行函数 传入参数 变量接收
const state = reactive(简单类型或复杂类型数据)
</script>

总结：

1. reactive和ref函数的共同作用是什么？

用函数调用的方式生成响应式数据

2. reactive vs ref ？

1. reactive不能处理简单类型的数据

2. ref参数类型支持更好但是必须通过.value访问修改

3. ref函数的内部实现依赖于reactive函数

3. 在实际工作中推荐使用哪个？

推荐使用ref函数，更加灵活，小兔鲜项目主用ref

3、组合式API - computed

计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法

核心步骤：

1. 导入 computed函数

2. 执行函数在回调参数中 return基于响应式数据做计算的值，用变量接收

<script setup>
//导入
import { computed } from 'vue'

const computedstate = computed(()=> {
 return基于响应式数据做计算的值
})
</script>

4、组合式API - watch

作用: 侦听一个或者多个数据的变化，数据变化时执行回调函数

俩个额外参数：1. immediate（立即执行） 2. deep（深度侦听）

1、基础使用 - 侦听单个数据

1. 导入watch 函数

2. 执行watch函数传入要侦听的响应式数据 (ref对象) 和回调函数

<script setup>
//导入
import { ref watch } from 'vue'
const count  = ref(0)

watch(count,(newValue,oldValue) => {
console.log('count发生了变化')
})
</script>

2、基础使用 - 侦听多个数据

说明：同时侦听多个响应式数据的变化，不管哪个数据变化都需要执行回调

<script setup>
//导入
import { ref watch } from 'vue'
const count  = ref(0)
const name = ref('zs')

watch(
[count,name]
([newValue,newName],[oldValue,oldName]) => {
console.log('count或者name发生了变化')
})
</script>

3、immediate（立即执行）

说明：在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调

<script setup>
//导入
import { ref watch } from 'vue'
const count  = ref(0)

watch(count,(newValue,oldValue) => {
console.log('count发生了变化')
},{
immediate: true
})
</script>

4、deep（深度侦听）

默认机制：通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep 选项

<script setup>
//导入
import { ref watch } from 'vue'
const state  = ref({count: 0})

const changCount = () => {
 state.value.count++
}

watch(count,() =>{
console.log('count变化了')
},{
deep: true
})
</script>

5、精确侦听对象的某个属性

把第一个参数写成函数的写法，返回要监听的具体属性

const info = ref({
name: 'zs',
age: 18
})
const changeAge = () =>{
 info.value.age = 20
}
watch(
() => info.value.age,
() => {
consle.log('age发生了变化')
)

总结：

1. 作为watch函数的第一个参数，ref对象需要添加.value吗？

不需要，watch会自动读取

2. watch只能侦听单个数据吗？

单个或者多个

3. 不开启deep，直接修改嵌套属性能触发回调吗？

不能，默认是浅层侦听

4. 不开启deep，想在某个层次比较深的属性变化时执行回调怎么做？

可以把第一个参数写成函数的写法，返回要监听的具体属性

5、组合式API - 生命周期函数

生命周期函数基本使用

1. 导入生命周期函数

2. 执行生命周期函数传入回调

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
//自定义逻辑
})
</script>

执行多次

生命周期函数是可以执行多次的，多次执行时传入的回调会在时机成熟时依次执行

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log('1')
})

onMounted(() => {
console.log('2')
})
</script>

总结:

1. 组合式API中生命周期函数的格式是什么？

on + 生命周期名字

2. 组合式API中可以使用onCreated吗？

没有这个钩子函数，直接写到setup中

3. 组合式API中组件卸载完毕时执行哪个函数？

onUnmounted

6、组合式API - 父子通信

组合式API下的父传子

基本思想

1. 父组件中给子组件绑定属性

2. 子组件内部通过 props选项接收

组合式API下的子传父

基本思想

1. 父组件中给子组件标签通过@绑定事件

2. 子组件内部通过 $emit 方法触发事件

总结：

父传子

1. 父传子的过程中通过什么方式接收props？

defineProps( { 属性名：类型 } )

2. setup语法糖中如何使用父组件传过来的数据？

const props = defineProps( { 属性名：类型 } )

子传父

1. 子传父的过程中通过什么方式得到emit方法？

defineEmits( [‘事件名称’] )

7、组合式API - 模版引用

模板引用的概念

通过 ref标识获取真实的 dom对象或者组件实例对象

如何使用（以获取dom为例组件同理）

1. 调用ref函数生成一个ref对象

2. 通过ref标识绑定ref对象到标签

<script setup>
import{ref}from"vue3
// 1.调用ref函数得到ref对象
 const h1Ref = ref(null)
</ script>

<template>
<!-- 2.通过ref标识绑定ref对象-->
<h1 ref= "h1Ref">我是dom标签h1</h1>
</template>

defineExpose()

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法允许访问

总结：

1. 获取模板引用的时机是什么？

组件挂载完毕

2. defineExpose编译宏的作用是什么？

显式暴露组件内部的属性和方法

8、组合式API - provide和inject

作用和场景

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

跨层传递普通数据

1. 顶层组件通过 provide函数提供数据

2. 底层组件通过 inject函数获取数据

跨层传递响应式数据

在调用provide函数时，第二个参数设置为 ref对象

跨层传递方法

顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件中的数据

总结：

1. provide和inject的作用是什么？

跨层组件通信

2. 如何在传递的过程中保持数据响应式？

第二个参数传递ref对象

3. 底层组件想要通知顶层组件做修改，如何做？

传递方法，底层组件调用方法

4. 一颗组件树中只有一个顶层或底层组件吗？

相对概念，存在多个顶层和底层的关系

Pinia快速入门

1、什么是Pinia

Pinia 是 Vue 的专属的最新状态管理库，是 Vuex 状态管理工具的替代品

1. 提供更加简单的API （去掉了 mutation ）

2. 提供符合组合式风格的API （和 Vue3 新语法统一）

3. 去掉了 modules 的概念，每一个 store 都是一个独立的模块

4. 搭配 TypeScript 一起使用提供可靠的类型推断

2、添加Pinia到Vue项目

1. 使用 create-vue 创建空的新项目

npm init vue@latest

2. 按照官方文档安装 pinia 到项目

npm install pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

使用Pinia实现计数器案例

定义Store（state + action）

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

组件使用Store

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>
<template>
  <!-- 直接从 store 中访问 state -->
  <div>
Current Count: {{ counter.count }}
</div>
</template>

3、getters实现

Pinia中的 getters 直接使用 computed函数进行模拟

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
//定义getters 
 const getCount = computed(()=> count.value * 2)

  return { count, increment ,getCount}
})

4、action如何实现异步

action中实现异步和组件中定义数据和方法的风格完全一致

1- store中定义action

const API_URL = 'http://geek.itheima.net/v1_0/channels'

export const useCounterStore = defineStore('counter', ()=>{
  // 数据
  const list = ref([])
  // 异步action
  const loadList = async ()=>{
    const res = await axios.get(API_URL)
    list.value = res.data.data.channels
  }
  
  return {
    list,
    loadList
  }
})

2- 组件中调用action

<script setup>
    import { useCounterStore } from '@/stores/counter'
  const counterStore = useCounterStore()
  // 调用异步action
  counterStore.loadList()
</script>

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

storeToRefs

使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构

直接基于store进行解构赋值，响应式数据（state和getter）会丢失响应式特性，使用storeToRefs辅助保持响应式

import { storeToRefs } from 'pinia'
const counterStore = useCounterStore()
  // 使用它storeToRefs包裹之后解构保持响应式
  const { count } = storeToRefs(counterStore)

Vue官方的 dev-tools 调试工具对 Pinia直接支持，可以直接进行调试

总结：

1. Pinia是用来做什么的？

集中状态管理工具，新一代的vuex

2. Pinia中还需要mutation吗？

不需要，action既支持同步也支持异步

3. Pinia如何实现getter？

computed计算属性函数

4. Pinia产生的Store如何解构赋值数据保持响应式？

storeToRefs