vue中watch和computed的区别

用computed和watch实现fullName案例：

<div id="app">
    <input type="text" v-model="firstName" />
    <input type="text" v-model="lastName" />
    <h2>
        {{ fullName() }}
    </h2>
</div>	
<script>
var app = new Vue({
    el: "#app",
    data: {
        firstName: "Joyce",
        lastName: "Lee",
        fullName: "Joyce Lee"
    },
    // watch 监视、监听、在此处定义监听器
    // 作用: 监视data中的数据变化
    watch: {
        // 侦听器以函数的形式定义, 函数名称就是要监视的数据名称,参数就是数据变化后的新值
        firstName(val) {
            this.fullName = val + this.lastName;
        },
        lastName(val) {
            this.fullName = this.firstName + val;
        }
    },
    // 计算属性实现
    computed: {
        // 计算属性在某些场景下（此示例），要比侦听器代码简洁。
        fullName() {
            return this.firstName + this.lastName;
        }
    }
})

</script>

computed和watch的区别

1. computed是计算属性，watch是监听属性，监听data中的数据变化。
2. computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。
3. computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。
4. computed第一次加载时就监听，watch默认第一次加载时不监听。（watch可以配置加载时就监听）

• immediate 组件创建时执行与否

  immediate: true 第一次加载时监听（默认为false）

• deep深度监听，不推荐使用（非常的消耗性能）

  监听的属性是对象的话，不开启deep，对象的子属性变化不会触发watch

  开启了deep对象内部所有子属性变化，都会触发deep，

5. computed中的函数必须调用return，watch不是。在computed中的，属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。

使用场景

1. conputed：用于处理复杂的逻辑运算，一个属性受到多个属性影响，如：购物车商品结算。

2. watch：用于处理当一个属性发生变化时，需要执行某些具体的业务逻辑操作，一个数据影响多条数据，如：搜索数据

   数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择。

总结

watch和computed都是以vue的依赖追踪机制为基础的，当某一个依赖型数据发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关函数，来实现数据的变动。

当依赖的值变化时，在watch中，可以做一些复杂的操作，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。