vue初学(学习笔记)-------》计算属性computed

已于 2022-05-06 08:13:17 修改
阅读量103 收藏
点赞数
分类专栏： vue 文章标签： vue.js 学习 javascript
于 2022-05-06 08:03:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53052066/article/details/124601660
版权
本文介绍了Vue中的计算属性computed，用于处理包含响应式数据的复杂逻辑。计算属性提供了一种组织和维护代码的方式，避免在模板中编写复杂的逻辑。文中详细讲解了计算属性的三种实现方法，包括通过插值语法、methods和直接使用computed。重点讨论了computed的get和set方法，强调了其缓存特性与methods的区别，提倡在适合的情况下优先使用computed。
摘要由CSDN通过智能技术生成

1.对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性computed===》vue计算属性的介绍
2.为什么要有一个计算属性呢？其实说白了就是{{}}插值语法中vue建议只写一些小的逻辑代码或者是一个属性名称，虽然也可以写复杂逻辑，但是不容易被维护，所以vue中使用一个计算属性来将复杂的逻辑代码接管，接管之后在以属性的方法写到{{}}插值语法中
3.实现计算属性的几种方法

  1. 通过插值语法来实现计算属性(代码少且逻辑简单时推荐)
    在这里插入图片描述在这里插入图片描述
  2. 计算属性的第二种实现方式----》通过methods实现
    在这里插入图片描述在这里插入图片描述
  3. 实现计算属性的第三种方法----》computed
    在这里插入图片描述在这里插入图片描述
  4. 对于computed的细节理解：
    1. computed中有get方法和set方法，但是我们一般只用的到get方法，但是如果需求里面有计算属性计算出来之后可能要被改变值的时候就要使用set方法了
    2. 对于methods和computed的区别
      1. methods中没有缓存，而computed中有缓存
        在这里插入图片描述在这里插入图片描述结果如上：很明显的看到打印了三次console.log,说明methods中走了三次fullName方法，接着是computed中实现如下：
        在这里插入图片描述在这里插入图片描述
        结果如上：可以明显看到computed只调用了一次console.log，说明其他二次都是走的缓存，所以说以后能写computed，就写computed

到此computed学习记录完成！！！！

