浅谈vue3中computed和watch

1.computed是什么？

        在vue世界中，computed是一个叫计算机属性的玩意，他是响应式的，这意味着当计算属性所依赖的数据发生变化时，计算属性会自动重新计算，并更新相关的 DOM，下面是一个简单的案例

<template>
<input type="text" v-model="one">
  <br/>
<input type="text" v-model="two">
 <div>{{str}}</div>
</template>

<script setup>
import {computed, ref} from "vue";

const one=ref(0)
const two=ref(0)
let str=computed(()=>{
  return parseInt(one.value)+parseInt(two.value)
})
</script>

        这样做的好处在于：每当 one 或 two 发生变化时，<div>中的 {{str}} 将会自动更新为 one 和 two 的和。这是因为 computed 是一个响应式计算的属性，这意味着当其依赖的数据（即 one 或 two）发生变化时，它将重新计算并更新自身的结果。由于 computed 是惰性的，它只会在其依赖项发生变化后才进行计算，因此它可以避免不必要的计算和性能开销，总的来说，<div>中的 {{str}} 始终保持最新，而无需手动更新，这就是使用 computed 进行响应式计算的好处。

2.Vue 中计算属性的好处主要体现在以下几个方面

2.1.简化模板逻辑

      计算属性可以使模板更加清晰和简洁。它允许你将复杂的逻辑抽离到计算属性中，使模板更专注于 UI 的呈现，降低了模板的复杂度，提高了代码的可读性。

2.2.依赖追踪

        Vue 会追踪所有计算属性的依赖关系，在依赖的数据发生变化时自动更新计算属性，而无需手动管理更新逻辑。这带来了更高的开发效率和代码可维护性。

2.3.缓存性

       计算属性是基于它们的响应式依赖进行缓存的。只有当依赖发生改变时，才会重新计算。这意味着在多次访问计算属性时，Vue 可以避免不必要的计算，提高了性能和效率。

2.4.更容易维护代码

     将复杂的计算逻辑抽象成计算属性，使得代码更易维护。计算属性可以被多个模板中复用，而不需要重复编写逻辑，降低了代码重复率。

        如果不使用计算属性，相同的逻辑可能会散布在模板、方法和生命周期钩子中，导致代码难以维护、理解和调试。而使用计算属性，则可以将这些逻辑集中到一个地方，更好地组织代码。总的来说，使用计算属性能够使代码更加清晰、高效和易维护，降低了重复代码的编写，提高了开发效率。它有助于将 UI 的渲染逻辑和数据处理逻辑分离，使得代码结构更加清晰，提高了开发体验和代码质量。

3.watch是什么？

     watch 是一个全局的函数和对象，用于监听数据变化并进行相应的响应。它可以监听任何 Vue 实例的数据或方法的变化，每当被监视的数据发生变化时，它就会触发回调函数，可以用于处理 UI 更新、异步任务和其他操作。

       到这里有人会问，好像都是数据改变就触发，用watch照样可以执行上面的计算机属性操作，那他们有什么区别？

<template>
<input type="text" v-model="one">
  <br/>
<input type="text" v-model="two">
 <div>{{sum}}</div>
</template>

<script setup>
import {ref, watch} from "vue";
const one=ref(0)
const two=ref(0)
const sum=ref(0)
watch([one, two], () => {
  sum.value = Number.parseInt(one.value) + Number.parseInt(two.value);
});
</script>

        效果是一样的，但是眼光的小伙伴就看到我拿了一个响应式变量来接，意思就是，侦听器（watch）他不是响应式的，watch只是监听数据变化，而并非直接更改数据。如果要使数据具有响应性，请确保它是响应式的。如果您想要更新视图中的数据，请确保调用Vue.set或this.$set` 更新响应式变量，所以上面我拿了一个响应式变量sum接

       相比之下，computed 是一种计算属性，可以基于原始数据或其他计算属性进行复杂的运算，并返回一个新的值。每次依赖的数据发生改变时，都会重新计算结果。computed 在实现 MVVM 观察模型的时候是非常有用的，因为它可以自动更新视图中的数据。 Vue 3 的 watch 和 computed 都可以用来处理数据变化，但是它们的设计理念不同。

computed和watch区别：

• computed 更适合用来缓存结果，它是懒加载的，只有在依赖数据发生变化时才会重新计算。它用于计算复杂的表达式，但不能监听非引用类型的数据变化。
• watch 更灵活，它可以监听任何数据变化，包括非引用类型的数据，也可以执行异步操作。但当使用 watch 来执行复杂操作或异步任务时，可能会降低性能，因为它会在每次数据变化时都执行一次。 总的来说，computed 更适合用来缓存计算结果，而 watch 更适合用来监听数据变化并执行副作用。建议优先考虑使用 computed ，只有当 computed 无法满足需求时再考虑使用 watch 

注：vue3 版本中不再支持非引用类型监听，vue2还是支持的