vue3
文章平均质量分 59
slom_fxt
记录工作中遇到的知识点。一个喜欢宋亚轩的程序猿
展开
-
vue3中Pinia
1.pinia的简单使用 2.pinia的模块化 3.pinia的持久化存储原创 2024-02-12 11:44:35 · 953 阅读 · 0 评论 -
vue3中使用vuex以及vuex的数据持久化
新建store文件夹下的index.js文件。vueX持久化存储【插件】原创 2024-02-02 10:58:36 · 475 阅读 · 0 评论 -
vue3__Provide / Inject (依赖注入)和mixins
此时当父组件的值发生变化的时候,子组件的也会同步变化。2.创建mixins.js文件。1.创建mixins文件夹。例如父组件中提供方法。原创 2024-01-16 16:39:20 · 589 阅读 · 0 评论 -
vue__动态和异步组件
组件按需引入 :当用户滑动到了具体之间的位置再去加载该组件(实现组件懒加载,到他了再去加载节省性能)在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。这里A和C组件使用了defineAsyncComponent异步组件所以分包打包了。#通过defineAsyncComponent分包处理:对组件或者页面进行分包处理。注意:使用markRaw来避免出现响应式组件消耗性能。使用Usage :@vueuse/core这个包。可使用keep-alive加载组件。原创 2023-12-27 17:14:00 · 427 阅读 · 0 评论 -
vue3__完整创建项目以及配置代理打包,以及根据配置去打包
3.3安装vant、element-plus和像素转换以及vant和element-plus按需引入插件,就不用再main.js里面在引入他们了。通过VITE_NODE_ENV判断是那个打包配置 这里--mode后的值就是VITE_NODE_ENV的值。npm i unplugin-auto-import -D //setup语法糖插件。npm i unplugin-vue-components -S //按需加载组件。a.路由配置,router/index.js。最后vite.config.js。原创 2023-12-26 18:44:00 · 658 阅读 · 0 评论 -
vue3__Teleport
Teleport>是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。原创 2023-12-26 11:01:13 · 390 阅读 · 0 评论 -
vu3__插槽的使用
插槽的分类:匿名插槽、具名插槽、作用域插槽、动态插槽。原创 2023-12-26 09:36:57 · 412 阅读 · 0 评论 -
vue3__组件通信
使用mitt插件实现(相当于vue2的export let bus = new Vue();注意如果你要将props的值进行局部使用,需要重新将里面的值定义出来(要不直接改值会报错)2.使用defineEmits定义要传递给父组件的事件。1.使用defineProps接受父组件传递的参数。可以在组件上使用以实现双向绑定。创建mitt.js文件。原创 2023-12-25 17:16:04 · 444 阅读 · 0 评论 -
vue3_router(路由)
router:相当于vue2中this.$rouer 返回路由器实例。route:相当于this.$route 返回当前路由的地址。原创 2023-12-25 11:11:35 · 422 阅读 · 0 评论 -
vue3_setup中toRefs和computed以及watch
将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用。在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref,请改用。1..当从组合式函数中返回响应式对象时,来完成数据的解构,防止它消除相应性。二、computed(计算属性)原创 2023-12-04 15:27:26 · 527 阅读 · 0 评论 -
vue3_setup基础_渲染函数(ref,reactive)
来解决什么问题:使用(data,computed,methonds,watch)组件选项来组织逻辑通常都很有效。然而,当我们组件变的更大的时候,逻辑关注点的列表也会增长。Proxy响应式(ref用来定义基础数据类型 reactive用来定义引用性数据类型)b.必须遍历对象的每个属性有多重的时候需要递归对数据进行处理。vue3中可以使用reactive对引用性数据类型进行定义实现Proxy响应式数据。在改变ref定义的数据时候需要.value实现赋值,否则不能实现响应式改变。一、setup语法糖。原创 2023-10-12 17:35:21 · 283 阅读 · 0 评论 -
vue2和vue3的区别
3.X:已被移除不再支持,建议使用$refs。2.x 版本中 v-for > v-if。3.X 版本中 v-if > v-for。2.X 中会把ref自动填充内容。2.X:访问当前实例的直接子组件。1.script部分(可以兼容vue2写法)4. this.$children的区别。3.X 中需要手动添加。2.v-if和v-for的优先级比较。一、vue2和vue3的区别。3.v-for中的Ref数组。原创 2023-10-12 15:54:12 · 221 阅读 · 0 评论 -
创建vue3项目(vite)
注意:使用vite构建工具构建的vue3项目,将自己创建的项目放在App.vue组件/HelloWorld.vue组件中,不需要注册(使用vue脚手架构建vue3项目需要),只需要导入即可。基于webpack的项目有一个问题,就是编译速度慢。npm init @vite/app 项目名称。vite优势:在开发过程中大大提升我们的效率。1.创建vue2项目:基于构建工具webpack。vue create 项目名称。2.创建vue3项目:基于vite。原创 2023-08-09 10:16:14 · 142 阅读 · 0 评论