Vue---Vue中的compute计算属性里的方法与method里普通方法的区别

Cirrod

已于 2022-02-03 12:22:54 修改

阅读量1.3k

点赞数 3

分类专栏： Vue 文章标签： vue.js javascript ecmascript

于 2022-02-01 16:25:33 首次发布

本文链接：https://blog.csdn.net/h18377528386/article/details/122764173

版权

Vue 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

一.计算属性的用法

1.在Vue中计算属性和data、methods、watch是一个级别的，所以它的位置也和它们一样：

<script>
export default {
    name: "app",
    // 数据
    data() {
        return {};
    },
    //方法
    method:{},
    //计算属性
    computed:{},
    //监听器
    watch:{}
};
</script>

2.计算属性里的方法必须有返回值

3.切记，在使用计算属性的时候不要加()

二.为什么需要用计算属性

1.表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

例子：字符串的翻转

<body>
    <div id="app">
        <p>{{ message.split('').reverse().join('') }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello'
            }
        })
    </script>
</body>

注意：直接把字符串的翻转的计算逻辑写在差值表达式里面，就会让模版显得太复杂，不便于阅读与维护。

使用计算属性改进

<body>
    <div id="app">
        <p>{{ stringReverse }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello'
            },
            computed: {
                stringReverse() {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

将字符串的计算机逻辑放在计算属性的方法里，既把模板内容更加简洁了，代码在计算属性里维护也更加方便

2.计算属性是基于它们的依赖进行缓存的

计算金额例子：

<body>
    <div id="app">
        价格：<input type="text" v-model="price"> 数量：
        <input type="text" v-model="num"> 金额：{{countPrice}} 确认金额：{{countPrice}}
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                price: 9,
                num: 6
            },
            computed: {
                countPrice() {
                    console.log('执行了一次compute计算属性的方法');
                    return this.price * this.num
                }
            }
        })
    </script>
</body>

可以看到我们将计算金额的表达式在写在了计算机属性里并封装成countPrice方法，并在模板中（金额，确认金额）调用了两次计算属性的countPrice方法，打开控制台：

在控制台我们可以看到计算属性的countPrice方法实际上只运行了一次，这是因为计算属性是基于它们的依赖（在本例中依赖就是price和num）进行计算并且缓存的,也就是说countPrice方法只执行了一次就已经基于依赖把计算结果计算好并且缓存，当下一次再执行该方法时，只要依赖没变，那么该方法不会再次计算，而是直接把缓存好的计算结果返回。

三.计算属性（compute）里的方法与普通方法（methods里）的区别

1.计算属性里的方法是基于它们的依赖进行缓存的，而普通方法不存在缓存

2.计算属性里的方法在执行时不用带小括号，而普通方法需要带小括号

3.计算属性里的方法必须有返回值

修改一下刚才我们基于计算属性的计算金额的例子

<body>
    <div id="app">
        价格：<input type="text" v-model="price"> 数量：
        <input type="text" v-model="num"> 金额：{{countPrice()}} 确认金额：{{countPrice()}}
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                price: 9,
                num: 6
            },
            methods: {
                countPrice() {
                    console.log('执行了一次methods里的方法');
                    return this.price * this.num
                }
            }
        })
    </script>
</body>

控制台运行：

可以看到方法运行了两次，普通方法是没有缓存的，并且在查值表达式里执行方法需要带小括号

四.计算属性的应用场景

1.优化模板结构，使用计算属性可以使模板内容更加简洁

2..某个属性的值需要来自多个属性的简单计算或者复杂逻辑计算得出的值时, 推荐使用computed属性, 比如计算价格总价格等等。

五.总结

1.计算属性里的方法是基于它们的依赖进行缓存的，而普通方法不存在缓存

2.计算属性里的方法在执行时不用带小括号，而普通方法需要带小括号

3.计算属性里的方法必须有返回值

Cirrod

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue---Vue中的compute计算属性里的方法与method里普通方法的区别

一.计算属性的用法1.在Vue中计算属性和data、methods、watch是一个级别的，所以它的位置也和它们一样：<script>export default { name: "app", // 数据 data() { return {}; }, //方法 method:{}, //计算属性 computed:{}, //监听器 watch:{}};</script>
复制链接

扫一扫