image.png
特殊文件夹说明:
- types 定义一些Typescript 数据约束
- use 组合是函数的统一管理 ,文件名默认以use开头
Vue3一些新特性
-
Composition API
- 创建响应式对象的方式: ref 、toRef、toRefs、reactive
- ref() 函数根据给定的值创建一个响应式的数据对象,传入的为基本数据类型,例如字符串、数字、boolean 等,返回值是一个对象,这个对象上只包含一个 value 属性,只在setup函数内部访问ref函数需要加.value
- reactive 方法 根据传入的对象 ,创建返回一个深度响应式对象
- 针对一个响应式对象(reactive 封装)的 prop(属性)创建一个ref,且保持响应式
- toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法
import {ref, reactive, toRef, toRefs} from 'vue'; export default { name:'App' setup(){ let stringRef = ref(""); let obj = {name : 'alice', age : 12}; let reactiveRef = reactive(obj) let objNameToRef= toRef(obj, 'name'); let objToRefs = toRefs(reactiveRef ) return {stringRef ,reactiveRef ,objNameToRef,...objToRefs } } }
- 创建响应式对象的方式: ref 、toRef、toRefs、reactive
watchEffect && watch 区别
1.watch可以访问新值和旧值,watchEffect不能访问。
2.watchEffect有副作用,DOM挂载或者更新之前就会触发,需要我们自己去清除副作用。
3.watch是惰性执行,也就是只有监听的值发生变化的时候才会执行,但是watchEffect不同,每次代码加载watchEffect都会执行。
4.watch需要指明监听的对象,也需要指明监听的回调。watchEffect会立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
import {ref, reactive, toRef, toRefs} from 'vue';
export default {
name:'App'
setup(){
let obj = {name : 'alice', age : 12};
let reactiveRef = reactive(obj)
watch(()=>reactiveRef .name,(old,newVal)=>{},{deep:true})
watch([()=>reactiveRef .name,()=>reactiveRef.age],(old,newVal)=>{},{deep:true})
}
}
- 组合式函数
https://cn.vuejs.org/guide/reusability/composables.html#mouse-tracker-example
“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
import type { UnwrapRef,Ref } from 'vue'
import { ref } from 'vue'
#useLoading.js
export function useLoading(initState: boolean): [Ref, () => void] {
const state = ref(initState)
const toggleLoading = function () {
state.value = !state.value
}
return [state, toggleLoading]
}
#useAsync.js
export function useAsync(asyncFn: () => Promise, initValue: T, immediate = true) {
const [toggleLoading] = useLoading(false)
const data = ref(initValue)
const error = ref(null)
const execute = function () {
toggleLoading()
error.value = null
return asyncFn()
.then((res) => {
data.value = res as UnwrapRef
toggleLoading()
})
.catch((err) => {
error.value = err
toggleLoading()
})
}
if (immediate) {
execute()
}
return {
pending,
data,
error,
execute,
}
}
UnwrapRef
- 内置组件Teleport
是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
modal将会被插入到body下面
- 异步组件
vue2
const asyncPage = () => import('./Lazy.vue')
https://cn.vuejs.org/guide/components/async.html#loading-and-error-states
Vue3
Typescript在Vue3中的一些用法
- 自定义事件、属性 defineEmits、defineProps
emits('update:modelValue', (e.target as HTMLInputElement).value)" />
Pinia用法
- defineStore定义仓库
import {defineStore} from "pinia";
export const userStore = defineStore('user',{
state:()=>{return{
name:""
}},
getters:{},
actions:{
updateUser(name){
this.name = name
}
}
})
- storeToRefs()读取state
import {storeToRefs} from 'pinia'
let user = userStore()
const {name} = storeToRefs(user)
- patch 函数修改state
- Action通过函数更改state
- store 的 $reset() 方法将 state 重置为初始值。
- 通过 store 的 $subscribe() 方法侦听 state 及其变化
cartStore.$subscribe((mutation, state) => {
// import { MutationType } from 'pinia'
mutation.type // 'direct' | 'patch object' | 'patch function'
// 和 cartStore.$id 一样
mutation.storeId // 'cart'
// 只有 mutation.type === 'patch object'的情况下才可用
mutation.payload // 传递给 cartStore.$patch() 的补丁对象。
// 每当状态发生变化时,将整个 state 持久化到本地存储。
localStorage.setItem('cart', JSON.stringify(state))
})
问题:类型“ImportMeta”上不存在属性“env”。
在 tsconfig.json 文件中添加如下配置即可
“types”: [ “vite/client” ]