vue3组合式项目经验总结

1，组件分为两种：路由组件、非路由组件。

2，import导入文件时，加{}为export...

不加{}为默认导出，export defaule{}

引入自定义组件的时候，不加{} 自定义组件要大写（如果有些时候没显示出来就换大小写）

3，<p v-for="(item,index) in obj" :key="index">{{ item.m }}</p>

中的item与index的位置不能写反了

4，onMounted:页面渲染之前执行，执行完毕，页面就显示出来了；（数据请求）

onUnmounted:组件注销之前执行，执行完毕组件就不在页面显示了

onUpdated:当组件内容发生变化，就会执行这个更新的钩子函数，

5，defineProps；当父传子的时候，子是拿不到这个数据的，必须通过props=defineProps({

post:Array(eg)

})去接受数据，最后props.啥的去用

6，import axios from "axios";组件也是导入的时候一定要把{}去掉。

7，自定义组件一定要大写，（任何组件一定要大写）

8， <router-link to="/">首页</router-link>相当于与 <router-link :to="{name:'home'}">首页</router-link>

9.请求数据的时候一定要用异步请求，不然会超时，网页会失去响应性。（async、await常用）

10.@keydown.enter.prevent（input回车触发事件）

11.axios.get("")

.then((res)=>{console.log("成功的")})

.catch((error)=>{console.log("失败的")})

12.post 的参数是data,

get的参数是params,

13.状态码几个比较常用的记住.(http的状态码，代表请求结果)

HTTP状态码大致分为5类：

1xx : 消息，这一类型的状态码，代表请求已被接受，需要继续处理。但是一般服务器禁止向客户端发送此类状态码；

2xx : 成功，这一类型的状态码，代表请求已成功被服务器接收、理解、并接受；

3xx : 重定向，这类状态码代表需要客户端采取进一步的操作才能完成请求；

4xx : 请求错误，这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理；

5xx : 服务器错误，这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。

14.C:\Users\gxzn\Documents\WeChat Files\wxid_8h8iorqu8lsr22\FileStorage\File\2023-02 公司电脑学习资料

15.https://api.yuguoxy.com/swagger/#/ 代码练习接口地址

16.计算属性与监听器的区别（1,return;2,功能;3,缓存;4,异步；5,使用场景;）

组合式：watch(value,()=>{}) 选项式：watch:{add(){},plus(){}}（监听数据，比如全选与单选）

const newValue=computed({

return oldValue.method()

}) (购物车的总价)

17.cookies，sess...这些缓存的用法

18.query形式的参数与params形式的参数

19.router.getRoutes():获取一个包含所有路由记录的数组。

20.https://www.ihtmlcss.com/demo/dist/#/croptool 截图组件

21.image/png;base64怎么转换为一个文件 这是一个问题

22.查看一个图片，鼠标下滑就变大，上滑就缩小。（思路进行中）

23.隐式传参params ：params只与name搭配生效，

userRouter.push({

name: 'Home',

params: {

name: 'dx',

age: 18

}

const userRouter = useRouter()

userRouter.push({

path: '/',

query: {

name: 'dx',

age: 18

}

})

ath与query是一对，name和params是一对，请别混用。

24.vue3的父传子与子传父。（加强记忆）

const props = defineProps({list:Array})//

const props = defineProps({

saveLoading: {

type: Boolean,

default: false

},

show2Dsim: {

type: Boolean,

default: false

},

showPrint: {

type: Boolean,

default: false

},

showRefresh: {

type: Boolean,

default: false

},

// 隐藏保存按钮

hideSave: { type: Boolean, default: false }

})

const emit = defineEmits(['back', 'save', '2DSim', 'print', 'refresh'])

25.@save与@change.(emit进行触发，子传父)

26.Vuex与pina的用法

27.https://zhuanlan.zhihu.com/p/520604740 原型链、原型对象、原型。