首页 > 其他分享 >使用computed需要遵循和避免的几点原则

使用computed需要遵循和避免的几点原则

时间:2023-03-27 13:34:57浏览次数:28  
标签:几点 computed 代码 watch 避免 遵循 应该 methods

遵循的原则

  1. 简单明了
    computed不应该过于复杂或过长,而应该是简单清晰的。它应该只负责对单个变量或getter进行处理,并且最终返回一个通常与vue模板直接关联的值。

  2. 可重复利用
    由于computed的特殊设计方式,它们可以被许多其他computed、watch甚至方法调用,因此在设计时要尽可能保证其可重复利用性,使其更方便地在各种情况下使用,而不会产生重复代码。

  3. 对响应式数据进行计算
    computed属性与Vue的响应式变量(data、props等)紧密相关,所以它应该是计算基于响应式数据的并及时更新的结果。这也是computed相比methods的一大优势。

应该避免的原则

  1. 进行异步操作
    computed不适用于异步操作。如果计算代码需要通过网络请求获取远程数据,那么应该采用watch、promise等其他选项。

  2. 使用副作用
    在computed方法中应该避免对外部数据进行更改,使得方法可以更安全、稳定的运行和其他组件和函数协同工作。

  3. 处理重逻辑
    大量处理复杂计算逻辑的代码不应该放在computed中。这些代码可能存在性能问题,并且会影响到组件的渲染表现,因此应该把这些逻辑移到methods中。

标签:几点,computed,代码,watch,避免,遵循,应该,methods
From: https://www.cnblogs.com/ychizzz/p/17261236.html

相关文章

  • Vue进阶(二十八):浅析 Vue 中 computed 与 method 区别
    一、前言computed区别于method的两个点:computed是属性调用,而methods是函数调用;computed带有缓存功能,而methods不是;下面看一个具体例子:<!--HTML部分--><divid="ap......
  • SaaS 营销怎么做?几点思考
    按大部分SaaS公司组织架构,梳理了这4大业务部门(产品、市场、销售、服务-客户成功)的职责和客户价值链条。如图:根据客户价值体验地图,分为两块过程:客户营销过程客户成......
  • BGP服务器的优势有哪几点
    bgp是什么意思?bgp服务器有什么优势?我们在租用或者购买服务器时,服务商会提供单线、双线、bgp线路等多种线路。但是一些朋友对于bgp并不了解,也不清楚为何要选bgp服务器?下面小......
  • provide和使用computed跨组件传值
    provide和injectprovide用于跨组件的传值。在祖先组件的data中提供一个对象,该对象可被注入到子孙组件中,不论组件的层级有多深。但是必须要是嵌套关系,才能实现注入provide......
  • vue computed正确使用方式
    最近面试中,遇到一个小伙子,谈到了vue中的​​computed​​​和​​watch​​区别,最后得到了一个让我瞠目结舌的答案,只用​​watch​​,从不用​​computed​​模板内的......
  • vue 中 computed属性中的get与set;
    1.computed是对⾃⼰定义的变量进⾏监控,这⾥的变量不是在data中定义,直接在computed中定义,然后变量放到展⽰页⾯后就实现了数据的双向绑定,当变量发⽣改变是就会触发计算,说到......
  • 11_08_第六阶段:大前端进阶||07-Vue详解||P10:计算属性(computed)【观看狂神随笔】
    Vue:计算属性,内容分发,自定义事件1.什么是计算属性计算属性:计算出来的结果,保存到属性中~,内存中运行:虚拟Dom计算属性(computed)VS方法(methods)代码:<!DOCTYPEhtml><htmllang="en......
  • 直播系统搭建,vue之computed带参数如何接收
    直播系统搭建,vue之computed带参数如何接收<template>  <div>{{count(1)}}</div></template> <script>  exportdefault{      computed:{   ......
  • uniapp nvue和vue 全局变量 国际化多语言开发 computed data globalData i18n undefin
    uni-app全局变量的几种实现方式1.公共模块定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。注意:这种方式只支持多个vue页面或多个nvue页面之间公用,vue......
  • 在使用Gitlab API获取仓库中的项目的几点说明
    1、不能获取仓库中的全部项目出于性能考虑Gitlab不能一次性获得仓库中的全部项目,GitlabAPI默认做了分页处理,如果未提交分页参数,会默认只显示20条。2、用于分页显示的两......