vue—computed计算属性_怎么除非computed里的值变化-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42036616/article/details/82979124

本文深入解析Vue中的计算属性，阐述其工作原理与优势。通过实例展示如何利用计算属性提高代码效率，减少不必要的重复计算，实现数据响应式更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要点：

1.computed定义的属性，称为计算属性。本质是定义的方法，但是我们在使用时，直接当作属性使用，不用加()

2.每次计算属性使用的数据发生改变时，计算属性调用其处理方法

3.将计算属性的最新的值，放在缓存中。只有在计算属性的变量改变时，才会重新将缓存内容刷新。所以，别的方法调用计算函数结果时，如果没有触发变量的改变，不会调用对应的function

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="firstname"> +
        <input type="text" v-model="lastname"> =
        <input type="text" v-model="fullname">
    </div>
    
    <script>
        
        var vm = new Vue({
            el:'#app',
            data:{
                firstname:'',
                lastname:''
            },
            computed:{
                'fullname':function () {
                    return this.firstname + '·' + this.lastname;
                }
                //1.computed定义的属性，称为计算属性。本质是定义的方法，但是我们在使用时，直接当作属性使用，不用加() 
                //2.每次计算属性使用的数据发生改变时，计算属性调用其处理方法
                //3.将计算属性的最新的值，放在缓存中。只有在计算属性的变量改变时，才会重新将缓存内容刷新。所以，别的方法调用计算函数结果时，
                //如果没有触发变量的改变，不会调用对应的function    
            }
        })
    </script>
</body>
</html>

效果：