文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Vue3 + Vite2 项目实战复盘总结（干货！）

在开始写项目的时候，我一直没有 get 到组合 API 的有优点，还没有了全局的 this，我就有点不开心了，但是随着项目越来越复杂，页面越来越大的时候我就发现组合 API 真香。特别喜欢。...每个模块各司其职，各自有自己的内部数据，公共的使用函数或者 hooks 抽象出来，整体上非常清爽，工程化越来越强，在项目中开发是否全部要使用 .vue 创建组件呢？...以前我觉得既然我选了 vue，就要用 .vue 的形式，但是在这次的项目开发过程中，我看到了我的小伙伴使用了原生 js 创建组件，我眼前一亮，在某些情况下用原生的 js 创建组件是一个非常不错的选择，那一刻我明白了...路由逻辑处理这块，我就坑到自己了，我焦点都在组合式API，在组合式 API 文档我找不到进入路由时候的生命周期函数。结果就导致我部分页面逻辑写在了 router.js 里面。...我竟然忽略了它原来的语法，去执着与他的新语法。 所有页面需要统一的动态的一级路由前缀，即路由的一级域名不是由前端控制的，但是在实际开发中，前端路由规则是要关注一级路由的。

1.6K50

玩转react-hooks,自定义hooks设计模式及其实战

自定义hooks-驱动条件 hooks本质上是一个函数。函数的执行，决定与无状态组件组件自身的执行上下文。...正如下图所示 自定义hooks-条件限定 如果自定义hooks没有设计好，比如返回一个改变state的函数，但是没有加条件限定限定，就有可能造成不必要的上下文的执行，更有甚的是组件的循环渲染执行。...如上述问题，我们格式化父组件传递过来的list数组，并将小写变成大写，但是当我们点击add。理想状态下数组不需要重新format，但是实际跟着执行format。无疑增加了性能开销。...所以一个好用的自定义hooks,一定要配合useMemo ,useCallback 等api一起使用。...3 我们通过useRef改变x,y值,但是需要渲染新的位置，所以我们用一个useState来专门产生组件更新。

