computed属性中的函数如何做到按需调用？

最新推荐文章于 2024-05-22 09:43:32 发布
最新推荐文章于 2024-05-22 09:43:32 发布
阅读量9.7k 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37746973/article/details/80987912
版权

先上源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="example">
        <input type="text" v-model="msg1">
        <input type="text" v-model="msg2">
        <p>Computed reversed msg1: "{{ reverseMsg1 }}"</p>

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#example',
            data: {
                msg1: '我是绑定了msg1',
                msg2: '我是绑定了msg2'
            },
            computed: {
                // 计算属性的 getter
                reverseMsg1: function () {
                    // `this` 指向 vm 实例
                    console.log("compute")
                    return this.msg1.split('').reverse().join('')
                }
            }
        })

    </script>
</body>

</html>

效果图：


修改第一个文本框


computed中的reverseMsg1函数被调用


现在修改msg2


修改msg2就不会触发reverseMsg1函数


震惊！！！

为什么？

reverseMsg1又没有显式地取监听msg1, 只是reverseMsg1函数中有这个的引用而已。这个是如何做到的？

huyao_road
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue中计算属性（computed）、methods和watched之间的区别
08-29
它们与`computed`的主要区别在于，`methods`中的函数每次调用都会执行，而`computed`只在依赖改变时执行。这意味着如果你在模板中多次使用一个`computed`属性，它不会每次都重新计算，而是返回缓存的结果，从而提高...
微信小程序使用计算属性computed封装购物车组件
01-02
在微信小程序中，`computed`属性是一个对象，它的每个属性都是一个函数，用于计算某些依赖数据，并返回结果。这些计算结果会被缓存，只有当依赖的数据发生变化时，计算属性才会重新计算。这在处理动态计算和避免不必...
filters中的this问题，及在computed中调用函数
莫不静好
09-24 742
背景 过滤器内this的指向是undefined，因而不能在过滤器内使用this引用组件实例的变量或者方法 vue中过滤器更偏向雨文本数据的转化 我们可以使用computed作为替代方案
vue计算属性——computed的使用与详解
weixin_64609738的博客
10-21 2221
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。就是说只有相关响应式依赖发生变化才会重新求值 第一次调用计算属性才会执行函数 以后多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。我们可以通过在表达式中调用方法来达到同样的效果。给计算属性赋值 就需用到setter。这两种方式的结果是一致的 不同的是。：求两个数的和显示在页面上。
利用Node.js打造分布式计算集群：Node-Compute-Cluster
最新发布
gitblog_00062的博客
05-22 385
利用Node.js打造分布式计算集群：Node-Compute-Cluster 项目地址:https://gitcode.com/lloyd/node-compute-cluster 在高负载的计算任务中，如何保证Node.js服务器的响应速度和稳定性？node-compute-cluster提供了一个出色的解决方案。这个小巧而强大的库利用Node.js内置的进程间通信（IPC），帮助你在多核系统...
vue在computed中调用函数
热门推荐
lyww1992的博客
04-25 1万+
废话不多说了，上代码 <template> <ul> <li v-for = "(item, index) in arrs" v-bind:key = 'index'> <span>{{dataAmand(item.title)}}</span> </li> </ul> &l...
Vue项目中如何使用computed计算属性
m0_49515138的博客
02-22 4315
当计算属性b依赖了data中的数据a时，当a变化时，b会自动变化。比如在购物的时候，下某一订单时，每选择一件商品（对应data中的数据a），合计费用（对应计算属性b）就会跟着变化。计算属性在computed中进行定义，无需再在data中定义，在template中直接可进行使用，使用方式与data中定义的数据一样。在computed中定义一个函数（看起来是一个函数，其实是一个属性），命名按照属性规范命名(一般为名词)。当数据A的逻辑很复杂时，把A这个数据写在计算属性里面。① 完整的计算属性写法：属性+方法。
Vue中计算属性computed的示例解读
08-29
值得注意的是，计算属性与`data`中的同名属性不能共存，这意味着你不能同时在`data`和`computed`中声明同一个属性。 计算属性不仅适用于简单操作，还能处理更复杂的逻辑。例如，你可以将多个数据源组合起来，或者...
Vue computed 计算属性代码实例
10-15
当在模板中使用计算属性时，我们直接以其名称作为属性引用，不需要加上括号调用函数。例如，在模板中这样使用 `fullname`： ```html ``` 5. **计算属性与方法的区别** 虽然计算属性和方法都可以用来处理数据，...
vue计算属性computed的使用方法示例
10-17
在Vue中，`computed`属性是一种特殊的数据属性，用于定义基于其他数据属性动态计算的值。这种特性允许开发者将复杂的逻辑从模板中移出，使得模板更加简洁，同时也优化了性能，因为Vue会自动缓存`computed`属性的结果...
对vue里函数的调用顺序介绍
11-28
以下是对Vue中函数调用顺序的详细介绍： 1. `created` 钩子： `created` 是Vue组件的第一个生命周期钩子，它在实例创建后同步调用。在这个阶段，所有的选项已经被解析，包括数据绑定、计算属性、方法、监听器和...
Vue.js计算机属性computed和methods方法详解
10-16
在例子中，`reversedTextM` 是一个在 `methods` 对象中定义的方法，它同样实现了文本翻转的功能，但每次调用都需要执行整个函数，即便 `text` 没有变化。 ```javascript methods: { reversedTextM: function () { ...
简单了解Vue computed属性及watch区别
11-19
在Vue中，`computed`属性和`watch`都是用来响应数据变化的机制，但它们之间存在显著的区别。以下是对这两个概念的详细解释： 1. **Computed属性**： - `computed`属性用于创建基于其他数据属性的计算属性。这些...
vue中watch和computed的区别与使用方法
10-14
1. 只读属性：仅定义一个函数作为计算属性，例如 `computed: { aDouble: function () { return this.a * 2 } }` 2. 可读写属性：使用 `get` 和 `set` 定义，如 `computed: { aPlus: { get: function () { return ...
详解vue中的computed的this指向问题
10-17
`this`在JavaScript中是一个动态绑定的引用，它的值取决于函数调用的方式。在常规函数中，`this`通常会指向调用该函数的对象。但在箭头函数中，`this`的值是词法作用域，即它会继承自其所在封闭作用域的`this`，而...
浅谈Vue的computed计算属性
qq_25015861的博客
03-20 4033
文章目录computed计算属性1、什么是计算属性2、为什么要用计算属性3、compute、methods和watch三者的区别4、案例：遍历数组对象的时候进行监视 computed计算属性 1、什么是计算属性 计算属性 本质是方法，只是在使用这些 计算属性 的时候，把他们的名称直接当作 属性 来使用，并不会把 计算属性 当作方法去调用，不需要加小括号 ()调用。 2、为什么要用计算属性 当你需要一个属性是需要经过一些计算的，比如你要一个discounted折扣后的钱属性，现在有price价格，和disco
Vue之computed深度解析
qq_46772005的博客
05-16 2318
一、什么是computed computed是一个计算属性和methods一样可以存放函数。 二、computed和methods的不同 1.computed是存放一些关于运算的函数，而methods存放的是逻辑之类的函数 2.computed的里面的函数，在第一次调用的时候，会直接执行（执行成功后，会存放到缓存里面去），但在第二次调用的时候，只要数据没有发生改变，会直接从缓存里面获取数据。只要数据没改变就只会执行一次 而methods是每次调用都会执行 三、剖析computed 我们写的co
vue计算属性的使用（computed）
lingliu0824的博客
04-01 3678
当需要使用多个变量的计算结果时，若在元素中写表达式将会显得很别扭，此时可以利用vue的计算属性，将计算结果返回给一个计算属性，后面直接使用该属性，利用计算属性结合v-module可以实现简单的计算器功能 下面只简单的说明其用法 用计算属性得到总价格 <div id="app"> <ul> <li v-for='price in books'>...
computed 中的函数互相调用
03-31
在computed中的函数可以互相调用，但是需要注意以下几点： 1.函数之间的调用必须要避免出现循环调用，否则会导致程序陷入死循环。 2.调用的函数必须要在computed中先定义，否则会出现函数未定义的错误。 3.函数之间的调用可以带参数，也可以不带参数，但是需要注意参数的传递方式。 下面是一个例子，演示了computed中的函数互相调用： ``` computed: { // 定义两个函数 sum: function () { return this.num1 + this.num2 }, average: function () { // 调用sum函数，计算平均值 return this.sum / 2 } }, data: { num1: 3, num2: 5 } ``` 在上面的代码中，我们定义了两个函数sum和average，其中average函数调用了sum函数，计算了平均值。注意，我们先定义了sum函数，才能在average函数中调用它。另外，我们还定义了两个数值类型的属性num1和num2，它们的值分别是3和5。最终，我们可以通过访问average函数来获得计算出的平均值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值