![](https://img-blog.csdnimg.cn/d3d1d43e516549edbbd8f255c8a65a05.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue3.x
文章平均质量分 65
与Vue3.x相关的技术总结和实践总结
小草莓蹦蹦跳
一枚努力奋斗的程序莓,喜欢记录和学习。本博客主要涵盖前端技术积累和工作积累。just do it,家人们加油加油油
展开
-
SPA vs MPA vs PWA
SPA 全称为 Single-Page Application,表示单页面应用程序。也就是说只有一个 HTML 文件的 Web 应用,我们通过 Vue 开发的项目其实就是典型的 SPA应用在单页面应用程序中,我们不会为每个路径创建多个 HTML 文件,而是使用 JavaScript 为同一页面上的不同路径呈现不同的组件。当从浏览器请求单页面应用程序时,就会下载一个 bundle.js 文件,该文件包含所有请求网站的已编译 JavaScript 代码。使用这种方法,浏览器会通过使用。原创 2024-01-22 22:44:05 · 1329 阅读 · 0 评论 -
Proxy 与 defineProperty 的理解、区别、优势、劣势
参考: Vue2 和 Vue3 响应式上有什么区别? / 使用 Object.defineProperty() 来进行数据劫持有什么缺点?_vue 2响应式和vue 3响应式区别-CSDN博客文档:Object.defineProperty() - JavaScript | MDN 作用:对一个对象进行操作的方法。可以为一个对象增加一个属性,同时也可以对一个属性进行修改和删除。 的问题主要有三个: 兼容性好,支持 Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必原创 2024-01-04 21:53:57 · 2655 阅读 · 0 评论 -
Vue 中 slot 是什么?作用?分类?如何实现?
插槽 — Vue.js插槽 Slots | Vue.js在 Vue2.6.0 之后,使用v-slot或者语法糖#插槽名定义;在这之前使用slot="插槽名"定义。跟 v-on 和 v-bind 一样,v-slot 也有缩写,也就是把参数之前的所有内容(v-slot:) 替换为字符 #;下面是三种默认插槽的内容定义方式,并且最后一个默认插槽的内容会覆盖掉上一个插槽内容。使用 template 包裹内容,同时使用 v-slot 绑定一个名称。原创 2023-11-15 11:01:56 · 9027 阅读 · 0 评论 -
Vue3 <script setup>是什么?作用?
⑤ useAttrs 获取属性,useSlots 获取插槽,defineEmits 获取自定义事件,defineExpose 对外暴露。在组件中可以直接使用这些属性和事件,无需在 props 和 emits 中声明。在模板中就可以直接使用它们。<script setup> 是 Vue3 的语法糖,简化了组合式 API 的写法,其实是。① 在 setup 中声明的属性和方法无需 return,就可以直接在模板使用;而 <script setup> 中的代码会在每次组件实例被创建的时候执行。原创 2023-11-07 23:21:49 · 2531 阅读 · 1 评论 -
Vue 3 中,watch 和 watchEffect 的区别
watch:既要指明要监听的属性,也要指明回调。不用指明监听哪个属性,回调中用到哪个属性,那就监听哪个属性。watchEffect 有点像计算属性 computed:但 computed 注重的计算出来的值(回调函数的返回值),所以必须要写返回值。而 watchEffect 更注重的是过程(回调函数的函数体),所以不用写返回值。与比较,watch懒执行副作用;更具体地说明什么状态应该触发侦听器重新运行;访问侦听状态变化前后的值。原创 2023-11-07 17:37:40 · 850 阅读 · 0 评论 -
Pinia 是什么?Redux、Vuex、Pinia 的区别?
总之,Redux、Vuex 和 Pinia 都提供了一种可预测的状态管理方案,并有其自身独特的优点。Pinia 适合那些想要一个简单、轻量级的状态管理库的开发者,而 Vuex 则适合那些需要更多功能和灵活性的开发者。具体选择哪一个取决于应用的复杂度、开发团队的技能水平和个人偏好等因素。如果是 Vue.js 3 的项目,可以考虑使用 Pinia,否则可以考虑 Vuex 或 Redux。原创 2023-11-07 15:09:32 · 1307 阅读 · 0 评论 -
对 Vuex 的理解(核心、状态修改、特点、缺点、底层原理)
总之,Vuex 是 Vue.js 生态中的一个非常重要的插件,适用于中大型的 Vue.js 应用,它通过提供集中式的状态管理模式、响应式更新、单向数据流、模块化组织和辅助函数等特性,可以更好地组织和管理应用的状态,提高开发效率和代码质量。原创 2023-10-08 00:49:57 · 459 阅读 · 0 评论 -
Vue 是单向数据流,为什么有双向绑定?
是通过监听表单元素上的 input 或者 change 事件,然后再通过数据劫持 (Object.defineProperty) 将数据模型中的值与表单元素的值进行绑定。需要注意的是,虽然双向绑定在某些场景下提高了开发效率和用户体验,但是过多使用双向绑定可能会导致代码难以理解和维护。v-model 的实质是语法糖,它的内部会根据组件类型自动转换/解析成不同的事件和属性,默认是 input 和 value。,但是在表单交互中,双向数据绑定可以方便地将用户输入的数据同步到数据模型中,提高了用户体验。原创 2023-10-30 18:26:01 · 318 阅读 · 0 评论 -
用 Vue Router 的 hash 模式如何实现锚点?
③ 在目标组件中,可以使用 Vue 的生命周期函数 mounted 来。这样,当路由跳转到目标页面时,页面会自动滚动到指定的锚点位置。① 首先,在 Vue Router 的路由配置中,需要将。设置目标 URL 的 hash 部分为锚点的名称。scrollIntoView方法将其滚动到视图中。获取目标描点的 DOM 元素。mode 设置为 hash。② 在页面跳转时,使用。原创 2023-10-29 10:47:34 · 1057 阅读 · 0 评论 -
在 history 模式下,为什么刷新页面会出现404?
同时需要注意在使用 History 模式时,需要保证所有路由的访问路径都指向 index.html,否则仍然会出现404错误。这些配置将确保在 Vue 应用程序中使用 history 模式时,服务器能够正确地处理所有路由请求,并返回正确的页面。这段代码会将所有请求都指向根目录下的 index.html 文件,让前端路由来处理 URL 请求。具体的配置方式取决于对应项目使用的服务器环境,常见的有 Apache、Nginx 等。以将所有请求都代理到 Vue 应用程序的入口文件。原创 2023-10-25 11:43:20 · 3919 阅读 · 0 评论 -
history 模式上线需要注意什么事项?
总之使用 History 模式需要对后端进行相关配置,并且需要特别注意安全性和兼容性问题,同时在打包发布时需要正确配置 publicPath,确保页面资源路径正确。原创 2023-10-24 18:51:58 · 480 阅读 · 0 评论 -
常见的 Vue Router 的导航钩子/ 路由导航守卫
这些导航钩子提供了灵活的路由跳转控制机制,可以方便地实现各种复杂的路由跳转需求。同时,VueRouter 还提供了一些其他的导航钩子和高级特性,比如路由元信息、动态路由、命名路由等,可以进一步提高开发效率和应用的可维护性。三、全局守卫、路由独享守卫、组件内置守卫的区别。原创 2023-10-24 15:26:33 · 1386 阅读 · 1 评论 -
在 Vue & react 中,哪些地方用到闭包?
在 Vue 和 React 中,也有使用到闭包的地方。在 Vue 和 React 中,由于都是响应式框架,会自动处理视图的更新,而这个过程中也会用到闭包。原创 2023-10-23 20:26:21 · 682 阅读 · 0 评论 -
Vue2 和 Vue3 响应式上有什么区别? / 使用 Object.defineProperty() 来进行数据劫持有什么缺点?
在 Vue 2 中,当一个对象被设置为响应式对象时,会通过 Object.defineProperty() 方法把每个属性都转换成 getter和 setter,当属性值发生变化时,会触发 setter,进而通知所有引用该属性的组件更新视图。Vue 3 中使用了递归遍历 Proxy 对象的属性,因此在访问嵌套属性时会更加方便和高效,而 Vue2 则需要通过 watch 或 computed 等方式才能实现嵌套属性的响应式。监听到属性的删除和新增,而且能够直接监听数组的变化,不需要对数组进行特殊的处理。原创 2023-10-17 23:21:16 · 417 阅读 · 0 评论 -
Vue 3.0 使用的 diff 算法相比 Vue 2.0 中的双端比对有什么优势?
Vue 3.0 中,每次更新时会将新旧 VNode 数组缓存起来,只对数组中不同的 VNode 进行比对,减少比对次数,提升性能。Vue 3.0 中,对于动态删除操作,采用了异步队列的方式进行,能够将多个删除操作合并为一个,减少 DOM 操作,提升性能。总的来说,Vue 3.0 的 diff 算法相比 Vue 2.0 更加高效,能够减少不必要的 DOM 操作,提升应用的性能。Vue 3.0 中,编译器会对静态节点进行标记,在更新时可以直接跳过这些静态节点,减少 DOM 操作,提升性能。原创 2023-10-16 23:37:41 · 568 阅读 · 0 评论 -
Vue 如何检测 data 中 数组的变化?
Vue 可以使用 watch 和 computed 监听数组的变化。原创 2023-10-16 20:13:23 · 1610 阅读 · 0 评论 -
Vue2 与 React 的区别
Vue2 是同层比较新老 vnode ,新的不存在老的存在就删除,新的存在老的不存在就创建,子节点采用双指针头对尾两端对比的方式,全量 diff,然后移动节点时通过 splice 进行数组操作。相比 Vue 的自动化, React 则是基于状态,单向数据流,数据不可变,需要手动 setstate 来更新,而且当数据改变时会以组件根为目录,默认全部重新渲染整个组件树,只能额外用。运行时才递归,用到才代理。React 的生命周期包含了10个钩子函数,其中有些钩子函数是过时的,也有一些新的钩子函数被引入。原创 2023-10-16 17:30:19 · 809 阅读 · 1 评论 -
Vue 项目, style 标签中为什么要添加 scoped 修饰符
总结来说,Scoped CSS通过为样式选择器添加唯一的属性选择器,限定样式规则的作用范围,使得样式只作用于特定的组件或元素。这种方式可以避免样式冲突,提高样式隔离性,是前端框架中常用的一种样式隔离解决方案。原创 2023-10-13 18:29:56 · 597 阅读 · 0 评论 -
slot 、Vue.mixin 、v-once
插槽是利用 slot 进行占位。在使用组件时,传入的组件内容也就是HTML片段,会分发的对应的 slot 中。原创 2023-09-04 20:42:34 · 57 阅读 · 0 评论 -
对透传 Attributes 的理解
例如,不管父组件传入的属性 allow-clear 是 true 还是 false,生效的都是 true。指的是将在父组件中定义的属性会传递给子组件,子组件中不需要声明 props 或者 emit。指的是将在父组件中定义的属性会传递给子组件,不需要在子组件中声明 props。若子组件的根元素上已经有了 class 属性,那它会和从父组件上继承的值。这些透传进来的 attribute 可以在模板的表达式中直接用。如果父组件传入属性,子组件中声明了相同的属性。访问一个组件的所有透传 attribute;原创 2023-10-09 18:21:05 · 209 阅读 · 0 评论 -
Vue 中的 watch 和 computed 的区别
watch用于监听特定数据的变化,并在数据变化时执行相应的操作;可以监听某个数据的变化,也可以监听多个数据的变化;适合处理异步操作或复杂的数据变化逻辑;通过watch监听的数据发生变化时,可以执行一些异步操作、复杂逻辑计算或手动操作DOM 等;computedcomputed用于基于响应式依赖进行动态计算,并返回计算结果。依赖于响应式数据,只有当依赖的数据发生改变时,computed才会重新计算。适合进行简单的数据计算、筛选、排序等操作。由于computed。原创 2022-07-06 13:41:51 · 692 阅读 · 0 评论 -
Vue 中,key 的作用;在渲染列表的时候,为什么不建议用数组的下标当做列表的 key?
如果使用数组的下标作为 key 值,虽然可以满足每个元素 key 值唯一的需求但是由于 Vue 的更新机制是基于 diff 算法实现的,使用数组下标作为 key 值会导致 Vue 无法正确地判断列表中元素的变化情况。使用 index 作为 key 和没写基本上没区别,因为不管数组的顺序怎么颠倒,index 都是 0, 1, 2...这样排列,导致 Vue 会复用错误的旧子节点,做很多额外的工作。例如,当删除列表中某个元素时,其后面的所有元素的下标都会发生改变,导致后面的每个项都会被重新渲染。原创 2023-10-07 21:47:41 · 422 阅读 · 0 评论 -
Vue2、Vue3 和 React 中 Diff 算法的区别
DOM diff 本质上就是在数据响应式的场景下,降低了用户对 DOM 的直接操作。Vue2、Vue3 和 React 底层都有用到 DOM diff,它们的相同点呢,都是同级比对,复杂度差不多;那不同点呢,一个是节点移动的方向。比如 React 是从左向右移动,而 Vue2 是双端 diff,也就是指针是两边向中间移动的。而 Vue3 在 Vue2 双端 diff 的基础上,加上了最长递增子序列优化算法。原创 2023-09-24 19:00:28 · 922 阅读 · 0 评论 -
Vue 的组件加载顺序和渲染顺序
综上所述,Vue 中组件的加载和渲染顺序是先加载父组件,再递归地加载子组件,然后按照深度优先遍历的方式渲染子组件,再依次向上渲染父组件。原创 2023-09-23 15:59:35 · 2458 阅读 · 0 评论 -
快速新建一个Vue2/Vue3项目
2、查看是否安装成功(查看webpack版本号)4、查看是否安装成功(查看vue版本号)5、使用 vue-cli 来构建项目。1、全局安装webpack。3、全局安装vue-cli。1、项目的初始化、、原创 2019-12-11 11:17:33 · 146 阅读 · 0 评论 -
Vue 项目中的错误如何处理的?
父组件(errorCaptured) -> 子组件 (errorCaptured) -> 当孙子组件出错时,错误会一直向上抛,也就是先触发子组件的 errorCaptured,然后触发父组件的 errorCaptured。原理:Vue底层源码会在很多地方都做了错误处理,例如在渲染的时候出错或者数据初始化的时候出错都会触发handleError方法,传入错误信息和实例等;如果全局的 config.errorHandler 被定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报。原创 2023-09-02 00:01:35 · 609 阅读 · 0 评论 -
Vue 中 diff 算法原理
如果两个节点不相同的话,那么直接删除老节点,然后创建新节点。如果是相同节点,那么会比较两个节点的差异,包括节点的 key 属性、tag 标签、事件等等;如果两个父节点相同的话,那么就比较儿子节点。比较子节点有以下4种情况:如果都是文本节点且不相等,直接将el文本节点更新为新节点的文本内容即可;如果老的有儿子,新的没儿子,直接删除老的儿子节点;如果老的没儿子,新的有儿子,那么就创造新的儿子节点,直接插入父节点中;如果两者都有子节点,则执行函数比较子节点。原创 2023-08-23 00:55:42 · 1956 阅读 · 0 评论 -
说说 Vue 的虚拟 DOM 和 diff 算法
虚拟 DOM 是真实 DOM 的 JS 对象,是对真实 DOM 的抽象,至少包含标签名(tagName)、标签的属性(props)以及子标签列表(children)如下图,左侧是虚拟 DOM,对应的虚拟DOM就是右侧的JS对象。基本上所有框架都引入了虚拟 DOM 来对真实 DOM 进行抽象,也就是现在大家所熟知的 VNode 和 VDOMVue 中 diff 算法原理_小草莓蹦蹦跳的博客-CSDN博客。原创 2020-07-21 18:09:29 · 129 阅读 · 1 评论 -
对 keep-alive 的理解,使用场景以及存在的问题
include(包含的组件缓存) 、 exclude(排除的组件不缓存,优先级大于include) 、max(最大缓存数,内部采用lru算法用于维护缓存列表)若用 keep-alive 包住A组件和B组件,从A组件跳转到B组件,在哪里更新B组件页面的数据?② exclude - 字符串或正则表达式,任何名称name匹配的组件都不会被缓存。,缓存的组件重新进入不会再触发created生命周期中的方法,因此数据不会更新。③ max - 缓存的最大个数(如果超过最大缓存个数,则移除最先缓存的组件)原创 2022-07-06 11:27:34 · 5078 阅读 · 0 评论 -
Vue2.x和Vue3.x 的生命周期是什么?有什么区别
一、什么是Vue生命周期?二、Vue生命周期的作用是什么?三、Vue2.x生命周期1、总共有几个阶段?2、第一次进入页面/组件,会触发哪几个钩子?3、在哪个阶段有$el,哪个阶段有$data?4、DOM 渲染在哪个周期中就已经完成?5、如果加入了keep-alive,会多什么生命周期?6、如果加入了keep-alive,第一次进入组件会执行哪些生命周期?7、如果加入了keep-alive,第二次后者第N次进入组件会执行哪些生命周期?8、捕获一个来自子孙组件的错误时原创 2023-06-29 11:40:26 · 464 阅读 · 0 评论 -
Vue 的路由模式:hash 模式和 history 模式的区别
综上所述,hash 模式适用于简单的前端开发,不需要特殊后端配置,对兼容性要求较高,但在 SEO 方面存在一定的问题。而history 模式则适用于需要更友好的 URL 格式和更好的 SEO 支持的项目,但需要服务器端进行相应的配置。选择哪种模式取决于具体的项目需求和技术要求。原创 2023-06-29 15:01:14 · 516 阅读 · 1 评论 -
【Vue3重点概念总结和实践八】(自定义切换焦点指令v-focus / 自定义防抖指令v-debounce-click:ms / 自定义节流指令 v-throttle-click:ms / 函数式组)
1、自定义切换焦点指令v-focus2、自定义防抖指令 v-debounce-click:ms3、自定义节流指令 v-throttle-click:ms4、函数式组件5、Vue3 + Vue-cli (1) 基础篇6、Vue3+ Vue-cli (2) 组件篇原创 2023-06-29 10:28:02 · 857 阅读 · 0 评论 -
【Vue3重点概念总结和实践七】(封装获取鼠标坐标组合函数 / 在具有CSS作用域的Vue单文件组件设置全局CSS样式:global() / 使用 h 渲染函数来实现一个组件)
1、封装获取鼠标坐标组合函数2、在具有CSS作用域的Vue单文件组件设置全局CSS样式3、渲染函数4、Vue3 + Vue-cli (1) 基础篇5、Vue3+ Vue-cli (2) 组件篇原创 2023-06-20 18:40:14 · 355 阅读 · 0 评论 -
【Vue3重点概念总结和实践六】(v-once / 封装一个切换器 / 异步操作 / 实现本地存储函数)
1、优化性能的指令2、切换器3、异步操作4、实现本地存储函数5、Vue3 + Vue-cli (1) 基础篇6、Vue3+ Vue-cli (2) 组件篇原创 2023-06-20 15:57:29 · 1179 阅读 · 0 评论 -
【Vue3重点概念总结和实践五】(nextTick() / <Teleport> / effectScope() )
1、下一次DOM更新2、DOM传送门3、Effect 作用域API4、Vue3 + Vue-cli (1) 基础篇5、Vue3+ Vue-cli (2) 组件篇原创 2023-06-20 11:04:29 · 483 阅读 · 0 评论 -
【Vue3重点概念总结和实践四】(v-bind() 动态CSS / .stop 阻止事件冒泡 / 自定义修饰符)
1、动态CSS2、阻止事件冒泡3、自定义修饰符4、Vue3 + Vue-cli (1) 基础篇5、Vue3+ Vue-cli (2) 组件篇原创 2023-06-14 18:33:02 · 1562 阅读 · 0 评论 -
【Vue3重点概念总结和实践三】(shallowRef / shallowReactive / triggerRef / inject / onUnmounted)
目录1、shallowRef 和 shallowReactive2、Dependency Injection 依赖注入3、生命钩子函数4、Vue3 + Vue-cli (1) 基础篇5、Vue3+ Vue-cli (2) 组件篇原创 2023-06-13 18:36:16 · 317 阅读 · 0 评论 -
【Vue3重点概念总结和实践二】(watch / props / toRaw / makeRaw)
1、watch全家桶2、Prop验证3、原始值API4、Vue3 + Vue-cli (1) 基础篇5、Vue3+ Vue-cli (2) 组件篇原创 2023-06-09 14:35:38 · 1315 阅读 · 1 评论 -
Vue配置proxy代理,但接口报错2007 bad domain
/ 后端增加 CSRF 防御机制,对请求头 Origin/Referer 进行校验,开发模式下 devServer 的代理需要修改 Origin/Referer 规避校验。如果后端增加 CSRF 防御机制,对请求头 Origin/Referer 进行校验。2、修改 headers 中的 Origin 和 Referer 规避校验。排查 proxyTable 对象中配置的 target 是否正确。Host 和 Referer 是本地地址,若正确,那可能就是请求头的问题。重新启动项目,就正常了~~原创 2023-06-07 16:52:51 · 875 阅读 · 0 评论 -
模拟请求的工具 jsonplaceholder
1、 jsonplaceholder官网地址:http://jsonplaceholder.typicode.com/文档说明:https://blog.csdn.net/lhjuejiang/article/details/81288321原创 2021-05-24 10:34:10 · 79 阅读 · 0 评论