2.3K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    使用antd表格组件实现日程表

    ，然后向后台请求接口重新获取数据渲染页面，在打开的弹窗中提供了一个方法，可以调用父页面的方法，但是这个方法必须写在hooks外面他才能获取到。...此时，问题就产生了，如果写在hooks外面，那么就无法拿到antd表格内部的数据做到页面重新渲染，经过一番思考后，想到了可以Proxy来实现，当被代理的对象发生改变时，就触发hooks里的代理函数，实现代码如下...但是我又不知道用户具体删了哪条数据，不好自己写函数去处理。...使用use-immer来替代React的useState来解决这个问题，这个就比较坑爹了，官方提供了umd的js库，但是通过cdn引入进来后，我硬是没找到它暴露出来的对象是哪个，没法用，故放弃。...JSON.parse进行深拷贝，但是这种深拷贝有个问题：但json数据中有函数时，里面的函数会失效没法执行，由于我需要自定义antd的表格，在json数据中包含了函数，因此我不能使用这个方法。

    4.2K20

    React组件设计实践总结04 - 组件的思维

    当 props 为函数时, 父组件可以通过函数参数给子组件传递一些数据进行动态渲染. 典型代码为: {() => Hello,World!...如果要传递给当前组件还是得通过 props, 也就是通过高阶组件传递进来 再开一下脑洞....上面的例子父级通过 JSX 的条件渲染就可以动态控制锁定, 比之前的实现简单了很多 ---- 4. hooks 取代高阶组件 个人觉得 hooks 对于 React 开发来说是一个革命性的特性, 它改变了开发的思维和模式...传统的路由主要用于区分页面, 所以一开始前端路由设计也像后端路由(也称为静态路由)一样, 使用对象配置方式, 给不同的 url 分配不同的页面组件, 当应用启动时, 在路由配置表中查找匹配 URL 的组件并渲染出来...React-Router v4 算是一个真正意义上符合组件化思维的路由库, React-Router 官方称之为‘动态路由’, 官方的解释是”指的是在应用程序渲染时发生的路由，而不是在运行应用程序之外的配置或约定中发生的路由

    2.7K20

    React 特性剪辑(版本 16.0 ~ 16.9)

    其实并不是真的冒泡到了父节点的兄弟节点上。...Error Boundaries React 16 提供了一个新的错误捕获钩子 componentDidCatch(error, errorInfo), 它能将子组件生命周期里所抛出的错误捕获, 防止页面全局崩溃...Context(16.3、16.6) Context 相当于是用组件化的方式使用 global, 使用其可以共享认证的用户、首选语言(国际化)等一些全局的信息, 而不必通过组件一层层传递。...Hooks 的意义就是赋能先前的无状态组件，让之变为有状态。这样一来更加契合了 React 所推崇的函数式编程。...接下来梳理 Hooks 中最核心的 2 个 api, useState 和 useEffect useState useState 返回状态和一个更新状态的函数 const [count, setCount

    1.8K30

    这个key我查了，没问题

    案发现场 Vue 项目，页面上点击在某个功能按钮后，切换左侧菜单，控制台报照片上的错误，页面卡死。...初步分析 这个 Vue 项目侧边栏是登录后根据用户权限数据动态渲染出来的，侧边栏菜单深度达到三级，动态绑定的部分涉及到 v-for 的嵌套使用，侧边栏点击的时候会不会是那里的 key 有问题导致的，由于之前这个项目也了解一些...之前分析页面切换能进入 created 函数，通过把 template 里面内容全部注释随便写个文字运行尝试，发现侧边栏点击后页面正常切换，内容正常显示，控制台无报错，看来是 template 里面的某个元素收影响了...，通过把功能代码一行行的注释放开，最后问题定位到了，竟然是 ElementUI 里面的分页组件报错了 1.png 第二天封版了，接下来怎么办 **换呗**，换个分页组件试试，单独引入了 Ant Design...里面的分页多次测试，功能OK，但是项目里所有页面有分页的组件的地方都得改，第一时间向上反馈，领导了解情况后同意，这次现场支援任务完成 总结 这次的问题虽然困扰了K几天，其实这个问题并不难，解决后发现也没有用到什么高深技术

    1.2K20

    Vue3 Composition-Api + TypeScript + 新型状态管理模式探索。

    Vue3 中有一对新增的 api，provide和inject，熟悉 Vue2 的朋友应该明白， 在上层组件通过 provide 提供一些变量，在子组件中可以通过 inject 来拿到，但是必须 在组件的对象里面声明...requestBooks); }); return { books, loading }; }, components: { Books, }, }); 这个页面需要初始化...此后对于前端分页的需求来说，就可以通过在模板中使用 Hook 返回的值来轻松实现，而不 用在每个组件都写一些data、pageNo之类的重复逻辑了。...和 React 的 Hook 的区别 对比的时候，我对于 Vue3 的 Hook 甚至有了一些盲目的崇拜，但是真正使用下来发现，虽 然不需要我们再去手动管理依赖项，但是由于 Vue 的响应式机制始终需要非原始的数据类...另外，vuex-next 也已经编写了一部分，我去看了一下，也是选择使 用provide和inject作为跨模块读取store的方法。

    41410

    Vue3 Composition-Api + TypeScript + 新型状态管理模式探索。

    api，provide和inject，熟悉 Vue2 的朋友应该明白， 在上层组件通过 provide 提供一些变量，在子组件中可以通过 inject 来拿到，但是必须 在组件的对象里面声明，使用场景的也很少...requestBooks); }); return { books, loading }; }, components: { Books, }, }); 这个页面需要初始化...此后对于前端分页的需求来说，就可以通过在模板中使用 Hook 返回的值来轻松实现，而不 用在每个组件都写一些data、pageNo之类的重复逻辑了。...和 React 的 Hook 的区别 对比的时候，我对于 Vue3 的 Hook 甚至有了一些盲目的崇拜，但是真正使用下来发现，虽 然不需要我们再去手动管理依赖项，但是由于 Vue 的响应式机制始终需要非原始的数据类...另外，vuex-next 也已经编写了一部分，我去看了一下，也是选择使 用provide和inject作为跨模块读取store的方法。

    97312

    React Hooks 还不如类？

    [……]hooks 使你可以根据各个部分的相关性（例如设置订阅或获取数据）来将一个组件拆分为一些较小的函数，而不是根据生命周期方法强行拆分。 如果你在使用存储，那么上面这段话基本没意义。...通过在渲染函数中触发效果，我们可以确保在每次渲染 / 更新时都调用该效果，但是给定的函数只有在其参数之一更改的情况下才会再次运行，因此我们可以结合 componentDidMount 和 componentDidUpdate...最后我得谈一谈 useContext：useContext 实际上是对我们当前为类提供的原始上下文 API 的巨大改进。但还是那句话——为什么我们不能为类提供这个漂亮干净的 API 呢？...我并不是说你用类就不会编写错误的代码，但是 Funclass 更容易出错，并且如果没有严格定义的生命周期方法结构，做坏事情就会容易得多。 7....如果我正在寻找某种初始化逻辑，我将跳转（VS Code 中是 cmd+shift+o）到 componentDidMount。

    1.1K10

    【Web技术】1445- 如何使用 Hooks 写出高质量的 React 和 Vue 组件？

    hooks组件到底应该如何写，我也曾为此迷惘过一段时间。特别我以前以react开发居多，但在转到新岗位后又变成了使用vue3开发，对于两个框架在思维方式和写法的不同上，很是花了一段时间适应。...好在几个月下来，我发现二者虽然在写法上有区别之处，但思想上却大同小异。 所以在比较了两个框架的异同后，我总结出了一套通用的hooks api的抽象方式，在这里分享给大家。...你可以思考一下，自己是如何抽象一个函数的，你只会在代码需要复用的时候才抽出一个函数吗？显然不是。因为函数不仅有代码复用的功能，还具有一定的描述性质以及代码封闭性。...例如登录和注册是两个不同的功能，但是你从更高层级的抽象来看，它们都属于用户模块的一部分。 所以是否要拆分组件，最关键还是得看复杂度。...而通过封装成一个个hooks，相关联的代码就很容易被聚合到了一起，且和其他功能区分开了。

    1.4K10

    美丽的公主和它的27个React 自定义 Hook

    但是它有一些让人诟病的问题，首先，有些功能其实我们在开发中不经常使用，并且引入了第三方库，反而使我们项目变得「臃肿」;其次，在开发中，我有一个比较执拗的做法，也就是别人的永远都是别人的。...但是，有了React Hooks，开发人员现在可以在函数组件中直接利用状态和其他React功能。 Hooks提供了一种轻松地在多个组件之间重复使用有状态逻辑的方式，提高了代码的可重用性并减少了复杂性。...自定义Hooks遵循使用use前缀的命名约定，这允许它们利用React的Hooks规则的优势。 通过创建自定义Hooks，开发人员可以模块化和组织他们的代码，使其更易读、易维护和易测试。...该钩子还利用useRef钩子来「维护对回调函数的稳定引用」。这确保了在组件的生命周期中即使回调函数发生变化，也「使用最新版本的回调」。这种动态行为使我们能够精确处理事件并响应应用程序状态的变化。...无论我们正在构建多语言网站、国际化应用程序，还是仅需要支持 UI 组件的翻译，该钩子都将简化流程并使我们的代码更易维护。

    3.4K20

    前端项目为什么越做越慢？聊聊代码「可持续发展」的那些事

    陷阱一：组件化的谎言 —— 你以为的复用，其实是灾难 常见的错误认知 很多人以为"组件化 = 可复用"，于是疯狂拆组件： // 看起来很"工程化"，实则埋下隐患 function UserProfile...我："emmm，你先去 components 文件夹找 OrderList.tsx……" 他找了半天："找到了，但是这里面没有筛选逻辑啊？"...现在公司想： 接入微前端（qiankun），把部分模块拆出来 部分页面用Vue重写（因为团队新来的人都是Vue技术栈） 移动端要做小程序，想复用业务逻辑 结果呢？一行代码都复用不了。 为什么？...不要直接用 fetch 或 axios ## 组件编写 ✅ 优先使用函数组件 + Hooks ❌ 不要新写 Class 组件 ## 状态管理 - 本地状态：useState - 跨组件状态：Zustand...不是因为技术过时，而是因为： 业务变了，要重新做 维护成本太高，不如重写 技术栈换了，得迁移 但是！ 那些做得好的项目，可以用5年、10年，甚至更久。

    22110

    React 的未来，与 Suspense 同行

    它添加了一些非常酷的东西：Hooks、惰性加载、Suspense 和缓存 API。 这不是又一篇关于如何编写 Hook 的文章，而是对 React 未来的期待！...它在高层次上解决了一些问题： 由于有了用函数编写所有内容的概念，使得编写的代码更加模块化，更易于维护 不鼓励使用 HOCs 和其他使代码难以理解的复杂功能 放弃使用复杂的生命周期，如 componentDidMount...那么如果我告诉你 Suspense 在调用 API 时也可以处理我们的加载状态呢？不过在此之前我们需要深入研究并更好地理解它。 经过一番挖掘和研究，我终于找到了 Shawn Swyx Wang?...但是，这是实验性的。我相信你会遇到错误，所以不要担心，很明显 react-cache 仍处于开发阶段。 一点要小心，确保在组件内部使用 read 方法，否则，它会抛出一个错误。...现在我们抓住了 React 的不久的将来，有一件事是显而易见的：React 团队希望尽可能的简化 API。 我也对越来越多的库正朝着函数式编程的方向发展而感到兴奋。

    1.2K51

    使用 Vue3.0+Typescript+Vant 搭建基础H5模板

    VUE-H5-TEMPLATE Vue-H5-Template 项目以小商城作为基本的内容演示，使用 Vue3.0+Typescript+Vant 搭建 移动端h5页面 开发所需的基础模板，并提供一些通用型的解决方案及扩展功能...基本说明 文档说明 电脑预览 后端服务 更新日志 部分页面预览： 首页 商详 购物车 我的 首页 商详 购物车 我的 安装使用 # 项目下载 # 克隆项目很慢？...git clone git@github.com:Ewall1106/vue-h5-template.git # 安装运行 $ yarn & yarn dev 功能特性 开发规范 Eslint 校检及错误提示...处理 基础功能 vuex4.0 封装及使用 vue-router4.x 路由配置及权限控制 axios+typescript 封装及请求 composition-api 及自定义 hooks...| | | |-- hooks // 局部hooks | | | |-- index.vue // 页面 | | |-- user

    1.7K20

    2020 年你应该知道的 React 库

    当我从 Angular 切换到 React，我绝对经历了它作为 React 的优势。 只有通过 React，您才能使用函数组件和 props 构建组件驱动的用户界面。...Next.js 用于服务器端渲染(如动态 web 应用程序) ，Gatsby.js 用于静态站点生成(如博客、登陆页面)。...但是，有时候不仅需要提供复杂的异步请求，还需要它们具有更强大的功能，而且只是一个轻量级的库。我推荐的这些库之一称为 axios。当您的应用程序增大时，可以使用它来代替本地获取 API。...就我个人而言，我不使用它，但是任何时候有人问到 JS 中的不变性(immutability)，大家都会指出 Immer，并且这可以加上 redux 或 React hooks。...我以前用过 Sketch，但最近转到了 Figma。尽管我两者都喜欢，但我现在并不后悔使用 Figma。另一个流行的工具是 Framer。

    18.6K40

    我为什么不再用 Vue，而改用 React？

    当时正逢 jQuery 被淘汰，前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。前端正在走向一个时髦的，流行的，模块化的 JavaScript 框架的新时代。...你也可以在 Vue 中使用 ES6 语法，但是 React 比 Vue 设计得更好。...： Vue.component({ template: `` }) 也就是说，现代 React（2020 年）不再用到 class，而是使用函数式组件（和 hooks）。...省事的 Hooks 我开始学习使用 React 组件做开发。问题在于，要创建单个组件作为一个 React 组件类是很费事的。...四月份，尤雨溪曾在直播中表示，目前的 Vue 3.0 已经可以投入使用，但是要求开发者自己对稳定性负责。他建议生产项目暂时不要上，新的、小的项目可以试水。 那么，我喜欢 VueJS 吗？是的。

    4.3K20

    使用ESLint + Prettier简化代码 Review 过程

    Prettier 扫描文件中的样式问题，并自动重新格式化代码，以确保缩进、间距、分号、单引号和双引号等遵循一致的规则。 我们的团队正在使用它们，因为： 他们按照相同的规则使每个人都保持一致。...他们能够发现错误。尽管并不是很多，但实际上 ESLint 还是检查出了很多语法错误和简单的类型错误，例如未定义的变量。 设置它们是一次性的，但节省的时间积累起来非常可观。...hooks API 问题。...总结 即使我正在进行原型设计，也会使用TDD。当你第一次使用TDD时，开始可能需要花费 15％ - 30％的时间。...自动化 lint 和代码格式化可以提高开发人员的工作效率，通过捕获错误和使开发人员保持一致，使你的团队在进行代码 review 时把精力集中在更有意义和更高效的事情上。 尝试使用 Zeit Now。

    1.8K40

    Hooks中的useState

    我觉得这个解释非常到位了，拿useState来说，在写函数组件的时候是将这个函数勾过来使用，而在这个函数内部是保存着一些内部的作用域变量的，也就是常说的闭包，所以Hooks也可以理解为将另一个作用域变量以及函数逻辑勾过来在当前作用域使用...比起上面提到的其它方案，Hooks让组件内逻辑复用不再与组件复用捆绑在一起，是真正在从下层去尝试解决(组件间)细粒度逻辑的复用问题此外，这种声明式逻辑复用方案将组件间的显式数据流与组合思想进一步延伸到了组件内...React一段时间，您可能熟悉通过render props和higher-order高阶组件等模式，来试图解决这些问题，但是这些模式要求您在使用它们时重构组件，这可能很麻烦并且使代码难以为继，使用Hooks...，但是这通常会引入太多的抽象，要求您在不同的文件之间跳转，并使得重用组件变得更加困难，为此，Hooks允许您根据相关的部分(例如设置订阅或获取数据)将一个组件拆分为更小的函数，而不是基于生命周期方法强制拆分...，例如，class不能很好的压缩，并且会使热重载出现不稳定的情况，因此，我们想提供一个使代码更易于优化的API，为了解决这些问题，Hook使你在非class的情况下可以使用更多的React特性，从概念上讲

    1.4K30

    前端高频react面试题

    如何解决 props 层级过深的问题使用Context API：提供一种组件之间的状态共享，而不必通过显式组件树逐层传递props；使用Redux等状态库。React Hook 的使用限制有哪些？...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。...这个问题就设计到了数据持久化， 主要的实现方式有以下几种：Redux： 将页面的数据存储在redux中，在重新加载页面时，获取Redux中的数据；data.js： 使用webpack构建的项目，可以建一个文件...返回或进入除了选择地址以外的页面，清掉存储的sessionStorage，保证下次进入是初始化的数据history API： History API 的 pushState 函数可以给历史记录关联一个任意的可序列化...这有助于维护单向数据流，通常用于呈现动态生成的数据。在使用 React Router时，如何获取当前页面的路由或浏览器中地址栏中的地址？

    4.6K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券