VUE3
文章平均质量分 65
老电影故事
我只想搞搞搞搞搞搞搞钱!
展开
-
浅谈pinia
本质上他是vuex团队核心成员开发的,在vuex上面提出了一些改进。与vuex相比,pinia去除了vuex中对于同步函数Mutations和异步函数Actions的区分。直接在Actions中便能够使用同步和异步方法(在vuex的开发计划中也将会除去同步和异步的区分)。其次相比于vuex,pinia对于typescript的支持性更好,友好的devTools支持,pinia只有1kb,简化了很多方法的写法。由于vuex比较完善,因此,pinia更加适合小型项目,vuex更加适合大型项目。原创 2023-01-29 09:00:00 · 215 阅读 · 0 评论 -
vue3组件通信方式
当子组件希望父组件的数据发生改变时间,则需要通过方法去通知父组件进行修改,调用defineEmits并定义要发射给父组件的方法。vue 中创建事件总线的方式非常简单,可以直接在 Vue 实例中定义一个事件总线对象。和vue2一样,vue3同样支持props的组件通信方式,只是语法上出现了差异。总所周知,vue2的v-model可以实现父子通信,在vue3中也同样可以。这里的modelValue参数是可以自定义的,也可以使用多个v-model。但是在vue3中对应的几个eventBus相关事件却被移除了,原创 2023-08-16 12:06:44 · 108 阅读 · 0 评论 -
解决Element-Plus中Swtich @change自动被触发的问题
这个switchChange事件在初始化的时候会被自动触发 烦得很。如图所示 第471行 通过判断是否还有其它某元素再往下执行。如果你有其它方法 请你在评论区教我下哈 3q。原创 2023-07-25 17:56:45 · 497 阅读 · 0 评论 -
再说防抖与节流
局部注册data() {return {let timer全局注册let timerbinding . value() } , binding . value || 500) }) } }) // main.js (或你的入口文件) import Vue from 'vue' import App from './App.vue' import './directives/debounce';// 导入自定义指令 new Vue({局部注册。原创 2023-07-21 08:45:00 · 74 阅读 · 0 评论 -
前端实现链接生成二维码
而且多个地方需要生成二维码,所以我封装成hook。我用的vite+3.0+ts。原创 2023-07-07 08:45:00 · 1065 阅读 · 0 评论 -
vue创建项目报错npm install --loglevel error --legacy-peer-deps
node_global 也是同样的操作,此时问题解决,再进行 vue 项目的创建时即可成功!1、找到这两个文件(每个人的位置不一样,像我是安装在D盘)3、选Users,全部打勾✔,再点击确定。原创 2023-07-05 08:45:00 · 985 阅读 · 0 评论 -
vue2和vue3组件v-model区别
单向数据流,父组件传给子组件的数据,子组件只能展示,不能修改,如果需要修改则需要emit事件让父组件修改有些时候,一些组件并不是通过input来进行触发事件。也就是说value和input事件在大多数情况下能够适用,但是存在value另有含义,或者不能使用input触发的情况,这时候我们就不能使用v-model进行简写了。就比如说选择框,绑定的值是checked而不是value,接收事件不是input而是change。为了解决这个问题,尤雨溪在Vue2.2中,引入了model组件选项。原创 2023-06-19 08:30:00 · 1640 阅读 · 0 评论 -
前端封装一个移动端(已支持PC)滚动的组件
【代码】前端封装一个移动端(已支持PC)滚动的组件。原创 2023-06-13 09:00:00 · 172 阅读 · 0 评论 -
vue3自定义指令将Loading组件动态插入指令作用的对象上
如图所示,我webApp中实现loading。原创 2023-05-15 08:30:00 · 818 阅读 · 0 评论 -
Vue3之setup参数介绍
正如在一个标准组件中所期望的那样,setup函数中的props是响应式的,当传入新的prop时,它将被更新。,所以setup()内部的this的行为与其他选项中的this完全不同。用途:当父组件传递数据给子组件时,子组件不通过props接收,那么父组件传递的数据就到了setup中的context的attrs属性。context是一个普通的JavaScript对象,也就是说,它不是响应式的,这意味着你可以安全地对context使用ES6解构。是响应式的,你不能使用ES6解构,因为它会消除prop的响应式。原创 2023-04-27 08:30:00 · 4022 阅读 · 0 评论 -
看完就懂的vue2与vue3响应式的区别
数据响应式所谓数据响应式就是建立响应式数据与依赖(调用了响应式数据的操作)之间的关系,当响应式数据发生变化时,可以通知那些使用了这些响应式数据的依赖操作进行相关更新操作,可以是DOM更新,也可以是执行一些回调函数。从Vue2到Vue3都使用了响应式,那么它们之间有什么区别?Vue2响应式:基于Object.defineProperty()实现的。Vue3响应式:基于Proxy实现的。那么它们之间有什么区别?为什么Vue3会选择Proxy替代defineProperty?请听我娓娓道来~~原创 2023-04-25 08:00:00 · 1552 阅读 · 0 评论 -
Vue plugin插件的使用
插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。本文主要介绍了vue中 plugin插件的用法及其功能。原创 2023-04-21 08:30:00 · 787 阅读 · 0 评论 -
vue3之Teleport传送组件
Teleport 是 Vue3.x 新推出的功能, 没听过这个词的小伙伴可能会感到陌生;翻译过来是传送的意思,可能还是觉得不知所以,没事下边我就给大家形象的描述一下。原创 2023-04-20 08:30:00 · 806 阅读 · 1 评论 -
vue3.0-Composition Api与vue2.x的Options Api有什么不同?
Composition Api可以说是vue3的最大特点,那么为什么要推出Composition Api,解决了什么问题?代码的可读性随着组件变大而变差每一种代码复用方式,都存在缺点ts支持受限以上通过Composition Api都能迎刃而解。原创 2023-03-14 08:30:00 · 522 阅读 · 0 评论 -
Vue3全局组件通信之provide / inject
顾名思义,爷孙组件是比 父子组件通信 要更深层次的引用关系(也有称之为 “隔代组件”):C组件引入到B组件里,B组件引入到A组件里渲染,此时A是C的爷爷级别(可能还有更多层级关系),如果你用 props ,只能一级一级传递下去,那就太繁琐了,因此我们需要更直接的通信方式。😜😜😜因为上下级的关系的一致性,爷孙组件通信的方案也适用于 父子组件通信 ,只需要把爷孙关系换成父子关系即可。原创 2023-03-13 08:30:00 · 3947 阅读 · 0 评论 -
Vue3中watch与watchEffect有什么区别?
你可以认为他们是同一个功能的两种不同形态,底层的实现是一样的。watch - 显式指定依赖源,依赖源更新时执行回调函数watchEffect - 自动收集依赖源,依赖源更新时重新执行自身函数首先先需要了解一下 Vue 3 的响应式是怎么工作的。我想很多文章都详细的讲过这个部分了,这里就简单带过一下。track(this , 'value') // 收集依赖 return _value } , set value() {原创 2023-03-08 10:21:38 · 515 阅读 · 0 评论