前端例会知识总结(一)
script setup 语法糖
改变的内容
- 自动返回所有变量,对象(包括响应式对象),组件,也包括 import 导入的内容,给模板使用
- defineProps,defineEmits,defineExpose,useAttrs,useSlots
- 顶层 await
- 自定义指令
- 有关 script setup 语法糖的内容,在官网的 API 参考=>单文件组件=>
关于 composition api
- 最好多用 ref,少用 reactive,ref 会更加灵活(虽然 ref 使用时需要加.value,但是可以用一些技巧尽量避免)
- 在包装大量数据时使用 shallowRef 代替 ref
- 可以直接用 v-bind 绑定样式
- v-model 的变化
- 增加 watchEffects
- filter 过滤器删除,可使用计算属性代替
VueUse
VueUse 函数共有 9 大类
- Animation——包含易于使用的过渡、超时和计时功能。
- Browser——可用于不同的屏幕控制、剪贴板、偏好等。
- Component——提供了不同组件方法的简写。
- Formatters——提供响应时间格式化功能。
- Sensors——用来监听不同的 DOM 事件、输入事件和网络事件。
- State——管理用户状态(全局、本地存储、会话存储)。
- Utility——不同的实用函数,如 getter、条件、引用同步等。
- Watch——更多高级类型的观察器,如可暂停的观察器、退避的观察器和条件观察器。
- Misc——不同类型的事件、WebSockets 和 web workers 的功能
VueUse 注意点
- VueUse 大多数函数都会返回一个 refs,可以使用解构的方式取值或者直接用 reactive 获取整个对象
- VueUse 官网是全英文,每个函数方法说明也很详细,有时候得翻源码
pinia
- Vuex5 的体验版
- 删除 mutations,删除 modules