目录

使用create-vue搭建

1、使用create-vue创建项目

2、项目目录和关键文件 

组合式API

1、组合式API - setup选项

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

3、组合式API - computed

4、组合式API - watch

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

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

3、immediate（立即执行）

4、deep（深度侦听）

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

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

6、组合式API - 父子通信

7、组合式API - 模版引用

8、组合式API - provide和inject

Pinia快速入门

1、什么是Pinia

2、添加Pinia到Vue项目

3、getters实现

4、action如何实现异步

使用create-vue搭建

create-vue是Vue官方新的脚手架工具，底层切换到了 vite（下一代前端工具链），为开发提供极速响应

1、使用create-vue创建项目

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

核心步骤：

<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对象

 

跨层传递方法

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

 

2、添加Pinia到Vue项目

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')

import { defineStore } from 'pinia'

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

  return { count, increment }
})

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

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>

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