vue补充继上一篇

 

 组合式API-reactive和ref函数

1.reactive()

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

1.从vue包中导入reactive函数

2.在<script setup>中执行reactive函数并传入类型为对象的初始值，并使用变量接受返回值。 

2.ref()

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

 1.从vue包中导入ref函数

2.在<script setup>中执行ref函数并传入初始值，使用变量接受ref函数的返回值

ref是在原有传入数据的基础上，外层包了一层对象，报成了复杂类型

底层，包成复杂类型之后，再借助reactive实现的响应式。注意点：访问数据，需要通过.value

注意点：

1.脚本中访问数据，需要通过.value

2.在template中，.value不需要加（帮我们扒了一层）

推荐：以后声明数据，统一用ref

区别：

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

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

2.reactive  和  ref?

1. reactive不能处理简单类型的数据
2. ref参数类型支持更好但是必须通过.value访问修改
3. ref函数的内部实现依赖于reactive函数

3. 在实际工作中推荐使用 ref

组合式API-computed

1.计算属性中不应该有“副作用”

比如异步请求、修改dom

2.避免直接修改计算属性的值

计算属性应该是只读的，特殊情况可以配置get set

组合式API-watch

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

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

侦听单个数据

1.导入watch函数

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

watch(ref对象，（newValue,oldValue）=>{...})

侦听多个数据

immediate

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

deep

deep深度见识，默认watch进行的是浅层监视

const ref1=ref(简单类型)可以直接监视

const ref2=ref(复杂类型)监视不到复杂类型内容数据的变化 ，必须开启deep模式

 

精确侦听某个属性

需求：在不开启deep的情况下，侦听age变化，只有age变化时才执行回调

 

 生命周期API（选项式vs组合式）

 onMounted可以调用多次，并不会冲突，而是按照顺序依次执行。

组合式API-父子通信

基本思想

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

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

 

defineProps原理：就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换。

 组合式API-子传父

基本思想：

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

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

 

组合式API-模版引用（Dom）

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

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

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

3.通过ref.value获得绑定的dom

(拿到组件是为了拿到里面的属性和方法！)

defineExpose()

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

 总结

组合式API-provide和inject

作用和场景

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

夸层传递普通数据

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

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

 子孙修改爷爷中的数据：可以给子孙传递一个修改该数据的方法

Vue3.3新特性-defineOptions

因为setup的引入无法使用name,emits等选项， 所以在Vue3.3中新引入了definOptions宏。顾名思义，主要是用来定义OPtions API的选项。可以用 defineOptions定义任意的选项，props,emits,expose,stots除外（因为这些可以使用definexxx来做到）

Vue3.3新特新-defineModel

在 Vue3中，自定义组件上使用v-model，相当于传递一个modelValue属性，同时触发vpdate:modelValue事件

 

Pinia快速入门

什么是P inia

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

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

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

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

4.配合TypeScript更加友好，提供可靠的类型推断

手动添加Pinia到Vue项目

在实际开发项目的时候，关于PInia的配置，可以在项目创建时自动添加

现在我们初次学习，从零开始：

1.使用VIte创建一个空的Vue3项目

npm create vue@latest

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

具体步骤请参考官网！

import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

<script setup>

import { useCounterStore } from "@/store/counter.js";
const counterStore = useCounterStore();
console.log(counterStore);
</script>

<template>
  <main>
    <h1>根组件{{ counterStore.count }}-{{ counterStore.msg }}</h1>
  </main>
</template>

<style scoped></style>

计算属性

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
//定义store
export const useCounterStore = defineStore('counter', () => {
    const count = ref(100)
    const msg = ref('hello pinia')
        //声明操作数据的方法action
    const addCount = () => {
            count.value++
        }
        //声明基于数据派生的计算属性getters
    const double = computed(() => count.value * 2)
    return {
        count,
        msg,
        addCount,
        double
    }
})

action异步实现

 不能解构store

 Pinia持久化插件

总结：

1.Pinia是用来干什么的？

新一代的状态管理工具，替代Vuex

2.pinia中还需要mutation吗？

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

3.Pinia如何实现getter?

computed计算属性函数

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

storeToRefs

5.Pinia如何快速实现持久化？

pinia-plugin-persistedstate