首页 > 其他分享 >vue之computed

vue之computed

时间:2023-06-16 09:45:22浏览次数:37  
标签:依赖 computed Vue 缓存 vue 计算 属性

对Vue computed的理解

一、什么是computed

Vue的computed属性是一种计算属性,它的值是根据其他属性计算而来的。Vue会自动追踪computed属性所依赖的属性,并在这些属性发生变化时重新计算computed属性的值。

computed属性的实现原理是使用了Vue的响应式系统。当一个computed属性被访问时,Vue会检查它所依赖的属性是否发生了变化,如果发生了变化,就会重新计算computed属性的值。这个过程是通过一个依赖收集器来实现的,每个computed属性都有一个对应的Watcher对象,它会在computed属性被访问时收集所有依赖于它的属性,并在这些属性发生变化时触发更新。

computed属性的优点是可以将复杂的计算逻辑封装起来,使得代码更加简洁和易于维护。同时,由于computed属性是基于依赖的,所以它的计算结果会被缓存起来,只有在依赖的属性发生变化时才会重新计算,从而提高了性能。

二、computed使用场景

  1. 对数据进行格式化或处理,例如将日期格式化为特定的字符串格式。

  2. 对数据进行过滤或排序,例如根据某个条件对列表进行排序或过滤。

  3. 对数据进行聚合或计算,例如计算列表中所有元素的总和或平均值。

  4. 对数据进行联动或关联,例如根据某个属性的值来动态计算另一个属性的值。

  5. 对数据进行缓存或优化,例如将一些计算结果缓存起来,避免重复计算。

  6. 对数据进行动态响应,例如根据用户的输入动态计算某个属性的值。

以上是一些常见的使用场景,使用computed属性可以使代码更加简洁和易于维护。同时,由于computed属性是基于依赖的,所以它的计算结果会被缓存起来,只有在依赖的属性发生变化时才会重新计算,从而提高了性能

标签:依赖,computed,Vue,缓存,vue,计算,属性
From: https://www.cnblogs.com/DTCLOUD/p/17484797.html

相关文章

  • vue的自定义指令
    自定义指令 含义vue官方提供了v-text,v-bind,v-for,v-model,v-if等常用指令,除此之外vue还允许开发者自定义指令。自定义指令分为两类:私有自定义指令全局自定义指令注意事项自定义指令使用时需要添加v-前缀指令名如果是多个单词,要使用kebab-case短横线命......
  • Vue项目入门实战(07)-想让你的Vue页面更炫酷?来学习样式绑定吧
    1class的对象绑定1.1需求现在要实现点击div区域里的helloworld文本时,文本变成红色。1.2实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Vue中的样式绑定</title><scriptsrc="../vue.js&q......
  • Vue3 —— 商城项目
    create-vuecreate-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代前端工具链),为开发提供极速响应。执行如下命令,这一指令将会安装并执行create-vuenpminitvue@latest无论您之前是否安装过create-vue,执行npminitvue@latest命令都会创建一个新的Vue项目。这个命令会......
  • vue时间处理
    vue时间处理https://blog.csdn.net/xc9711/article/details/123347629前言记录vue对时间的处理String与时间戳、时间互转计算时间差设置时间格式:YYYY-MM-DDHH:mm:ss年月日时分秒形式以及HH:mm:ss时分秒形式时间说明在此申明以下使用的时间相关的属性startTime:......
  • Vue项目打包部署上线时devServer.proxy代理失效如何解决?使用nginx的proxy_pass 代理跨
    Vue项目打包部署上线时devServer.proxy代理失效如何解决?使用proxy_pass代理跨域转发前言本篇文章用于记录项目前端部署上线遇到的问题,包含对问题的思考、解决思路,以及从中获得的收获。正确的部署流程我也写了一篇文章,供大家参考使用宝塔将Vue2+Nodejs全栈项目打包部署到腾讯云服......
  • vue学习记录 4
    本地服务器配置apache安装学习参考网址:(官网下载apache包的时候可能会疯狂断开链接)教程里没说,但是要管理员身份操作cmd。https://blog.csdn.net/qqhruchen/article/details/127457889?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefaul......
  • vue封装公共组件库并发布到npm库
    利用的原理:vue框架提供的api:Vue.use(plugin),我们把封装好组件的项目打包成vue库,并提供install方法,然后发布到npm中。Vue.use(plugin)的时候会自动执行插件中的install方法。 一、组件库代码目录调整1.根目录创建packages文件夹2.在packages文件夹中新增components文......
  • 关于vue 使用setInterval定时器关闭失效的问题 原因为事件传播
    /****data.isPlay为显示那个按钮**startHandle开始定时器setInterval**pauseHandle,stopHandle理解为关闭定时器就好了clearInterval**/<viewclass="btn"@click.stop="startHandle"><viewclass="btn-statusbtn-play"><view......
  • Vue 中 组件通信 - 子传父(自定义事件)
    Vue中组件通信-子传父(自定义事件)Vue中组件通信-子传父(自定义事件)子传父步骤:在子组件的data里面定义好要传递的数据在子组件的模版里面正常使用该数据(一般是通过一定的动作,如点击,滑动等,来自定义事件向父组件传递,这里以click为例)在子组件的methods里面定义this.$......
  • Vue简单的分页功能实现一
    Vue简单的分页功能实现一前端的分页功能其实是对数据的分页处理,主要是在js中实现对数据的分页处理,这里分享两种简单的写法,以供参考。两种方法都是用vue来实现的。首先,相关的参数都一样,在vue里的data中定义好,如下所示:varvm=newVue({el:'#app',data:{list......