Vue3学习
2023-04-23 09:53:58 37 举报AI智能生成
登录查看完整内容
为你推荐
查看更多
Vue3是一套用于构建用户界面的渐进式框架，它采用了新的响应式系统和组合式API等特性，使得开发者能够更加高效地编写可维护、可扩展的代码。在学习Vue3的过程中，需要掌握其核心概念和基本用法，如组件、指令、生命周期钩子等。同时，还需要了解Vue3的新特性，如Composition API、Teleport等，以及如何在实际项目中应用这些特性。此外，Vue3还提供了丰富的生态系统和工具链，如Vue Router、Vuex等，可以帮助开发者更好地组织和管理项目。总之，学习Vue3需要不断地实践和探索，通过不断地学习和积累经验，才能够成为一名优秀的Vue开发者。
作者其他创作
大纲/内容
https://seb-l.github.io/pinia-plugin-persist/advanced/strategies.html
官方文档
https://github.com/Seb-L/pinia-plugin-persist
源码
npm install pinia
1，安装
分支主题
2，main中引入并use
3.在store新建index
4，在store新建modules下新建useUserStore.js
方式一：5.在app.vue使用这个state里的token数据
方式二：storetoRefs之后再使用（不需要用对象引用形式）还可以直接修改state，不需要通过action
使用
文档：https://jspang.com/article/82
视频：https://www.bilibili.com/video/BV1e5411o7w4/?spm_id_from=333.788&vd_source=8d2f919b877227721c20d6eba044012d
地址
方式1，
方式2，$patch修改多条数据
store.$patch((state) => { state.count++; state.helloWorld = state.helloWorld === "jspang" ? "HelloWorld" : "jspang"; });
方式3，$patch加函数形式 修改多条数据
actions:{ changeState(){ this.count++ this.helloWorld='jspang' } }
store.changeState()
方式4，action
修改state数据
定义
const { phoneHidden } = storeToRefs(store);
<h2 class="">{{ phoneHidden }}</h2>
说明：具有缓存特性
Getters
文档地址：https://blog.csdn.net/m0_62648436/article/details/127086924
使用流程
安装 npm i pinia-plugin-persist
2.在store的index引入注册
存储部分字段（使用paths）
存储所有字段
存储字段
自定义存储方式
持久化state数据
https://jspang.com/article/82
学习文档
版本号
技术胖Pinia
学习视频：https://www.bilibili.com/video/BV1mR4y1w7wi/?spm_id_from=333.880.my_history.page.click&vd_source=8d2f919b877227721c20d6eba044012d
Pinia
https://mp.weixin.qq.com/s/5gm9pWVnbE3x3bagCfdrfQ
TS
由 Vue官方人员开发的一款自动引入插件，可以省去比如 UI 库的大量 import 语句。
https://www.modb.pro/db/114077
https://www.cnblogs.com/wingring/p/16144897.html
文档地址：
https://github.com/antfu/unplugin-vue-components#importing-from-ui-libraries
简介：自动按需引入第三方的组件库组件和自定义的组件
npm install -D unplugin-vue-components unplugin-auto-import
安装
里以 ant-design-vue 为例，引入包里自带的 AntDesignVueResolver 函数
概念：纯粹通过 js 进行调用的组件
比如 Ant-Design-Vue 的 Message 组件
注意：unplugin-vue-components 这个插件目前并不能扫描不在模板 (template) 内使用的部分组件，
非模板组件
配置
G:\\html\\VUE\\2022_company\\shy-template\\build\\vite
本地使用地址
Ant Design Vue//Arco Design Vue/BootstrapVue/Element Plus/Element UI/Headless UIIDux/Inkline/Ionic/Naive UI/Prime Vue/Quasar/TDesign/Vant/Varlet UI/VEUI/View UI/Vuetify/VueUse Components/VueUse Directives/Dev UI
支持的ui库
1，unplugin-vue-components：
自动引入 第三方组件库我们所使用到的 style 样式
简介
npm install -D vite-plugin-style-import
vite-plugin-style-import：
1，unplugin-auto-import：自动按需引入 vue\\vue-router\\pinia 等的 api
自动导入的插件
子主题 1
资料地址
视频学习资料
https://juejin.cn/post/7013326406444646407
https://zhuanlan.zhihu.com/p/540431896
ref及reactive的区别及本质
https://blog.csdn.net/ZYS10000/article/details/125695285
Vue3中 响应式 API ( reactive、ref、toRef、toRefs ) 详解
Vue学习笔记（全面）
子主题 4
学习资料
Vue2和3对比
参数必须是对象或者数组，如果要让对象的某个元素实现响应式时比较麻烦。需要使用toRefs
底层本质是将传入的数据包装成Proxy
reactive
(1)函数参数可以是基本数据类型，也可以接受对象类型
(3)在template中访问，系统会自动添加.value;在js中需要手动.value
ref响应式原理是依赖于Object.defineProperty()的get()和set()
ref
介绍
isRef()，isReactive()函数来判断当前变量是什么类型的数据
判断是否是ref
相同点：ref函数和reactive函数都是用来定义响应式数据
reactive更适合定义复杂的数据类型（必须是必须是对象或者数组）
ref适合定义基本数据类型（可接收基本数据类型和对象）
参数
reactive 通过使用Proxy来实现数据响应式
原理
ref 在template中访问，系统会自动添加.value;在js中操作数据需要手动.value
reactive 定义的数据：操作数据与读取数据都不需要 .value
使用角度
区别
作用：toRaw()函数是 获取ref和reactive类型数据的原始数据
结果：调用修改数据方法，则页面ui不会更新，但数据已经修改
注意：toRaw拿到 ref 类型的原始数据（创建时传入的那个数据），那么就必须明确的告诉toRaw方法，要获取的是.value的值
toRaw
转成原始数据（不会再监听）
ref和reactive
复制 reactive 里面的属性然后转成 ref，保留了响应式和引用
说明
从 reactive 复制过来的属性进行修改后，除了视图会更新，原有 ractive 里面对应的值也会跟着更新
特点
作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性
要将响应式对象中的某个属性单独提供给外部使用时
应用
toRef
toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref
两者区别
扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)
toRef和toRefs
beforeDestroy->beforeUnmount
destroyed->unmounted
改名的声明周期
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
Vue3.0中Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
生命周期
总结
自由主题
Vue3
0 条评论
回复 删除
下一页
