Vue computed 计算属性

已于 2023-04-06 11:06:35 修改
阅读量61 收藏
点赞数
文章标签： vue.js 缓存 javascript
于 2023-04-06 11:06:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_55808933/article/details/129984685
版权

 当我们更改name的值时,  outputFullname()执行

 但是当点击 "Add" 和 "Substract" 两个按钮时 ,  outputFullname()依旧会执行 , 因为vue要监听模板中每一处count的更改 , vue执行到outputFullname() , 这是个方法 , 它不确定这个方法里面是否在计算count , 所以会执行这个方法 , 以至于当我们点击 "Add" 和 "Substract" 两个按钮 , 也会执行此方法 , 这对于性能有影响.

所以我们使用computed这个计算属性:

 为什么呢?参考vuejs官方文档(下图是vue3的文档)

一只程序圆圆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue.js- computed计算属性
hxy1625309592的博客
04-23 627
1.1 computed作用 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。 减少运算次数, 缓存运算结果. 运用于重复相同的计算。 1.2 计算属性基本使用 计算属性是写在实例的computed选项中的。 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性的基本使用</title&
Vue 的计算属性(computed)
weixin_52915467的博客
12-06 251
今天有事努力的一天！！！ 如果事与愿违，那一定另有安排。积极生活，让我们的每一天都充满热情。 上知识！ 在Vue中我们可以通过计算将已知的属性通过computed计算得到不存在是属性 比如说我们在下面举一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
浅谈Vue中计算属性（computed）
He_9a9的博客
09-06 1064
浅谈vue中的computed的属性概念，使用场景，优缺点以及实现缓存的过程
Vue3进阶：计算属性（computed）的介绍、使用详解和代码实战案例
SteveRocket's-Blog
12-17 6157
Vue 3中的计算属性是Vue中的一种特殊属性，它基于现有数据进行计算（根据其他属性的值进行动态计算），并返回一个新的值。与方法（methods）相比，计算属性的特点是具有缓存机制，只有依赖的数据发生改变时才会重新计算。关于methods的使用可以参考公众号CTO Plus前面的文章，当然后面的文章也会专门做介绍。计算属性在Vue开发中非常常用，它既能提升开发效率，又能使代码更加简洁和可读性更高。在本文中，我将为大家详细介绍Vue 3中的计算属性的概念、用法和优势。
vue计算属性的使用
m0_50884068的博客
07-23 105
vue项目中会常用到计算属性,简单演示计算属性 <button @click="btn">点击</button> <div>{{ num2 }}</div> return { num1: 8, } computed: { num2: { // 默认就会执行 get: function () { return this.num1 + 1; }, // 默认不会执行,get发生改变后set
VUE通过配置显示不同按钮属性（简单事例）
m0_37835663的博客
01-25 405
通过配置显示不同按钮对应的属性 所有示例代码 <template> <div style="width: 375px;"> <div> <ul style="list-style: none"> <li v-for="(i, index) in config" :key="index" style="float:left;"> &
Vue 计算属性 computed
paidaboluo的博客
07-23 354
Vue 计算属性 computed
Vue computed计算属性的使用方法
08-29
Vue computed计算属性的使用方法 computed计算属性是Vue框架中的一种强大特性，它可以根据依赖关系自动计算并缓存结果，从而提高应用程序的性能。在本文中，我们将详细介绍Vue computed计算属性的使用方法，并与...
Vue computed 计算属性代码实例
10-15
计算属性是在 Vue 实例的 `computed` 对象中定义的属性。它们本质上是返回值的方法，但通常我们像访问普通属性一样去引用它们，而不是通过调用函数的方式。例如，在给定的代码示例中，`fullname` 就是一个计算属性...
深入理解Vue Computed计算属性原理
08-27
深入理解Vue Computed计算属性原理 Computed 计算属性是 Vue 中常用的一个功能，它可以自动地计算并缓存依赖项的值，以便提高应用程序的性能。下面将深入探讨 Vue Computed 计算属性的原理，了解它是如何工作的。 ...
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
最新发布
qq_37752382的博客
07-15 432
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
【Vue】 style中的scoped
DX390609的博客
07-15 128
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 291
解决页面放大，图片模糊的问题
vue+vite项目中跨域问题解决与跨域代理的两种方式原理详解
whs15193553607的博客
07-12 1274
（1） target参数：相当于是在代理地址（geoserver或者geoserverApi）前面拼接target代理后地址就是http://localhost:8080/geoserver或（2）changeOrigin参数：开启代理在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题；（3）rewrite参数：路径改写。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1502
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 198
vue 自定义滚动条同步拖动（移动端）
Vue和Element UI 路由跳转，侧边导航的路由跳转，侧边栏拖拽
爱敲代码的卡拉米的博客
07-12 344
项目中用到了点击侧边栏的跳转，所以记录下来，方便有需要的人用到~是通过重定向定位到登陆页的，然后通过登陆页跳转到主页。首先看布局，因为我的用于页面显示的。
vue+lodop实现web端打印功能
chensi_07的博客
07-11 328
安装包中的html文件为打印实例，点击其中一个用浏览器打开，点击红框如果出现下图弹窗，说明插件安装成功了。然后安装云打印插件：CLodop_Setup_for_Win32NT.exe；32位系统安装：install_lodop32.exe；64位系统安装：install_lodop64.exe；
CSS特效：pointer-events: none；的一种特殊应用
q1003675852的博客
07-11 521
本文记录了pointer-events: none;的一种特殊应用，既能显示模糊渐变的同时还能保持元素可点击的效果。
vue computed计算属性
08-16
Vue的computed计算属性是一种方便的方式来处理数据的依赖关系。它可以根据其他属性的值来动态计算出一个新的值，并且会自动缓存计算结果，只有当相关属性发生变化时才会重新计算。 在Vue组件中，你可以通过在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值