watch跟computed的区别

在这个例子中，我们监听了firstName和lastName两个数据属性的变化，并在它们变化时打印了一条消息。

watch和computed在Vue.js等前端框架中都是用于处理和响应数据变化的重要工具，但它们之间存在一些关键差异。

1. 本质与功能：

• watch：是一个监听器，主要用于监听data中某些数据的变化。当这些数据发生变化时，它会执行相应的回调函数。
• computed：是计算属性，它基于data中的某些数据，通过一系列计算得出新的值。这个计算过程只在相关数据发生变化时触发，并且计算结果会被缓存，除非依赖的数据再次发生变化。

1. 缓存机制：

• watch：不支持缓存，每次数据变化时都会执行相应的回调函数。
• computed：支持缓存，当计算属性所依赖的数据未发生变化时，它会直接返回缓存中的结果，而不会重新进行计算。

1. 异步操作：

• watch：支持异步操作，可以在数据变化时执行异步函数。
• computed：不支持异步操作，主要用于同步计算。

1. 初始化监听：

• watch：默认在初始化时不会立即监听数据的变化，但可以通过设置immediate选项为true来在初始化时立即执行回调函数。
• computed：在组件初始化时就会开始监听其所依赖的数据。

1. 使用场景：

• watch：适用于当一个数据影响多条数据，或者需要执行异步操作、高性能消耗的操作时。例如，在搜索功能中，当用户输入搜索关键词时，可能需要监听这个关键词的变化，并据此执行搜索操作。
• computed：适用于一个属性受到多个属性影响的情况。例如，在购物车商品结算时，商品的总价可能需要根据商品的单价和数量计算得出，这时就可以使用计算属性。

总结来说，watch和computed各有其特点和适用场景。watch主要用于监听数据变化并执行回调函数，支持异步操作；而computed则用于计算属性值，支持缓存机制，适用于同步计算场景。在选择使用哪个时，应根据具体的需求和场景来决定。

watch通常用于观察和响应Vue实例上的数据变动。在Vue组件中，你可以通过watch选项来定义一个或多个监听器。每个监听器都是一个函数，它接收两个参数：新值和旧值。当被监听的数据发生变化时，这个函数会被调用。

以下是一个简单的watch示例：

export default {  
  data() {  
    return {  
      firstName: 'John',  
      lastName: 'Doe'  
    }  
  },  
  watch: {  
    firstName(newVal, oldVal) {  
      console.log(`firstName changed from ${oldVal} to ${newVal}`);  
    },  
    lastName: function(newVal, oldVal) {  
      console.log(`lastName changed from ${oldVal} to ${newVal}`);  
    }  
  }  
}

在这个例子中，我们监听了firstName和lastName两个数据属性的变化，并在它们变化时打印了一条消息。

computed的语法：

computed是Vue中的计算属性，它基于它们的响应式依赖进行缓存。只有在相关响应式依赖发生改变时它们才会重新求值。computed属性在声明的时候，必须要使用get函数来返回一个值。

以下是一个简单的computed示例：

export default {  
  data() {  
    return {  
      firstName: 'John',  
      lastName: 'Doe'  
    }  
  },  
  computed: {  
    fullName() {  
      return this.firstName + ' ' + this.lastName;  
    }  
  }  
}

在这个例子中，我们定义了一个计算属性fullName，它基于firstName和lastName两个数据属性进行计算，并返回它们的拼接结果。每次firstName或lastName改变时，fullName都会自动更新。

需要注意的是，computed中的函数不需要调用（即不需要加括号），它们会自动根据依赖的数据属性进行计算。而watch中的函数则需要在数据变化时执行，通常需要明确调用或设置相应的监听器。

总的来说，watch和computed在语法和使用上有所不同，它们分别适用于不同的场景和需求。watch更适用于执行异步或开销较大的操作，以及对数据进行监听和响应；而computed则更适用于基于已有数据进行计算并缓存结果的情况。