Vue3：组合式API、Vue3.3新特性、Pinia

1、Vue3

优势

 

Vue3组合式API vs Vue2选项式API

使用create-vue创建项目

        create-vue是Vue官方新的脚手架工具，底层切换到了vite，为开发提供快速响应

<!-- 加上setup允许在script中直接编写组合式API -->
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

2、组合式API

setup选项

写法：

特点：

1、执行时机：在beforeCreate之前

2、setup函数中，获取不到this（this是undefined）

3、数据和函数需要在setup最后return中写，才能在模板中应用

语法糖

reactive函数

使用：先导包，调方法把对象转为响应式并赋值给state

ref函数

既支持简单类型又支持对象类型的数据，语法与reactive类似（声明数据统一使用ref，统一编码规范）

本质：在原有传入数据的基础上，外层包了一层对象，包成复杂类型。底层包成复杂类型之后，再借助reactive实现的响应式。

注意点：

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

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

computed计算属性

        注意：计算属性中不应该有“副作用”（eg：异步请求/修改dom）；计算属性应该是只读的，特殊情况可以配置 get、set

watch

// 监视单个数据的变化
watch(ref对象,(newValue,oldValue) => { ... })

// 监视多个数据的变化
watch([ref对象1,ref对象2],(newValue,oldValue) => { ... })

侦听多个数据：

immediate

一进页面立即执行

deep

默认watch进行的是 浅层监视

eg：

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

        const ref2=ref(复杂类型) 监视不到复杂类型内部数据的变化

生命周期函数

父子通信

父传子

        注意：由于写了setup，所以无法直接配置props选项；因此，这里需要借助于“编译器宏”defineProps函数接收子组件传递的数据。

        props传递的数据，模板中可以直接使用，脚本中props.属性名访问

子传父

模板引用和defineExpose宏函数

模板引用

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

模板引用时机：组件挂载完毕

通过ref对象.value即可访问到绑定的元素（必须渲染完成后，才能拿到）

defineExpose宏函数

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

provide和inject实现跨层传递数据

作用和场景：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信。

修改数据：谁的数据，由谁维护。（使用跨层级函数）

3、Vue3.3新特性

defineOptions

defineModel快速实现双向绑定

配置defineModel：

4、Pinia

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

添加pinia到vue项目：

基本语法

Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字：

import { defineStore } from 'pinia'

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

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Eduardo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, name, doubleCount, increment }
})

action异步写法：与组件中获取异步数据的写法完全一致。

storeToRefs方法

请注意，store 是一个用 reactive 包装的对象，这意味着不需要在 getters 后面写 .value。就像 setup 中的 props 一样，我们不能对它进行解构

使用前需要从pinia中导入，可以解构且不会使数据丢失响应式。

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 都是响应式引用
// 下面的代码同样会提取那些来自插件的属性的响应式引用
// 但是会跳过所有的 action 或者非响应式（非 ref 或者 非 reactive）的属性
const { name, doubleCount } = storeToRefs(store)
// 名为 increment 的 action 可以被解构
const { increment } = store
</script>

为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。它将为每一个响应式属性创建引用。当你只使用 store 的状态而不调用任何 action 时，它会非常有用。请注意，你可以直接从 store 中解构 action，因为它们也被绑定到 store 上：

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 都是响应式引用
// 下面的代码同样会提取那些来自插件的属性的响应式引用
// 但是会跳过所有的 action 或者非响应式（非 ref 或者 非 reactive）的属性
const { name, doubleCount } = storeToRefs(store)
// 名为 increment 的 action 可以被解构
const { increment } = store
</script>

数据持久化

官网：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

1、安装依赖

npm i pinia-plugin-persistedstate

2、将插件添加到 pinia 实例中

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

用法：

在声明store时，将新persist选项设置为 true。

// 组合式
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('hello pinia')
    return { someState }
  },
  {
    persist: true,
  },
)