Vue3学习
2023-04-23 09:53:58 38 举报
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 条评论
回复 删除
下一页