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

旧城等待， 2022-05-20 01:50 29阅读 0赞

先上源码

<!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>

效果图：

![70][]

修改第一个文本框

![70 1][]

computed中的reverseMsg1函数被调用

现在修改msg2

![70 2][]

修改msg2就不会触发reverseMsg1函数

震惊！！！

为什么？

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

[70]: /images/20220520/8c8e290e486b42bc902a0ca9a06af0a2.png
[70 1]: /images/20220520/68b81da78c8941e0a152de22f83f7db7.png
[70 2]: /images/20220520/d9fa4864abc34df9a3d4f42556ee4a14.png

发表评论取消回复

表情：

评论列表（有 0 条评论，29人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 函数如何调用属性与方法

<script type="text/javascript"> //不包含this 的函数调用方法 function pp()\{ pp.p1 = "sadsad"

怼烎@/ 2024年04月01日 11:53/ 0 赞/ 50 阅读

相关 Vue中的computed属性

computed属性 1.computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者

冷不防/ 2023年02月17日 11:16/ 0 赞/ 22 阅读

相关 vue中如何获取计算属性computed中传递过来的参数

方法：使用闭包来传递参数例子如下： template标签中的代码： // coursePrice：计算属性名称，用于判断课程价格是否是0，如果是0，那就代表课程

喜欢ヅ旅行/ 2022年12月20日 05:35/ 0 赞/ 235 阅读

相关计算属性computed

[vue官方文档：计算属性][vue] 计算属性和方法的区别第 1 章：计算属性的基本用法 <template> <div class="com

旧城等待，/ 2022年11月02日 00:57/ 0 赞/ 211 阅读

相关 Vue中的computed属性

computed属性是什么？ Vue中的`computed`属性称为计算属性，通过该关键字可以监听多个变量或者多个对象。如果改变的值和原值一样，那么就不会触

我就是我/ 2022年10月01日 12:56/ 0 赞/ 219 阅读

相关如何在ajax中调用函数吗,如何使函数在ajax调用中调用函数？

$('.projects').hover(function()\{ $defBox.stop(true, true).fadeToggle(1000).html('test'

深藏阁楼爱情的钟/ 2022年09月03日 11:19/ 0 赞/ 292 阅读

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

先上源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

旧城等待，/ 2022年05月20日 01:50/ 0 赞/ 30 阅读

相关 vue computed计算属性的get和set函数

get和set都是回调函数什么是回调函数：1/你定义的 2/你没有调用 3/但最终执行了关于回调函数需要知道的两个问题：1/什么时候调用 2/用来做什么

柔光的暖阳◎/ 2022年04月21日 15:14/ 0 赞/ 233 阅读

相关 Vue中的computed计算属性

文章目录 computed与watch的异同不同点相同点示例源码结果分析 c

旧城等待，/ 2022年04月18日 04:04/ 0 赞/ 309 阅读

相关 vue中的计算属性computed

目录一，计算属性的基本使用二，计算属性的get与set 三，计算属性与方法的区别 -------------------- Vue计算属性：更强大的属性声明

Bertha 。/ 2021年07月25日 13:36/ 0 赞/ 532 阅读