####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)
}
})
})
}
//在调接口之前判断表单验证是否成功
//写这一句的那个代码记得加上async修饰符
if (!(await validate())) return
#####预览pdf
https://www.jb51.net/article/250683.htm
#####基于markdown的编辑器组件
https://blog.csdn.net/aafagf/article/details/124270329
#####拖拽
https://blog.csdn.net/qq_45838639/article/details/125930737
element守则
VUE element 使用守则 遇到奇怪的问题先给唯一key
导航前置守卫
router.beforeEach((to,from,next)=>{
}