第 146 题：Vue 中的 computed 和 watch 的区别在哪里

[yygmind]

[seho-dev]

watch监听一个实例上的变量的变化，可以接受2个参数（newValue, oldValue）,即变化的最新值和上一次变化的旧值
computed是计算属性，即示例上的数据不改变会有缓存，当下一次遇到的属性如果之前使用过，就会把缓存中的值放上去

[JaniceDong]

computed：计算属性

计算属性是由data中的已知值，得到的一个新值。
这个新值只会根据已知值的变化而变化，其他不相关的数据的变化不会影响该新值。
计算属性不在data中，计算属性新值的相关已知值在data中。
别人变化影响我自己。
watch：监听数据的变化

监听data中数据的变化
监听的数据就是data中的已知值
我的变化影响别人

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

[GuoYuFu123]

说一下个人见解，
1、watch就是单纯的是监听某个数据的变化，支持深度监听
2、computed是计算属性，是依赖于某个或者某些属性值，只有当依赖的数据发生变化时，才会发生变化；

[ypf0088]

计算属性，实质就是将变量的get属性重写成了你所定义的那个函数，也就是说实现了数据劫持那一步，无所谓data还是props，都可以作为计算属性函数的依赖值。

属性监听，其实也就是观察者模式将变量丢进了观察者收集器当中，变化可以被通知到。

[gongshun]

计算属性是定义变量的get和set，对于复杂数据类型，引用地址不变，则不会触发set，get会缓存，不会重复计算。watch是变量变化时做点什么（触发一些函数），数组的一些变异的方法（push/splice/shift等）不会触发set，只能触发watch。

[Wetoria]

computed：计算，顾名思义就是根据相关数据的变化得到一个新值。
watch：看，发现观察的东西有变更了，进行一系列的操作。
计算属性相当于一个变量，由一个方法构成，里面涉及到的data数据，就是相关数据。通常只做“计算结果”的逻辑，不改变数据。
watch则是需要根据观察的“对象”，在其变动时执行相关逻辑。

[HCLQ]

watch 会生成一个watcher对象，在监视的属性每次变动时都会触发回调
computed 则是生成一个惰性的watcher，只有在取值操作(getter触发)时收集依赖且计算值
当有依赖变动时仅将 dirty 置为 true，不做计算操作
当有取值操作时，根据自身标记 dirty 属性返回上一次计算结果/重新计算值

[1727738828]

Watch
    watch用于观察和监听页面上的vue实例，当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，那么watch为最佳选择

computed
    可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会触发这个属性
    具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。

[chenchangwen]

vue:2.6.10

<template>
    <div class="container" id="home">
        <p>{{a}}</p>
        <p>{{b}} </p>
        <p>{{d}}</p>
        <button @click="change">改变a</button>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                a: 1,
                b: 2
            }
        },
        methods: {
            change() {
                this.a = 5;
            }
        },
        watch: {
            a() {
                console.log('watch a');
            }
        },
        computed:{
            d() {
                console.log('computed');
                return this.a + this.b;
            }
        }
    }
</script>

watch: a属性变化时打印.
computed: (a|b)属性变化时打印.

这个例子change一直都是5,实际上不会一直执行打印,都有缓存.

[spongege]

没看过这方面的源码，但是据说computed的依赖变化的时候如果没对computed里面的值进行使用，好像是不会触发computed的。

[ypf0088]

没看过这方面的源码，但是据说computed的依赖变化的时候如果没对computed里面的值进行使用，好像是不会触发computed的。

因为computed没有对观察者进行实现，只是做了数据劫持

[Hunterang]

computed 是在Dep.update(),执行之后，数据更新之前，对新数据从新改造。

watch 是在set刚开始发生的时候添加的回调，可以监听数据的变化情况

[tywei90]

我总结了下，有如下几点：

• 功能上：computed是计算属性，也就是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化，然后执行相对应的函数

• 使用上：computed中的函数必须要用return返回；watch的回调里面会传入监听属性的新旧值，通过这两个值可以做一些特定的操作，不是必须要用return

• 性能上：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调

• 场景上：computed：当一个属性受多个属性影响的时候，例子：购物车商品结算；watch：当一条数据影响多条数据的时候，例子：搜索框