[学习笔记 Day05]Vue语法进阶：从Vue2轻松过渡到Vue3，让开发更加简洁，让项目更加完美！

Vue3 项目的创建：create-vue

• create-vue是 Vue 官方新的脚手架工具
• 前提条件：Node.js 版本为16.0以上
• 创建第一个 Vue 应用

//安装并执行vue
npm init vue@latest

//安装依赖
npm install

• 补充

<script setup></script>
//setup表示：允许在 script 中直接编写组合式API

组合式API

• setup选项
  • setup选项的写法和执行时机
    • 写法（获取不到this）：setup(){}
    • 执行时机：比beforeCreate方法还要早
  • 其写代码的特点：数据和函数，需要在 setup 最后 return，才能在模板中应用。
• reactive 和 ref 函数
  • reactive()
    • 作用：接收对象类型数据的参数传入并返回一个响应式的对象
    • 步骤：
      1. 从 vue 包中导入 reactive 函数：import {reactive} from ‘vue’
      2. 在<script setup>中执行 reactive 函数并传入类型为对象的初始值，并使用变量接收返回值：const state = reactive(对象类型数据)
  • ref()
    • 作用：接收简单类型或者对象类型的数据传入并返回一个响应式对象
    • 步骤：
      1. 从 vue 包中导入 ref 函数：import {ref} from ‘vue’
      2. 在<script setup>中执行 ref 函数并传入类型为对象的初始值，并使用变量接收返回值：const state = ref(对象类型数据)
      3. 访问数据：state.value
         • 在 template 中，直接使用：{{ state }}
• computed
  • 步骤：
    • 导入 computed 函数
    • 执行函数在回调函数参数中 return 基于响应式数据做计算的值，用变量接收
  • 计算属性中不应该有异步请求、修改 dom 等
  • 避免直接修改计算属性的值，计算属性应该是只读的，特殊情况可以配置 get/set

import {computed} from 'vue'

const computedState = computed(() => {
      return 基于响应式数据做计算后的值;
})

• watch
  • 作用：侦听一个或者多个数据的变化，数据变化时执行回调函数
  • 基础使用（侦听单个数据）
    • 导入 watch 函数：import {watch} from 'vue'
    • 执行 watch 函数传入要侦听的响应式数据（ref对象）和回调函数 watch(count,(newVaule,oldValue) => {});
  • 基础使用（侦听多个数据）
    • 导入
    • 执行 watch 函数：watch([数据1,数据2,…数据n],([new数据1,old数据1],[new数据2,old数据2],[new数据n,old数据n]) => {})
  • immediate（立即执行）
    • 说明：在侦听器创建时立即触发回调函数，响应式数据变化后继续回调 watch(count,() => {} ,{immediate:true})
  • deep（深度监听）
    • 用于侦听复杂类型的对象数据
    • 使用：watch(count,() => {} ,{deep:true})
  • 精确侦听对象的某个属性
    • 作用：再不开启 deep 的前提下，侦听对象内某个属性的变化
    • 使用：watch(() => 属性名,() => {})
• 生命周期函数
  • 选项式 vs 组合式

选项式API	组合式API
beforeCreate / created	setup
beforeMount	onBeforeMounte
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmounted
unmounted	onUnmounted

• 父子通信
  • 基本思想（父 => 子）
    • 父组件中给子组件绑定属性<son msg="..."></son>
    • 子组件内部通过 props 选项接收 const props= defineProps({msg:String})
      • 通过 defineProps 编译器宏接收子组件传递的数据
      • 注意：由于写了 setup ，所以无法直接配置 props 选项
  • 基本思想（子 => 父）
    • 父组件给子组件标签通过 @ 绑定事件
    • 子组件内部通过 emit 方法触发事件
    • 例如：

//父组件
<template>
      <son @get-msg="getMsg">
</template>
<script setup>
      const getMsg = (msg) => {
            方法块;
      }
</script>

//子组件
<template>
      <button @click="sendMsg">点击</button>
