提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、vue3
- 创建vue3
- v2函数式、v3组合式api
- 响应式方法ref、reactive
- 计算属性conputed
- 监听属性wacth
- vue3 选项式生命周期
- 父子通信
- 父传子
- defineProps编译宏
- 子传父
- defineEmits方法
- 获取DOM ref
- defineExpose
- 跨组件通信 provied & inject
- vue3一些定义define
- 1、defineOptions 可以声明和setup平级的
- 2、 defineExpose 暴露当前组件方法和函数
- 3、 defineEmits 子父通信
- 4、 defineProps 父子通信
- 5、 defineModel
- 二、Pinia
- 安装Pinia,及使用
- 总结
前言
一、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 = nullconst AntiShake = (request: any, params: object, time: number) => {return new Promise(async r => {if (timer == null) {timer = setTimeout(() => {request(params).then((res: any) => {timer = nullr(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: anyAntiShake: (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语法,以及基本配置