第十五节:带你梳理Vue2:computed/methods/watch之间的区别

前端付杰

于 2024-05-23 20:06:07 发布

阅读量913

点赞数 17

分类专栏： vue2 系列知识点文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/fjiex/article/details/139154176

版权

vue2 系列知识点专栏收录该内容

24 篇文章 1 订阅

订阅专栏

1. 计算属性computed与方法methods的比较

通过学习的知识,我们已经了解了computed计算属性和methods方法,

计算属性computed和methods方法都可以将一段逻辑代码进行复用,那么他们有什么不同之处呢.

我们先看一个示例:

<div id="app"> 
    <h2>对于字符串数据进行反向处理</h2>

    <h3>1. 原字符串</h3>
    {{ message }}

    <h3>2. methods方法反向</h3>
    {{ reversedMessage() }}

    <h3>3. computed计算属性反向</h3>
    {{ reversedMsg }}
</div>


<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            message:"hello"
        },
        methods: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            }
        },
        computed: {
            reversedMsg: function () {
                return this.message.split('').reverse().join('')
            }
        }
    })

</script>

通过示例我们会发现,两种对数据处理的逻辑最终结果确实完全相同

然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
这就意味着只要 message 还没有发生改变，多次访问 reversedMsg 计算属性会立即返回之前的计算结果，而不必再次执行函数。

<div id="app">
    <h3>多次调用计算属性</h3>
    {{ reversedMsg }}
    {{ reversedMsg }}
    {{ reversedMsg }}
    {{ reversedMsg }}
    {{ reversedMsg }}
</div>


<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            message:"hello"
        },
        computed: {
            reversedMsg: function () {
                console.log("computed")
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

在多次调用reversedMsg 计算属性时`
., console.log只会打印一次, 也就是从第二次调用开始一直使用的都是第一次调用计算属性得到的结果,只要当message数据发生变化的时候,计算属性才会重新执行.

相比之下，方法的每次调用都会触发函数的执行, 所以方法并不会对结果进行缓存

<div id="app">

    <h3>多次调用方法</h3>
    {{ reversedMessage() }}
    {{ reversedMessage() }}
    {{ reversedMessage() }}
    {{ reversedMessage() }}
    {{ reversedMessage() }}

</div>

<script>  
    const vm = new Vue({
        el: "#app",
        data: {
            message:"hello"
        },
        methods: {
            reversedMessage: function () {
                console.log("methods")
                return this.message.split('').reverse().join('')
            }
        }
    })

</script>

通过上面的例子,每次调用方法都会触发函数

所以总结:

methods属性里的函数是Vue实例的方法, 方法每次调用都会执行, 没有缓存,
computed属性里的函数是Vue实例的属性, 属性在第一次计算后就会进行缓存
computed里函数计算是方法,就不能加括号调用
所以一般结果不怎么太变化的,可以使用计算属性,计算属性只要依赖的数据不变,就会一直使用缓存的结果
结果变化比较大的,每次调用都有可能有不同结果使用方法

2. 计算属性computed与监听属性watch比较

通过前面的学习,我们知道计算属性computed和监听属性watch都可以做到对于数据的检测,

但是我们容易滥用 watch,所以接下来我们好好看看两者的区别

通过例子了解一下:

<!-- html-->
<div id="app">

    <h3>Computed计算属性</h3>
    {{fullNameCom}}

    <h3>watch监听属性</h3>
    {{fullName}}
</div>


<!--js-->
<script>
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        computed: {
            fullNameCom: function () {
                return this.firstName + ' ' + this.lastName
            }
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })
</script>