Vue中的 computed 和 watch的区别

Vue中的 computed 和 watch的区别

computed

computed看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算

1）下面是一个比较经典简单的案例

<template>
  <div class="hello">
      {{fullName}}
  </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: '飞',
            lastName: "旋"
        }
    },
    props: {
      msg: String
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    }
}
</script>

注意

在Vue的 template模板内（{{}}）是可以写一些简单的js表达式的很便利，如上直接计算 {{this.firstName + ’ ’ + this.lastName}}，因为在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响，而 computed 的设计初衷也正是用于解决此类问题。

应用场景

适用于重新计算比较费时不用重复数据计算的环境。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据，那么把这个数据设计为computed

watch

watcher 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值 特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。

<template>
  <div class="hello">
      {{fullName}}
      <button @click="setNameFun">click</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: '飞',
            lastName: "旋"
        }
    },
    props: {
      msg: String
    },
    methods: {
        setNameFun() {
            this.firstName = "大";
            this.lastName = "熊"
        }
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    },
    watch: {
        firstName(newval,oldval) {
          console.log(newval)
          console.log(oldval)
        }
    }
}
</script>

immediate 和deep

immediate ， 第一次渲染的时候要执行这个函数

deep ， 如果监听对象，是否要看对象里面的属性变化

如果属性变化了，就去执行一个函数

注意：watch不能用箭头函数

watch: {a: function (val, oldVal) {}}也可以是watch: {a() {}}
watch: {b: [f1,f2]}
watch: {c: 'methodName'}
watch: {d: {handler:fn, deep:true, immediate:true}}
vm.$watch('n', function(){}, {immediate: true})

总结：

computed:计算属性,是为了解决在模板中放入太多过于复杂逻辑,让模板过重且难以维护的问题.计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值。如果一个数据依赖于其他数据，那么就应该把这个数据设计为computed.

watch:监听属性,如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。通常更好的做法是使用computed计算属性而不是命令式的 watch 回调。在选项参数中指定 deep: true,监听对象内部值的变化。注意监听数组的变更不需要这么做。在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调。