vue学习9：计算、方法和侦听

最新推荐文章于 2024-08-25 23:34:32 发布

simoonQian

最新推荐文章于 2024-08-25 23:34:32 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习心得

本文链接：https://blog.youkuaiyun.com/weixin_40814356/article/details/80157937

vue学习心得专栏收录该内容

20 篇文章

订阅专栏

本文对比了Vue中计算属性、方法及监听的区别。计算属性具备缓存功能且仅当依赖数据变化时才重新计算；方法没有缓存功能；监听虽然也具备缓存功能但实现更为复杂。通过实例代码展示了不同方式下数据变化时的行为差异。

1、计算：具有缓存功能

缓存机制：计算属性所依赖的数据不发生变化的时候，计算属性的值只计算一次，以后就不在重新计算。用来提高效率

2、方法：不具备缓存功能

3、监听：具备缓存功能。但是实现起来笔计算属性更复杂一点。

具体见代码：

computed：计算

<div id="app">
        <span>{{fullName}}</span>
        <span>{{age}}</span>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName:'Dell',
                lastName: 'Lee',
                age: 28
            },
            computed: {
                fullName () {
                     console.log("计算了一次");
                     return this.firstName + " " + this.lastName;
                }
            }
        })
    </script>

控制台如下：

同样的功能用methods实现：

methods: {
                fullName () {
                    console.log('方法执行了一次')
                    return this.firstName + " " + this.lastName;
                }
            }

控制台如下：

同样的需求用watch来实现：

 watch: {
                firstName () {
                    console.log('监听了一次')
                    this.fullName = this.firstName + " " + this.lastName;
                },
                lastName () {
                    console.log('监听了一次')
                    this.fullName = this.firstName + " " + this.lastName;
                }
            }

控制台如下：