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

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

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

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

我们先看一个示例:

html 复制代码

<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 计算属性会立即返回之前的计算结果，而不必再次执行函数。

html 复制代码

<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数据发生变化的时候,计算属性才会重新执行.

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

html 复制代码

<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 复制代码

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

通过上面案例的对比,虽然都能实现我们的效果

但是从代码上看, 与computed相比,watch实现这种需求显得很繁琐

watch的功能就像他名字一样,监听, 监听某个值的变化, 做响应的事情

computed 计算属性,往往是为了使用他的值, 这个值是依赖其他值而求得的结果,相当于保存了计算的过程,如果在使用过程中,依赖的值发生了变化, 就会重新执行计算

一言以蔽之:

computed计算属性的值我们需要用到它,依赖变化运算过程自动执行
watch监听的值我们不需要用到它，我们只是想在它监听的值改变了的时候搞点事情。

watch重点记住以下内容:

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher。

这是为什么 Vue 通过 watch 选项提供一个更通用的方法，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。