枫吹叶落
关注
专栏目录
vuememo基于vue10的笔记本应用
08-12
4. **计算属性与侦听器**：计算属性 (`computed`) 用于根据其他数据计算出新的值，而侦听器 (`watch`) 可以监听数据变化并执行相应逻辑。在笔记本应用中，可能需要根据笔记列表的长度计算总页数，这时可以利用计算...
Vue2 解决computed返回值未能渲染到DOM的问题
白瑕 的博客
09-13 2461
Vue2 computed返回值未能成功渲染到DOM的解决方案.Vue2 解决computed函数返回值未渲染到DOM, DOM不渲染computed返回值, 渲染完成后拿到computed导致未能渲染, `computed`返回值之前DOM已渲染完成导致的`computed`值未能成功渲染.
Vue复习8：计算属性 computed
tinglis的博客
03-01 551
Vue复习8：计算属性 computed 计算属性出现的目的是解决模板中放入过多的逻辑会让模板过重且难以维护的问题。 计算属性是根据data中已有的属性，计算得到一个新的属性。 下面，我们通过一个案例来学一下计算属性 在文本框中输入第一个名字，第二个文本框中输入第二个名字，然后展示全部名称。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta n
Vue中的计算属性computed
m0_59345890的博客
09-01 1247
这也是computed与methods、filters的区别，当数据源中的数据发生改变时会重新渲染页面并且会再次调用在methods和filters中用到的方法，但是修改的数据源的数据如果computed中的方法没有用到，则不会调用computed的方法，computed内的方法只有当监听的数据源发生变化时才会从新调用。，计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算， 提升js 运行效率，但是这也是其的缺点，为什么这么说呢？而且会监听计算属性中使用到的数据源，然后把计算的结果。
Vue computed计算属性详解（入门）
modao的博客
07-11 1436
computed是一个计算属性，该属性的方法名相当于date属性里面的key，他可以作为key值使用，该属性里面的方法必须要有return返回值，这个返回值就是(value)值 。
vue在computed中打印this.$refs为undefined
cherrylindan的博客
12-09 4857
情景：在父组件的computed中打印this.$refs.content为undefined 解决办法： 首先绑定ref组件中必须是v-show， 因为this.$refs建立在dom渲染完毕的基础上。 必须保证dom渲染完成。 方法一 data: { isMounted: false, }, mounted() { this.isMounted = true }, computed: ...
vue-learning:前端菜鸟，学习vue 笔记
05-04
1. 计算属性：在Vue中，可以使用`computed`对象定义计算属性，自动响应依赖变化并缓存结果，如计算总和、过滤列表等。 2. 侦听器：通过`watch`对象可以监听数据变化，执行相应的回调函数，用于复杂逻辑处理。 四、...
【Vue基础知识点速查手册 - 面试指南】从指令到计算属性,让Vue不再难懂
最新发布
08-22
- 涵盖了Vue的基础知识点,如指令、方法、计算属性等 - 列出了常用的指令语法,如v-bind、v-on、v-model等 - 总结了methods、computed、watch的区别和使用场景 - 介绍了过滤器、自定义指令的定义方式 - 提到了Vue数组...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
VUE入门学习项目资料与学习笔记.zip
02-12
这个名为“VUE入门学习项目资料与学习笔记.zip”的压缩包包含了一份详细的学习资源，帮助初学者深入理解Vue.js的核心概念和技术。以下是对这些资源的详细解读： 1. **Vue环境搭建**：Vue的安装通常有两种方式，一种...
Vue初学-计算属性computed
qq_41809137的博客
05-01 197
计算属性的基本用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D...
vue-computed之计算属性
jh1906338271的博客
03-20 443
1.计算属性的基本使用 计算出来的结果就是 ”Lebron James“，其实计算属性计算出来的结果和methods没有多大区别。 2.计算属性的复杂操作 其实就是在计算属性里面进行循环将结果都算出来，然后再将结果返回就可以了。是比较方便的。 3.computed的区别 从结果中我们可以看到，虽然都输出了，但是在进行重复打印时，methods会输出多次，而computed属性只会输出一次，...
vue computed属性初学
qq_41073745的博客
11-09 140
computed介绍 computed叫做计算属性，实际上是以方法的形式返回属性，而这个属性基本上是需要经过计算的属性，比如某几本书的价格或者某几样东西的数目，可以在datas中设置数组然后通过computed属性计算出想要得到的值来进行操作，理论上来讲这也可以用methods来进行实现，但是computed可以写起来更简单而且是作为一种属性进行传参，可以更好的和方法进行区分（个人理解） computed的使用 几天没有看vue了，基础东西又忘得差不多了，所以就简单写了一下，顺便学习一下computed属性
3.vue入门基础学习笔记-计算属性computed
苏曼的博客
07-14 252
计算属性介绍表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理，同时computed有缓存功能，防止复杂计算逻辑多次调用引起的性能问题。computed原理介绍 computed的属性reversedMessage在data中会有一个对我们不可见的cacheReversedMessage
在vue中，methods和computed这两个方法的区别。
_QIuXiaoYi的博客
06-04 5333
        我们可以使用methods来代替computed，实际上效果是一样。        computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。        methods在重新渲染的时候，函数总会重新调用执行。        所以谁用computed会比methods方法性能更好。...
Vue的计算属性computed
chihcixxxx的博客
05-28 161
computed的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Vue3里computed与watch使用
qq_37635012的博客
10-11 1523
Vue3里computed使用，Vue3里watch使用
Vue入门之计算属性Computed
cgl_dong的博客
07-29 126
Vue中提供了计算属性，计算属性似乎与methods非常相似，如下 <body> <div id="ct"> <h1>{{firstname}} {{lastname}}</h1> <h1>{{getFullname()}}</h1> <h1>{{Fullname}}</h1&gt...
Vue中的computed计算属性
热门推荐
ZZY1078689276的专栏
11-08 1万+
文章目录computed与watch的异同不同点相同点示例源码结果分析 computed与watch的异同 不同点 触发条件不同   computed计算属性会依赖于使用它的data属性，只要是依赖的data属性值有变动，则自定义重新调用计算属性执行一次。   watch则是在监控的data属性值发生变动时，其会自动调用watch回调函数。 执行速度不同   computed计算属性的值是...
Vue 3与vue-router 4.0：hooks用法探索
Vue 3和vue-router 4.0的结合带来了新的挑战和机遇，开发者需要学习新的API和用法，以充分利用Vue 3的性能提升和灵活性。在升级或迁移项目时，对这些变化有深入的理解将有助于避免不必要的困扰和错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值