Vue3
文章平均质量分 80
Vue目前最火的的一个前端框架,三大主流前端框架之一。是一套构建用户界面的框架(一套完整的解决方案,对项目侵入性大,中途需要跟换框架则需要重构整个项目),只关注视图层,易上手
猫老板的豆
旁观自己 善待朝夕
展开
-
Pinia详解
Pinia官网Pinia是一个基于Vue 3的状态管理库,专为Vue 3设计。它提供了一种简单、直观且可扩展的方式来组织和访问应用程序的状态。Pinia的设计灵感来源于Vuex,但相比Vuex,Pinia更加轻量级、简单易用和灵活。Pinia利用Vue 3的新特性,如Composition API,使得开发者能够更容易地上手和使用。原创 2024-06-25 17:12:20 · 1176 阅读 · 0 评论 -
Vue 3 性能飞跃:解析其性能提升的关键方面
Vue 3 提供了更好的 Tree Shaking 支持,可以消除代码中未使用的部分,减少了不必要的代码和模块,减少打包体积,从而降低了应用程序的加载时间和运行时的内存占用。Vue 3 引入了事件缓存机制,当事件被多次触发时,不会每次都执行事件处理函数,而是使用缓存的结果,从而减少了不必要的计算和处理时间,提高了应用程序的性能。对于多层嵌套的对象,由于proxy只能代理一层,所以vue3在真正访问到对象属性的时候,才去判断递归,而不是在初始化的时候就一股脑的递归。Proxy 是直接代理整个对象。原创 2024-04-16 16:43:26 · 942 阅读 · 0 评论 -
Vue中computed与watch
深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。中的函数所依赖的属性没有发生改变的时候,那么调用当前函数的时候结果会从缓存中读取,除非依赖的响应式属性变化时才会重新计算;// 监听当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据。原创 2020-05-14 11:43:58 · 564 阅读 · 1 评论 -
Vue router 与 route 的区别
在 Vue Router 中,router 和 route 是两个不同的概念,它们各自具有不同的作用和功能。原创 2024-04-13 16:04:02 · 1343 阅读 · 1 评论 -
Vue Router 路由动态缓存组件
Vue Router 允许你缓存路由组件,这样在用户导航回之前的页面时,组件的状态会被保留而不是重新渲染。这可以通过使用组件来实现。是一个内置抽象组件,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。它的主要作用是缓存不活动的组件实例,而不是销毁它们。当组件在包裹下被切换时,它的状态(包括数据、DOM 结构等)都会被保留,以便在下次重新显示时能够恢复之前的状态,而不是重新创建组件实例。根据路由的meta字段中的keepAlive属性来决定是否缓存组件。原创 2024-04-13 11:29:57 · 2715 阅读 · 5 评论 -
Vue Router 路由生命周期钩子/路由导航守卫/路由鉴权
Vue Router 提供了路由钩子(Route Hooks),允许你在路由发生变化时执行一些操作。这些钩子可以在路由进入、离开等关键时刻触发,从而实现一些特定的功能,比如页面权限控制、数据预加载等。路由守卫简单来讲就是监听页面进入修改,和离开的功能。to:即将要进入的路由对象from:当前导航正要离开的路由next:一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是。原创 2024-04-12 15:41:43 · 2333 阅读 · 1 评论 -
Vue Router 4 与 Router 3 路由配置与区别
Composition API 的集成:Vue Router 4 提供了更好的对 Vue 3 Composition API 的支持,允许你使用。与 Vue 版本的兼容性:Vue Router 4 是专门为 Vue 3 设计的,而 Vue Router 3 与 Vue 2 兼容。TypeScript 支持:Vue Router 4 对 TypeScript 提供了更好的支持,类型定义更加完整和准确。路由守卫的改进:Vue Router 4 改进了路由守卫(导航守卫)的 API,提供了更多的灵活性和控制。原创 2024-04-12 15:37:38 · 663 阅读 · 0 评论 -
服务端渲染SSR
服务端渲染(Server-Side Rendering,简称SSR)是一种网页渲染技术,它指的是在服务器端完成页面的HTML结构、CSS样式以及JavaScript脚本的渲染,然后将完整的页面发送给客户端(浏览器)。在客户端,浏览器直接解析并显示这个已经渲染好的页面,而不需要再执行额外的JavaScript代码来生成页面内容。原创 2024-04-03 12:04:13 · 1170 阅读 · 0 评论 -
Vue 项目性能优化 — 实践指南
Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验本文通过以下三部分组成:Vue 代码层面的优化、webpack 配置层面的优化、基础的 Web 技术层面的优化;来介绍怎么去优化 Vue 项目的性能。原创 2023-08-29 18:53:38 · 1007 阅读 · 0 评论 -
Vue3 的 ref 和 reactive 问题
reactive 能做的 ref 也能做,并且还是用 reactive 做的当 ref 的参数为对象时,用的就是 reactive 方法在 Vue3 中,如果是把对象类型的数据弄成响应式,reactive 和 ref 都可以,且ref 内部是通过r eactive 来支持的。也就是说,你 reactive 能做的,我 ref 也能做。原创 2023-02-02 14:21:37 · 2137 阅读 · 0 评论 -
vue 打包出现的缓存问题
vue 项目每一次打包上线,都会有浏览器缓存问题,需要用户手动清除缓存,十分麻烦。原创 2022-09-02 09:35:51 · 1131 阅读 · 0 评论 -
vue3中多环境配置打包
vue多环境配置及打包env.development(开发环境).env.production(生产环境).env.test(测试环境)原创 2022-08-26 18:29:18 · 1948 阅读 · 0 评论 -
Vue Router 路由详解
Vue路由是Vue.js官方的路由管理器,它和Vue.js深度集成,用于构建单页面应用(SPA)。Vue路由通过监听URL的变化,根据URL的不同加载和渲染不同的组件,从而实现单页面应用。当URL变化时,Vue路由会匹配到对应的路由规则,然后加载和渲染该规则对应的组件,而不需要重新加载整个页面。Vue路由使得开发者能够更加方便地管理页面间的导航和组件的渲染。原创 2022-05-10 12:01:50 · 1216 阅读 · 2 评论 -
Vue3 script setup 语法糖,超爽体验
文章目录简介1. 属性和方法无需返回,直接使用2. 组件自动注册3. 组件数据传递(props和emits)4. 获取 slots 和 attrs5. 对外暴露属性(defineExpose)简介<script setup> 语法糖并不是新增的功能模块,它只是简化了以往的组合API(compositionApi)的必须返回(return)的写法,并且有更好的运行时性能。在 setup 函数中:所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 setup() 返回对象中。相对于之前的原创 2021-10-07 16:18:10 · 4096 阅读 · 2 评论 -
Vite创建Vue3项目
文章目录Vite创建Vue3项目1. 输入项目名称2. 选择框架3. 选择不同的vue4. 项目创建完成5. 项目结构6. 启动项目Vue3中使用jsx1. 安装插件2. 注册插件3. 使用插件注意Vite创建Vue3项目Vite 需要 Node.js 版本 >= 12.0.0。(node -v 查看自己当前的node版本)使用 yarn:yarn create @vitejs/app使用 npm:npm init @vitejs/app1. 输入项目名称这里输入我们的项目名称:原创 2021-09-16 11:10:58 · 8922 阅读 · 3 评论 -
Vue3.x 超详细安装教程
文章目录一、安装vue-cli二、创建项目三、选择配置四、是否使用history路由模式,这里我选择:`Y`五、选择css预处理器,这里我选择:`Stylus`六、选择eslint 配置,这里我选择: `ESLint + Standard config`七、选择什么时候执行eslint校验,这里我选择:`Lint on save`八、选择配置文件存放的位置,这里我选择:`In dedicated config files`九、是否保存之前的配置项,如果是则需要输入保存名,如第二步所看到的我保存的名字为xia原创 2021-08-27 09:18:43 · 6890 阅读 · 3 评论 -
Vue3.x 生命周期
Vue2 生命周期Vue2 和 Vue3 中的生命周期钩子函数非常相似,我们仍然可以访问相同的钩子函数,并且我们仍然希望将它们用于相同的用例。但是,随着 Composition API 的引入,我们访问这些钩子函数的方式已经改变。Vue3 Composition API 附带了一个 setup() 方法,此方法封装了我们的大多数组件代码,并处理了响应式,生命周期钩子函数等。使我们能够更好地将代码组织为更多的模块化功能,而不是根据属性的类型(方法,计算的数据)进行分离。Vue3 中可以通过在生命周期钩原创 2021-08-18 18:25:49 · 967 阅读 · 0 评论 -
Vue3.x 超详细入门教程
Vue提供了transition组件,写法:&amp;amp;amp;amp;amp;amp;amp;lt;transition name=&amp;amp;amp;amp;amp;amp;quot;box&amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/transition&原创 2019-01-21 17:14:19 · 7260 阅读 · 0 评论 -
Vue3.x 新特性总结
Vue3相较于Vue2在多个方面都有所改进和提升,主要优势:更好的性能:Vue3通过重写响应式系统,使用替代了Vue2的。这使得Vue3在数据响应式处理上更加高效,特别是在处理复杂数据结构和嵌套属性时,性能提升更为显著。(Vue双向绑定原理)Vue3还通过静态标记 和 树摇(tree-shaking) 优化等手段来减小打包体积,从而提高了页面加载速度。这意味着在构建大型应用时,Vue3能够提供更快的启动时间和更流畅的用户体验。更简洁的API设计:引入组合API:更好的TypeScript支持:支持Fragm原创 2021-03-10 16:17:05 · 1925 阅读 · 3 评论