提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

一、vue3

创建vue3

npm init vue@latest

v2函数式、v3组合式api

函数式

组合式

响应式方法ref、reactive

ref script里面使用要.value 简单类型或复杂类型
reactive 复杂类型

<script setup>
import { ref,reactive } from "vue"
const a = ref(0)
console.log(a.value) // 0
const clicks=()=>{
a.value++
}

const b = reactive({
color:"1234"
})

</script>
<template>
<div>
{{a}}
<button @click=”clicks“></button>
</div>
</template>

计算属性conputed

conputed 计算属性应该只包含计算逻辑
避免直接修改计算属性的值
支持get,set

<script setup>
import { ref,conputed } from "vue"
const list = ref([1,2,3,4,5,6,7,8,9])

const a = conputed(()=>{
  return list.value.filter((item)=>{return item>3}) 
}) // a 为[4,5,6,7,8,9]
</script>

监听属性wacth

wacth 支持浅监听、深度监听

<script>
const s =ref(0)
// 浅监听
const a = wacth([s]/**
  [s] //监听数组
  s  //监听单个属性
  ()=>s.age //监听复杂类型里的单个属性
 */,(newValue,oldValue)=>{
})


// 深度监听
const a = wacth([s]/**s 可写数组和监听单个*/,(newValue,oldValue)=>{
}，{
deep：true;//深度监听 复杂数据等等
immediate:true //页面加载时执行一次
})
<?script>

### 生命周期

vue3 选项式生命周期

beforeCreate/created 变成setup
beforeUnmount/Unmounted
其他与v2一样

组合式api
setup 初始化
其他在选项是前加on

<script setup>

</script>

父子通信

父传子

父":"动态声明，子defineProps接收

defineProps编译宏

父
<template>
<Bate mesage="子"></Bate>//子组件
</template>

子
<script>
const a = defineProps({
mesage:"123"
})
</script>

子传父

emit传递，@接收

defineEmits方法

父
<template>
<Bate @changes="(e)=>{console.log(e);/**e为5*/}"></Bate>//子组件
</template>

子
<script>
const emit = defineEmits(['changes'])//声明
const a = ()=>{
emit('changes',5)传递
}
</script>

获取DOM ref

ref 获取DOM
ref 获取组件 需要暴露组件内部方法，默认不暴露
ref 声明响应式数据

defineExpose

暴露setup方法可以在父组件访问

<script setup>
import {ref} from "vue"
const inp =ref(null)
onMounted(()=>{
console.log(inp.value)
})
defineExpose({
inp,
})
</script>
<template>
<input type="text"/ ref="inp">//绑定ref
</template>

跨组件通信 provied & inject

顶层组件

const key= '123'
provied('key', key)

底层组件

const key= inject('key')
console.log(key)// 返回值123

vue3一些定义define

1、defineOptions 可以声明和setup平级的

2、 defineExpose 暴露当前组件方法和函数

<script>
defineExpose({
inp,
})
</script>

3、 defineEmits 子父通信

<script>
const emit = defineEmits(['changes'])//声明
const a = ()=>{
emit('changes',5)传递
}
</script>

4、 defineProps 父子通信

<script>
const a = defineProps({
mesage:"123"
})
</script>

5、 defineModel

动态显示父子传值
实验性质的宏

使用v-model需要父传子，然后监听修改值

defineModel的写法
v-model 父组件传值，

启动defineModel,重新运行项目

二、Pinia

安装Pinia,及使用

npm init vue@latest 创建vue项目可选Pinia直接安装好
npm install pinia

• main.ts

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
import router from './router'
import pinia from './store'
// import 'element-plus/dist/index.css'
createApp(App).use(router).use(pinia).mount('#app')

• src下创建store/index.ts

import { createPinia } from 'pinia'
// * pinia持久化数据，可以将 pinia 的状态持久化到本地存储中，以便在页面刷新或重新加载后保持状态的一致性。
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

// 引入自定方法
import userAppStrote from './user/index'
export { userAppStrote }

const pinia = createPinia()

// 注册持久化插件
pinia.use(piniaPluginPersistedstate)

export default pinia

• 创建store/user/index.ts
• 声明方法等，persist: true 开启持久化

import { defineStore } from 'pinia'
import { userTpye } from './types'
import { productType } from '@/api'
const userAppStrote = defineStore(
  'useAppStrote',
  (): userTpye => {
    // 产品类型
    const ProductType = ref('2')
    productType().then((res: any) => {
      ProductType.value = res.data.ProductType
    })

    // 防抖
    var timer: any = null
    const AntiShake = (request: any, params: object, time: number) => {
      return new Promise(async r => {
        if (timer == null) {
          timer = setTimeout(() => {
            request(params).then((res: any) => {
              timer = null
              r(res)
            })
          }, time * 1000)
        } else {
          r(false)
        }
      })
    }
    return {
      ProductType,
      productType,
      timer,
      AntiShake,
    }
  },
  {
    persist: true, // 开起持久化
  }
)

export default userAppStrote

• 创建store/user/type.ts 类型定义

// 类型定义
export interface userTpye {
  ProductType: Ref<string>
  productType: () => Promise<unknown>
  timer: any
  AntiShake: (arg0: any, arg1: object, arg3: number) => Promise<unknown>
}

• 使用pinia
• userStrote或使用storeToRefs解构

import { userAppStrote } from '@/store'
import { storeToRefs } from 'pinia'
const userStrote = userAppStrote()
// userStrote.ProductType
const rouer = useRouter()
const { ProductType } = storeToRefs(userStrote)

console.log(ProductType)

---

总结

vue语法，以及基本配置