</template>
<script setup>
      const emit = defineEmits(['get-Msg']);
      const sendMsg = ()=> {
            emit('get-Msg','...')
            方法块;
      }
</script>

• 模板引用
  • 通过 ref 标识获取真实的 dom 对象或者组件实例对象
  • 使用：
    • 调用 ref 函数生成一个函数对象 const 变量名 = ref(null)
    • 通过 ref 标识绑定 ref 对象到标签 <div ref="变量名"></div>
    • 通过 ref对象名.value 即可访问到绑定的元素（必须等页面渲染完成）
  • defineExpose() 宏函数
    • 默认情况下在 <script setup> 语法糖下的组件内部的属性和方法是不开放给 父组件访问的
    • 可以通过 defineExpose 编译宏指定哪些属性和方法允许访问
    • 例如：

const msg = ref('xxx')

defineExpose({ msg })

• provide 和 inject
  • 使用：
    • 顶层组件通过 provide 函数提供数据 provide('key',数据)
    • 底层组件通过 inject 函数获取数据 const msg = inject('key')

新特性

• defineOptions
  • 作用：主要用来定义 Options API 的选项
  • 可以用 defineOptions 定义任意的选项，props、emits、expose、slots除外
  • 例如：

defineOptions({
      name:'...',
      xxx:'xxx'
})

• defineModel 和 v-model
  • 说明：在 vue3 中，自定义组件上使用 v-model 相当于传递一个 modelValue 属性，同时触发 update:modelValue 事件
  • 使用：我们先定义 props，在定义 emits。其中有许多重复的代码。如果需要修改此值，还需要手动调用 emit 函数。

<Child v-model="isVis">
//相当于
<Child :modelValue="isVis" @update:modelValue="isVis = $event">

//子组件
const modelValue = defineModel()
modelVaule.value++

Pina

• 认识Pina
  • Pina 是 Vue 的最新的状态管理工具，是 Vuex 的替代品。
  • 优点：
    1. 提供简单的 API （去掉了mutation）
    2. 提供符合、组合式风格的 API （和 vue3 新语法相统一）
    3. 去掉了 modules 的概念，每一个 store 都是一个独立的模块
    4. 配合 TypeScript 更友好
• 手动添加 Pina 到 Vue 项目中
  • 使用 vite 创建一个空的 Vue3 项目：#npm create vue@latest
  • 安装 Pina：#npm i pina
  • 创建一个 Pina 实例（根 store）并传递给应用

//app.js
import { creatApp } from 'vue'
import { createPina } from 'pina'
import App from './App.vue'

const pina = createPina()
const app = createApp(App)

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

• 基本语法：
  • 使用步骤：
    • 定义 store
    • 使用 store

//xxxStore.js
//定义Store
import { defineStore } from 'pina'
import {ref} from 'vue'

const A = defineStore('仓库唯一标识符',() => {
      //声明数据 state
      const count = ref()
      
      //声明操作数据的方法 actions
      const addCount = () => count.value++
      
      //声明基于数据派生的计算属性 getters(computed)
      const count2 = computed(() => count.value * 2)
      
      //返回数据
      return {count,addCount,count2}
})

//使用
const B = A();

{{ B.count }}
@click="B.addCount"
{{ B.count2 }}

• storeToRefs方法
  • 说明：const { count,msg } = countStore()
    • 此时直接解构，不处理，数据会丢失响应式
    • 解决：const { count,msg } = storeToRefs(countStore)
• Pina 持久化插件（数据持久化）
  • 使用：
    • 安装：#npm i pina-plugin-persistedstate
    • 将插件添加到 pina 实例上
    • 使用

import {createPina} from 'pina'
import pinaPluginPersistedstate from 'pinaPluginPersistedstate'

//创建实例
const pina = createPina()
pina.use(pinaPluginPersistedstate)

//使用
defineStore('仓库唯一标识'，() => {},{pinaPluginPersistedstate:true})