Vuex的计算属性（computed 和 watch）与方法methods的区别？

一、区别：

1、methods：只要页面进行渲染，就会重新计算。

2、computed：是计算属性，当计算属性依赖的内容发生改变时，才会重新计算，只是缓存机制，更高效。

• 支持缓存，只有依赖数据发生改变，才会重新进行计算

• 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

• computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。

• 示例：

  const app = Vue.createApp({
    data() {
      return {
        message: "hello world",
        count: 2,
        price: 5
      }
    },
    computed: {
      // 当计算属性依赖的内容发生变更时，才会重新执行计算
      total() {
        return Date.now() + this.count;
        // Date.now(),指的当前时间
        // return this.count * this.price
      }
    },
    methods: {
      // 只要页面重新渲染，才会重新计算
      getTotal() {
        return Date.now();
        // return this.count * this.price;
      },
      // this指向Vue的实例
    },
    template: `
     <div> {{message}} {{total}} </div>
    `
  });
  const vm = app.mount('#root');

在控制台，vm.message=4时，{{total}}始终不发生变化。

在控制台，vm.message的值重新渲染时，{{getTotal()}}发生变化

const app = Vue.createApp({
    data() {
      return {
        message: "hello world",
        count: 2,
        price: 5
      }
    },
    computed: {
      // 当计算属性依赖的内容发生变更时，才会重新执行计算
      total() {
        return Date.now() + this.count;
        // Date.now(),指的当前时间
        // return this.count * this.price
      }
    },
    methods: {
      // 只要页面重新渲染，才会重新计算
      getTotal() {
        return Date.now()+this.count;
        // return this.count * this.price;
      },
      // this指向Vue的实例
    },
    template: `
     <div> {{message}} {{getTotal()}} </div>
    `
  });
  const vm = app.mount('#root');

3、watch（侦听器）

定义理解：

watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。

• 惰性地执行副作用；

• 更具体地说明应触发侦听器重新运行的状态；

• 访问被侦听状态的先前值和当前值。

更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

• 不支持缓存，数据变，直接会触发相应的操作；

• watch支持异步；

• 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

写法：对象：有键，有值

1. 键：就是你要监控的那个数据，比如说price，这个就是要监控data中的price变量。

2. 值：

   　　① 可以是【函数】：就是当你监控的price变量变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

   　　② 可以是【函数名】：不过这个函数名要用单引号来包裹。

   　　③ 可以是【包括选项的对象】：

二、总结:

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

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

• computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存。

• computed 和 watch都能实现的功能，建议使用 computed 因为更加简洁

三、示例

const app = Vue.createApp({
    data() {
      return {
        message: "hello world",
        count: 2,
        price: 5,
        newTotal: 10,
      }
    },
    // 创建侦听器
    watch: {
      // price 发生变化时，函数会执行
      // 监听定量事件的watch改变，做一些异步的操作，current是变化后的值，prev变化前的值
      price(current, prev) {
        this.newTotal = current * this.count;
      }
    },
    // 创建计算属性
    computed: {
      // 当计算属性依赖的内容发生变更时，才会重新执行计算，只是缓存机制，更高效。
      total() {
        return Date.now() + this.count;
        // return this.count * this.price
      }
    },
    methods: {
      formatString(string) {
        return string.toUpperCase();
      },
      // 只要页面重新渲染，才会重新计算
      getTotal() {
        return Date.now();
        // return this.count * this.price;
      },
      // this指向Vue的实例
    },
    template: `
     <div> {{message}} {{newTotal}} </div>
    `
  });
  const vm = app.mount('#root');