Computed和watch的区别

computed

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用 computed。支持缓存，只有依赖数据发生改变，才会重新进行计算。不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化。computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于 data 中声明过的数据通过计算得到的。

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

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

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

watcher

watcher 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。

监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值，不支持缓存，数据变，直接会触发相应的操作，watch 支持异步。

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

<script>
  export default {
    data() {
      return {
        change: 10,
      };
    },
    props: {
      msg: String
    },
    methods: {
      setNameFun() {
        this.change -=1 ;
      }
    },
    watch: {
      change(newval, oldval) {
        console.log(newval);
        console.log(oldval);
      }
    }
  };
</script>

当需要在数据变化时执行开销较大或异步的操作时，这个方式是最有用的。这是和 computed 最大的区别。