VUE3笔记_vue uts-CSDN博客

本文链接：https://blog.csdn.net/qq_44428688/article/details/128187425

####reactive
Vue3中提供实现响应式数据的方法
在vue2中响应式数据是通过defineProperty来实现的
而在vue3中响应式数据通过ES6的proxy来实现
##注意点
reactive参数必须是对象（json/arr）
如果reactive传递了其他对象，默认情况下修改对象，界面不会自动更新
如果想更新，可以通过重新赋值的方式

####
setup 写的里面的东西要
return出去

####vue内置组件的component标签
它的用途是可以动态的绑定我们的组件，
根据数据的不同更换不同的组件
有一个is属性，is的作用就是显示指定的组件
官方说明：渲染一个“元组件”依据is的值，来决定哪个组件渲染
使用方式：把想要显示的组件，放到is属性中
可以动态绑定我们的组件，可以提升我们的开发效率

####
::v-deep代替/deep/解决报错

####
文件对应
api 发请求的文件
assets 静态文件
components 公共组件
config 插件
layuts 模板
router 路由
store 仓库
util
view页面

####
emit和props用之前要做setup里面先写好
setup(props,{emit}){
....
return {
....
}
}

####props
想使用props要写好以后用props.xxxx

####
Object.key
参数要返回的其枚举自身属性的对象
返回值一个表示给定对象的所有可枚举属性的字符串数组
处理对象返回可枚举的属性数组
处理数组，返回索引值数组
处理字符串，返回索引值数组

####
object.value
处理对象返回可枚举的属性的值数组

####
ref 给组件打ref标签可以在父组件调用子组件的方法

####
如果数据没有实现动态的可以尝试给外边包上一层的这样它改变的时候vue就能被检测到

###mitt库在vue3中的使用
VUE3移除了$on 和$偶发房等自定义事件相关的方法，因此在VUE3中他推荐我们使用事件总线传递数据
##安装miit库 npm run mitt
可以在单独的文件暴露出事件总线对象
import mitt from ‘mitt’
const Bus=mitt()
export default emitter
##在组件中导入并且使用它
import Bus from '@/xxx'
Bus.emit('xxx',xxx)->Bus.on('xxx',msg=>{xxx})
mitt事件取消
取消所有的mitt事件 Bus.all.claer()
取消指定的mitt事件 function onFoo(){} Bus.off('xxx',onFoo)

####Pinia时Vue.js的轻量级状态管理库
它使用的Vue3中的新反应系统来构建一个直观且完全类型化的状态管理库
安装命令 npm i pinnia@next

设置为全局对象在main.js中引用
import {createPinia}from 'pinia'
const pinia=createPinia()
app.use(pinia)

pinia创建
import {defineStore} from 'pinia'

export const useTodoStore=defineStore({
state:()=>{
return{
xxx:xxxx
}
},
actions:{
async xxxx(xxx){
return new Promise(async (resolve,reject)=>{
try{...resolve()}catch(e){reject(e)}
}
}
}
}
pinia取消了原有的mutations，合并成了actions
且在我们取值的时候可以直接点到那个值，不需要.state方法也是如此

pinia的优点
完整的typescript支持，与在vuex中添加typeScript相比，添加typeScript更容易
极其轻巧（体积约1KB）
store的action被调度为常规的函数调用，而不是使用dispatch方法或者MapAction辅助函数
支持多个Srore
支持vue devtools SSR和webpack代码划分

pinia的缺点
不支持时间旅行和编辑等调试功能

适合中小型应用，它也适用于低复杂度的VUE.JS项目

####Axios
import Axios from 'axios'//引入axios
import {baseURL} from '@/config'//这里面没啥内容就是配置了以后基础路径并向外暴露
import {ElMessage,ElLoading} from 'element-plus'导入类库
import {useUserStore} from '@/store/user"

const fetch =Axios.create({
baseURL,//key value一致可以省略一个
})//创建一个新的axios

let loadingInstance;//存储加载状态

//请求拦截器
ftech.interceptors.request.use(
(config)=>{
const userStore=useUserStore();
const {omsToken,tokenHead}=userStore //解构赋值
loadingInstance=Eloading.service({fullscreen:true})//给定义并赋初值加载状态开启
if(xxxx) config.headers["Authorization"] = `${tokenHead} ${omsToken}`;//带token值过去
return config

},//请求成功的回调
(err)=>{
return Promise.reject(err)

}//请求失败的回调
);
//响应拦截器
fetch.interceptors.response.use(
(res)=>{
loadingInstance.close()//加载状态关闭
if(res.data.code==200){
return Promise.resolve(res.data)
}else{
return Promise.reject(res.data)
}
},
(err)=>{
loadingInstance.close()//加载状态关闭
return Promise.reject(err)
},
}
export default fetch;//向外暴露这个axios对象

#####响应性基础API
返回对象的响应式副本
cosnt obj=reactive({
xxx:'xx'
})

readonly 接收一个对象（响应式或纯对象）或ref并返回原始对象的只读代理
只读代理是最深层的任何被访问的嵌套property也是只读的

isProxy检查对象是否由reactive或readonly创建的proxy

isRective 检查对象是否由reactive创建的响应式代理

isReadonly检查对象是否由readonly创建的只读代理

toRaw返回reactive或readonly代理的原始对象，这是一个逃生舱，可用于临时读取数据
而无需承担代理访问/跟踪的开销，也可以用于写入数据而避免触发更改
不建议保留对原始数据的持久引用

markRaw 标记一个对象使其永远不会转换为proxy，返回对象本身

####Refs
接受一个内部值并返回一个响应式且可改变的ref对象。ref对象仅有一个.value property
指向该内部接口的值。

unref 如果一个参数是一个ref，则返回内部值，否则返回参数本身。
这是val=isRef(val)?val.value:val的语法糖函数

toRef 可以用来为源响应式的某个property新创建一个ref。然后，ref可以被传递，
它会保持对其源property的响应式连接

toRefs将响应式对象转换为普通对象，其中结果对每个property都是指向
原始对象相应property的ref

####插个缝隙让我们看一看Computed与watch
computed
接受一个getter函数，并根据getter的值返回一个不可变的响应式ref对象
const count=ref(1)
const plusOne =computed(()=>count.value+1)

watch API与选项式API完全等效
与watchEffeact相比,watch允许我们:
懒惰地执行副作用
更具体地说明应触发侦听器重新运行的状态
访问被侦听状态的先前值和当前值

####下面我们来看一看处理数据的操作

##map
map是js中的数据结构，它允许存储[键，值]对，其中任何值都可以用作键或值
map集合的键和值可以是任何类型，并且如果使用集合中已经存在的键将值
添加到map集合中，新值将替换旧的值

map方法返回一个数组，数组中的元素为原始数组调用函数处理后的值，
并且按照原始数组元素调用函数处理后的值
map不会对空数组进行检测，并且不会改变原数组
传参：currentValue:必传。当前元素值
index:可选当前元素索引值
arr 可选当前元素属于的数组对象

map.has该方法主要用于检查map中是否存在具有制定键的元素

map.set方法为map对象添加一个指定键(key）和值(value)的新元素

map.get方法用来获取一个map对象指定的元素，返回的是键
如果不存在则会返回undefined

####表单验证
第一步给表单打一个ref

//对应表单的ref

const crePurForm = ref(null)

//表单验证事件
const validate = () => {
return new Promise((resolve, reject) => {
if (!crePurForm.value) return
crePurForm.value.validate((valid, fields) => {
if (valid) {
console.log('submit!')
resolve(true)
} else {
reject()
console.log('error submit!', fields)
}
})
})
}