vue3前端技术
文章平均质量分 78
vue3
zhousenshan
现在的一切都是为将来的梦想编织翅膀,让梦想在现实中展翅高飞
展开
-
禹神梳理,2小时上手TS(TypeScript)
注意点: JS 中的这三个构造函数: Number 、 String 、 Boolean ,他们只⽤于包装对象,正常开发时,很少去使⽤他们,在TS 中也是同理。// 警告,不能将类型“[string, number, boolean]”分配给类型“[string, number]”1. object 的含义:任何【⾮原始值类型】,包括:对象、函数、数组等,限制的范围⽐较宽泛,⽤的少。demo(100,'200') //警告:类型“string”的参数不能赋给类型“number”的参数。转载 2023-12-30 09:28:51 · 264 阅读 · 0 评论 -
vue3中pinia的学习使用
/不能使用箭头函数定义action,因为箭头函数绑定外部this。//不能使用箭头函数定义action,因为箭头函数绑定外部this。//类似组件的computed,用来封装计算属性,用缓存功能。//若使用this,则必须手动指定返回类型,否则类型推导不出。//类似组件的computed,用来封装计算属性,用缓存功能。//若使用this,则必须手动指定返回类型,否则类型推导不出。//必须是箭头函数ts更好的类型推导。//必须是箭头函数ts更好的类型推导。...转载 2022-07-16 14:46:18 · 1986 阅读 · 2 评论 -
Vue3.2的setup语法糖和Hook函数 (强烈推荐)
在2021年8月5日,Vue发布了3.2版本的新写法,其中最主要的亮点就在于setup的语法糖,学过Vue3.0的小伙伴都清楚,当我们在使用Vue3的语法就构建组件的时候,总是需要把外面定义的方法变量必须要return出去,比较麻烦一些,所以Vue官方这次提供了setup语法糖,有了他,我们可以更加简洁舒适的去构建组件。...转载 2022-07-16 14:10:31 · 2287 阅读 · 0 评论 -
vue进阶之路:vue3.2-setup语法糖、组合式API、状态库Pinia归纳总结
大家好,我叫东东吖,你现在看到的是vue进阶系列,如果觉得不错,可以点赞收藏哦,喜欢我的朋友,还可以加个关注鸭。vue进阶系列包括以下内容:vue进阶之路:组件通信的8种方式,你搞清楚了吗?vue进阶之路:父子组件的生命周期执行流程是怎么样的呢?vue进阶之路:vuex五大核心概念,看完这篇文章就够了。vue进阶之路:前端技术日新月异,vue3.0的时代已经来临...vue进阶之路:叮,Vue2与Vue3都有哪些区别?请查收!vue3.0都没学完,vue3.2又来了,你还学得动吗?(手动滑稽)vue3.2与转载 2022-07-10 09:45:15 · 1894 阅读 · 0 评论 -
vue3 组件传值之 props 与 attrs 的区别
最近在学习 vue3,整理了一些学习笔记,如果有人看到,并发现我有写的不对的地方,欢迎指正~用过 vue 组件传值的小伙伴都知道 props 这个属性,而 $attrs 属性可以看做 props 的加强版,用来简化 vue 组件传值,那么这两个属性具体有什么区别呢?先说结论,区别如下:1、props 要先声明才能取值,attrs 不用先声明2、props 声明过的属性,attrs 里不会再出现3、props 不包含事件,attrs 包含4、props 支持 string 以外的类型,转载 2021-11-27 09:14:34 · 606 阅读 · 0 评论 -
聊一聊 Vue3 的 9 个知识点
前一段时间一直在研究 Vue 源码,2和3的源码变化还是挺大的,但是 Vue3 在开发上需要改变以往习惯的地方真没什么,毕竟基础概念是一模一样的,可偏偏 3 的项目写起来就是能让人感觉爽得多,不动手是真体会不到所以咯,一定要动手!敲代码!不能学而不用,这是不可取的这里我总结了几个 Vue3 的知识点,如果你是 Vue2 的迁移者、学习 Vue3 或者准备面试的话,相信看完本文一定会有所收获Vue3 有哪些变化Vue3 是怎么得更快的?新增了三个组件:Fragment支持多个根节点、Suspen.转载 2021-11-06 21:36:27 · 251 阅读 · 0 评论 -
一文教会你如何写复杂业务代码
作者 | 张建飞 阿里巴巴高级技术专家了解我的人都知道,我一直在致力于应用架构和代码复杂度的治理。这两天在看零售通商品域的代码。面对零售通如此复杂的业务场景,如何在架构和代码层面进行应对,是一个新课题。针对该命题,我进行了比较细致的思考和研究。结合实际的业务场景,我沉淀了一套“如何写复杂业务代码”的方法论,在此分享给大家。我相信,同样的方法论可以复制到大部分复杂业务场景。一个复杂业务的处理过程业务背景简单的介绍下业务背景,零售通是给线下小店供货的 B2B 模式,我们希望通过数字化重.转载 2021-07-25 16:58:30 · 1008 阅读 · 0 评论 -
this指向,call,apply,bind的区别
this指向:①普通函数调用时,this指向window;②构造函数调用时,this指向实例对象③对象方法调用时,this指向该方法所属的对象;④通过事件绑定的方法,此时this指向的是绑定事件的对象;⑤定时器函数,this指向的是window;call,apply,bind的相同点:①都是改变this指向的,②第一个参数都是this要指向的对象③都可以利用后续参数传参call,apply,bind的区别:call和bind的参数是依次传参,一一对应的;但apply只有两个参数,第转载 2021-07-25 16:08:53 · 86 阅读 · 0 评论 -
深入理解配置选项之data和methods| 重学Vue3
本系列相关文章如下:基础类理解应用实例和组件实例 | 重学Vue3 理解模板语法 | 重学Vue3手写实现类模拟实现Vue3初始化流程 模拟实现所有Vue3响应式API(上)本文是第5篇,内容关于Vue中的配置选项:data和methods。看文本文,你将对这两个选项有清晰的理解本文目录结构如下:data选项此处分8小点来讲:1. 本质上,组件的 data 选项只是一个函数以vite创建的Vue3项目为例//components/HelloWorld转载 2021-07-25 16:08:15 · 5391 阅读 · 0 评论 -
Vue3.x Composition v-model
这是我参与新手入门的第2篇文章前文写了深入学习v-model的学习,今天分享下组件上v-model实现vue3.x与vue2.x的区别在哪。前序上文讲了v-model是v-bind和v-on的结合体如下:<!-- v-model --><input type="text" v-model="value"><!-- v-bind 和 v-on --><input type="text" :value="value" @input="va转载 2021-07-25 15:10:17 · 644 阅读 · 0 评论 -
Vue3.0 新特性以及使用经验总结
Vue3.0 在去年 9 月正式发布了,看大家都有在热情的拥抱 Vue3.0。今年初新项目也开始使用 Vue3.0 来开发,这篇文章就是在使用后的一个总结, 包含 Vue3 新特性的使用以及一些使用经验分享。为什么要升级 Vue3使用 Vue2.x 的小伙伴都熟悉,Vue2.x 中所有数据都是定义在data中,方法定义在methods中的,并且使用this来调用对应的数据和方法。那 Vue3.x 中就可以不这么玩了, 具体怎么玩我们后续再说, 先说一下 Vue2.x 版本这么写有什么缺陷,所有才转载 2021-07-25 10:42:52 · 600 阅读 · 0 评论 -
【干货】js 数组详细操作方法及解析合集
前言在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易忘记,还是要谷歌一下。所以就希望对这块内容有一个比较系统性的总结,在这背景下,就有了本篇文章,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。前端进阶积累、公众号、GitHub本文篇幅较长,建议点赞保存再看,也便于日后翻阅。创建一个数组: // 字面量方式: // 这个方法也是我们最常转载 2021-07-25 09:48:21 · 312 阅读 · 0 评论 -
weakMap、weakSet、Reflect 在vue3的应用
weakMap只接受对象作为键名键名所引用的对象是弱引用,不可遍历(可能在任何时刻被垃圾回收器回收)利用这一特征,在对数据量很大的时候就可做一部分的优化例子: Vue3在 检测到哪些数据发生了变化时候用了weakMap。所以当我们需要关联对象和数据,比如在不修改原有对象的情况下储存某些属性或者根据对象储存一些计算的值等,但是又不想管理这些数据的死活时可以考虑使用 WeakMapconst targetMap = new WeakMap<any, KeyToDepMap>()export转载 2021-07-17 21:11:36 · 366 阅读 · 0 评论 -
Vue3源码解析-响应式原理
前言Vue3对Vue2中的响应式原理使用Proxy进行了重写,本文我们将对Vue3响应式的源码进行分析。Vue3中提供了四种创建不同类型的响应式数据的方式,分别是:reactive 返回的是一个proxy对象,如果访问返回的proxy对象的属性是一个Object类型,会继续调用reactive,进行深度递归 shallowReactive 返回一个proxy对象,但是只有第一层的属性是响应式 readonly 返回一个proxy对象,如果属性是对象可以继续调用readonly,但是属性是只读转载 2021-07-10 17:11:41 · 901 阅读 · 0 评论 -
vue3剖析:响应式原理——effect
响应式原理源码目录:https://github.com/vuejs/vue-next/tree/master/packages/reactivity模块ref:reactive:computed:effect:operations:提供TrackOpTypes和TriggerOpTypes两个枚举类型,供其他模块使用剖析Vue2响应式原理什么是响应式数据?即A依赖于B数据,当B值发生变化时,通知A。很显然,这里应该使用观察者模式在vue2中的响应式原理:剖析Vue原理&a转载 2021-07-10 16:44:51 · 578 阅读 · 0 评论 -
vue3之setup的使用理解
1、vue3中的setup有什么用?setup的设计是为了使用组合式api2、为什么不用之前的组件的选项data、computed、methods、watch 组织逻辑在大多数情况下都有效。然而,当我们的组件变得更大时,逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解,尤其是对于那些一开始就没有编写这些组件的人来说。而通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑了.3、setup的在vue生命周期的位置setup位于created 和beforeCreated转载 2021-07-10 15:30:39 · 2627 阅读 · 3 评论 -
Vue中定义全局变量与常量的各种方式详解
前言本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入.尝试1:创建 global.js 并且在其中定义 1 let a = 10; 在入口文件中引入 global.js 1 import'./global.js' 在项目中使用: 1..转载 2021-07-10 10:21:06 · 2120 阅读 · 0 评论 -
自己动手从0开始实现一个分布式 RPC 框架
为什么要自己写一个RPC框架,我觉得从个人成长上说,如果一个程序员能清楚的了解RPC框架所具备的要素,掌握RPC框架中涉及的服务注册发现、负载均衡、序列化协议、RPC通信协议、Socket通信、异步调用、熔断降级等技术,可以全方位的提升基本素质。虽然也有相关源码,但是只看源码容易眼高手低,动手写一个才是自己真正掌握这门技术的最优路径。一 什么是 RPCRPC(Remote Procedure Call)远程过程调用,简言之就是像调用本地方法一样调用远程服务。目前外界使用较多的有gRPC、Du转载 2021-07-10 09:33:18 · 257 阅读 · 0 评论 -
vue中异步函数async和await的用法
先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function timeout() { return 'hello world';} 语法很简单,就是在函数前面加上async关键字,来表示它是异步的,那怎么调用呢?async函数也是函数,平时我们怎么使用函数就怎么使用它,直接加括号调用就可以了,为了表示它没有阻塞它后面代...转载 2021-07-10 09:23:38 · 2143 阅读 · 0 评论 -
【Vue项目总结】项目nginx部署
项目开发完成,接下来是上线,关于vue项目的部署,我司前端是部署在nginx服务器上,关于nginx的相关文档,请自行查阅;本文只记录部署时碰到的一些问题。打包vue项目打包后,是生成一系列的静态文件,包括项目的请求IP都打入包内,如果后台服务改动,这时你的前端文件,又要重新编译打包,这里采用的是后台管理项目总结提到的前端自行请求一个配置文件,动态修改你的相关配置。静态文件// config.json{ "api": "test.com"}请求文件在项目store中请求你的配置转载 2021-06-27 16:28:28 · 143 阅读 · 0 评论 -
【Vue项目总结】组件通信处理方案
Vue组件之间的通信是我们在项目中常常碰到的,而选择合适的通信方式尤为重要,这里总结下作者在实际项目中所运用到的通信方案,如有遗漏,请大家见谅。文章代码具体见DEMO;文章首发于imondo.cn父子组件Vue中常见的是父与子组件间的通信,所要用到的关键字段是props和$emit。props接受父组件传给子组件信息的字段,它的类型:Array | Object;详细解释可以参考文档$emit由子组件触发事件向上传播给父级消息。示例:// Parent<template转载 2021-06-27 16:20:57 · 1298 阅读 · 0 评论 -
Vue 3 组合式 API
Vue 3.x 完全不同于 Vue 2.x,使用函数式 API 构建程序,更灵活的组合组件逻辑具体代码请查看地址快速创建项目yarn create vite-app vue_3.xcd vue_3.xyarnyarn devsetupsetup函数是组件内使用 component API 的入口创建组件实例 => 初始化props=> 调用setup函数;在beforeCreate钩子之前调用 模板中使用<template...转载 2021-06-27 15:58:01 · 162 阅读 · 0 评论 -
vue中事件修饰符,stop,prevent,capture,self,once
https://blog.csdn.net/weixin_44994731/article/details/103925106?utm_source=app&app_version=4.9.3&code=app_1562916241&uLinkId=usr1mkqgl919blen11,stop修饰符,能够阻止冒泡事件,按照案例说明如下:按钮在div容器中。①,点击框中非按钮的位置,会触发div的事件②点击图中 “stop事件” 按钮 ,会发生冒泡事件,执行按钮转载 2021-06-27 14:52:29 · 1245 阅读 · 0 评论 -
Vue-给组件绑定原生事件
当我给一个组件绑定一个事件的时候,实际上这个事件绑定的是自定义的事件,也就是你真正的鼠标点击触发的事件,并不是我绑定的click事件。所以在下面这个例子里,点击子组件,并不会有弹窗提示。如果想触发自定义的click事件,就得在子组件里对元素进行事件绑定,这个事件才是真正的原生事件。在元素上绑定的事件,监听的是原生事件在组件上绑定的事件,监听的是自定义事件,需要用this.$emit()来触发。也就是酱婶的:在开发的过程中这样写有点太麻烦,假如我有这样的需求,我就想在子组件上监听原生的事件转载 2021-06-27 14:43:42 · 449 阅读 · 0 评论 -
vue中如何操作真实dom
原生操作doma = document.getElementById('elea');// 获取aelementList = document.querySelectorAll(selectors);//获取多个dom元素 如ul中的lielement = document.querySelector(selectors)//获取dom元素中的第一个元素123还有很多这样的dom操作方法。Vue中一般不操作dom,如果想要获取dom元素,该如何操作?Vue中操作domVue 1.x.转载 2021-06-13 16:58:56 · 1661 阅读 · 0 评论 -
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织,建议读者按章节顺序进行阅读,当然大佬级别的请随意。希望读者读完本文,有一定的启发思考,也能对自己的 Vue 掌握程度有一定的认识,对缺漏之处进行弥补,对 Vue 有更好的掌握。 文章最后一题,欢迎同学们积极回答,分享各自的经验 ~~~辛苦整理良久,还望手动点赞鼓励~github地址为:github.com/fengshi123转载 2021-06-13 11:29:09 · 305 阅读 · 0 评论 -
剖析Vue实现原理 - 如何实现双向绑定mvvm
Update:Vue3.0响应式原理精简代码本文能帮你做什么?1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理、数据的循环依赖等,也难免存在一些问题,欢迎大家指正。不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助本文所有相关代码均在github上面可找到https://github.com/DMQ/mvv..转载 2021-06-13 11:18:41 · 137 阅读 · 0 评论 -
在vue中使用rules对表单字段进行验证
1. 写在 data 中验证表单内容<!-- 表单 --><el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px"> <el-form-item label="用户名称:" prop="userName"> <el-input v-model="rulesForm.userName" style="width:300px" ma...转载 2021-06-12 16:18:31 · 1516 阅读 · 0 评论 -
【知识点】ES6箭头函数、箭头函数与普通函数的区别
文章出处:ES6 - 箭头函数、箭头函数与普通函数的区别一、基本语法ES6中允许使用箭头=>来定义箭头函数,具体语法,我们来看一个简单的例子:// 箭头函数let fun = (name) => { // 函数体 return `Hello ${name} !`;};// 等同于let fun = function (name) { // 函数体 return `Hello ${name} !`;};可以看出,定义箭头函在数语.转载 2021-06-12 13:56:39 · 103 阅读 · 0 评论 -
VUE:mixin、slot的用法
vue 为我们提供了很多复用性的方式,slot 和 mixins 就是其中两种…下面对这两种方式做一下记录开发中使用到了mixin混入与slot插槽。mixinvue中关于代码复用的一个实现方式,通过将多个组件的相同代码块提取出来放入到一个js文件中,再通过 mixins: [mixin]混入到组件内达到代码复用的目的,在项目具有多个相似功能的组件时很有用。合并规则钩子函数:同名钩子皆生效,且mixin会先于组件调用数据对象:同名发生冲突时以组件内数据优先值为对象的选项:metho转载 2021-05-16 16:29:59 · 336 阅读 · 0 评论 -
vue的store、vuex状态管理
直接看官方文档很清楚https://vuex.vuejs.org/zh/guide/说实话官网看的不是很懂,方便自己理解记录几个为什么;1、流程1.定义state变量2.只有 mutations下面定义的mutation方法 能动 State,改变State3.我们不能直接store.mutations.increment()来调用方法,Vuex 规定必须使用store.commit来触方法,官方解释如下图总结,想要改变一个State,必须要定义一个mutation函...转载 2021-05-16 15:37:18 · 439 阅读 · 0 评论 -
Vue 中 store 基本用法
最近在使用vue的过程中,遇到一个需求,就是需要在不同路由中使用同一个会改编的参数,也就是需要一个全局参数,一看见全局,不就是使用window呗。可是既然已经使用vue了,当然要研究一下vue里面怎么实现的。于是简单了解了一下store。 首先,我的需求比较简单,只是全局变量,但是在我查找各种资料的时候发现看不懂。。。这就尴尬了,而且大部分的文章都是讲述store的状态管理,理解store,但是找了一上午,还真的没有看到该怎么使用,怎么声明一个最简单的store,怎么存入全局变量,怎么获取全局变量..转载 2021-05-16 15:27:13 · 576 阅读 · 0 评论 -
手摸手带你理解Vue的Computed原理
前言computed 在 Vue 中是很常用的属性配置,它能够随着依赖属性的变化而变化,为我们带来很大便利。那么本文就来带大家全面理解 computed 的内部原理以及工作流程。在这之前,希望你能够对响应式原理有一些理解,因为 computed 是基于响应式原理进行工作。如果你对响应式原理还不是很了解,可以阅读我的上一篇文章:手摸手带你理解Vue响应式原理computed 用法想要理解原理,最基本就是要知道如何使用,这对于后面的理解有一定的帮助。第一种,函数声明:var vm =转载 2020-10-11 10:20:07 · 542 阅读 · 0 评论 -
Vue视图渲染原理解析,从构建VNode到生成真实节点树
前言在 Vue 核心中除了响应式原理外,视图渲染也是重中之重。我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐。本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组件开始,Vue 是如何构建 VNode,又是如何将 VNode 转为真实节点并挂载到页面。挂载组件($mount)Vue 是一个构造函数,通过 new 关键字进行实例化。// src/core/instance/index.jsfunction Vue (options) { if (p转载 2020-10-11 10:13:56 · 651 阅读 · 0 评论 -
10个Vue开发技巧助力成为更好的工程师(二)
优雅更新props更新 prop 在业务中是很常见的需求,但在子组件中不允许直接修改 prop,因为这种做法不符合单向数据流的原则,在开发模式下还会报出警告。因此大多数人会通过 $emit 触发自定义事件,在父组件中接收该事件的传值来更新 prop。child.vue:export defalut { props: { title: String }, methods: { changeTitle(){ thi转载 2020-10-11 10:08:31 · 183 阅读 · 0 评论 -
手摸手带你理解Vue响应式原理
前言响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图。在面试中是经常考查的知识点,也是面试加分项。本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行:分析主要成员,了解它们有助于理解流程 将流程拆分,理解其中的作用 结合以上的点,理解整体流程文章稍长,但部分是代码,还请耐心观看。为了方便理解原理,文中的代码会进行简化,如果可以请对照源码学习。主要成员在响应式原理中,Observe、Dep、Watcher 这三个类是构成完整原理的主要成员。Observe,转载 2020-10-11 10:03:26 · 340 阅读 · 0 评论 -
Vue源码解析,keep-alive是如何实现缓存的?
前言在性能优化上,最常见的手段就是缓存。对需要经常访问的资源进行缓存,减少请求或者是初始化的过程,从而降低时间或内存的消耗。Vue 为我们提供了缓存组件 keep-alive,它可用于路由级别或组件级别的缓存。但其中的缓存原理你是否了解,组件缓存渲染又是如何工作。那么本文就来解析 keep-alive 的原理。LRU策略在使用 keep-alive 时,可以添加 prop 属性 include、exclude、max 允许组件有条件的缓存。既然有限制条件,旧的组件需要删除缓存,新的组件就需要转载 2020-10-11 09:57:25 · 227 阅读 · 1 评论 -
accessToken refreshToken简单使用源码demo,双token刷新及有效时间设置
最后会附上源码这篇介绍了一个项目中使用的双token登录认证刷新的demo,如需移植到生产项目中,需要根据实际情况做修改。有个地方需要注意: 我这里刷新产生新的refreshToken时 旧的refreshToken并没有失效,如果不是特别敏感这点的话可以不计较,若是在意的话,那需要自己处理:比如用缓存记录失效的token每次token认证判断是否是失效的token ,如果是的话就返回验证失败。下面代码中会用到本地redis缓存,如果没有安装或不会用,看下我之前的博文win7_64 redis下载安转载 2020-10-06 11:31:35 · 1361 阅读 · 0 评论 -
双token刷新、续期,access_token和refresh_token实效如何设置
双token刷新、续期,access_token和refresh_token实效如何设置token认证,生成的token 过一段时间就会失效(不要故意把时间设的很长,这样不安全,token变得毫无意义!),用户需要重新登录获取token。用户经常使用客户端,使用过程中 由于token到期 客户端跳转到登录界面要求登录,这样体验极差!比如: token有效期2h,用户一直在使用客户端,使用过程中token到期跳转到登录页面邀请重新登录。第一次忍了,过了2个小时又要重新登录! 用户:MDZZ,再见。为了转载 2020-10-06 11:22:03 · 1244 阅读 · 1 评论 -
npm install 报错解决(To install them, you can run: npm install --save core-js/modules/es6.array)
解决:cnpm install core-js@2转载 2020-10-04 22:09:45 · 40158 阅读 · 6 评论