Vue3_2024_4天【computer、watch、method在Vue2~3中的说明】未完待补

第一：从概念上介绍~~vue中计算属性、方法、监听器（以Vue2描述）

1.计算属性 (Computed Properties):

• 1.概念： 计算属性是基于响应式依赖进行缓存的属性，只有在相关依赖发生改变时才会重新求值。它们类似于具有缓存的函数。
• 2.使用场景： 适用于依赖于其他数据或状态的属性，例如：购物车的结算计算价格、动态表格数据-表头和表体关系处理显示问题，（还例如：数据进行过滤、排序或计算衍生值等场景）。
  语法： 在Vue实例中使用computed对象定义计算属性，并以函数的形式返回计算结果。

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

2.方法 (Methods):

• 1.概念： 方法是在调用时执行的函数，不会进行缓存，每次调用都会重新执行函数体内的逻辑。
• 2.使用场景： 适用于需要在事件触发或者动态计算时执行的逻辑，不涉及到数据的依赖关系。
  语法： 在Vue实例中使用methods对象定义方法，可以在模板中通过调用方法名来触发相应的函数。

methods: {
  greet() {
    alert('Hello, ' + this.name + '!');
  }
}

3.监听器 (Watchers):

• 1.概念： 监听器是用来响应数据变化并执行自定义逻辑的方式，可以对数据的变化做出即时反应。
• 2.使用场景： 适用于需要在数据变化时执行异步或复杂操作的情况，最常见：列表的搜索框模糊查询和，还比如发送网络请求或执行动画等。
  语法： 在Vue实例中使用watch对象来定义监听器，可以监听数据的变化并执行相应的回调函数。

watch: {
  counter(newValue, oldValue) {
    console.log('监听属性发生改变 ' + oldValue + ' to ' + newValue);
  }
}

总结:
*计算属性适合进行数据的计算和转换，具有缓存机制，适用于模板中使用。(缓存缘故–重复内容时，只执行一次)
*方法适合处理用户交互和事件响应等操作，代码在每次调用时都会执行。（无缓存—每一次调用都执行~~重复调用）
*监听器用于监听数据的变化，并执行相应的逻辑，适用于需要异步操作或者复杂逻辑的情况。

第二：Vue3中计算属性与监听器

1.vue3中的计算属性~简单使用、特点

• 在Vue.js 2和Vue.js 3中，计算属性的核心功能是相同的，都是用来根据其他数据的变化而动态计算生成新的数据。然而，Vue.js 3对计算属性进行了一些改进和优化。

1.1使用

<template>  
  <div>  
    <p>原始计数: {{ count }}</p>  
    <p>计算后的计数: {{ doubledCount }}</p>  
    <button @click="incrementCount">增加计数</button>  
  </div>  
</template>  
  
<script setup>  
import { ref, computed } from 'vue';  
  
// 声明响应式引用  
const count = ref(0);  
  
// 使用计算属性  
const doubledCount = computed(() => count.value * 2);  
  
// 定义方法  
function incrementCount() {  
  count.value++;  
}  
</script>

代码说明：在这个例子中，我们定义了一个响应式引用 count，并使用 computed 函数创建了一个计算属性 doubledCount，它返回 count 的两倍。我们还定义了一个方法 incrementCount 来增加 count 的值。

特点：

• 作用域：在 setup 语法糖中，所有的变量和方法都是默认导出的，所以你可以在模板中直接使用它们，无需再通过 return 语句显式导出。
• 响应性：计算属性是响应式的，这意味着当它们的依赖项发生变化时，它们会自动更新。在上面的例子中，doubledCount 会根据 count 的变化自动更新。
• 计算属性的缓存：计算属性是基于它们的依赖关系进行缓存的。只要依赖的响应式引用没有发生变化，多次访问计算属性会返回之前缓存的结果，而不会重新执行计算逻辑。
• 避免在模板中直接使用复杂的逻辑：尽管你可以在模板中使用方法或计算属性来进行计算，但通常建议将复杂的逻辑放在计算属性中。这样，只有当依赖的响应式数据发生变化时，计算属性才会重新计算，这有助于提高性能。
• 计算属性的可读性和维护性：使用计算属性可以让你的代码更加清晰和易于维护。你可以将计算逻辑封装在一个单独的属性中，而不是在模板或方法中散落各处。

2.Vu2计算属性与方法的区别：

计算属性是基于它们的依赖关系进行缓存的，而方法则不会。如果你需要的是一个不依赖于任何响应式状态、每次调用都会返回新结果的函数，那么应该使用方法。如果你需要的是一个依赖于响应式状态、并且希望在状态变化时自动更新的值，那么应该使用计算属性。

3.Vu2计算属性与Vue3计算属性的区别：

• 3.1性能优化：
  Vue.js 3中的计算属性相比Vue.js 2有更好的性能表现。Vue.js 3使用了Proxy对象来追踪属性的变化，而不是Object.defineProperty，这使得计算属性的依赖追踪更加高效。

• 3.2Composition API：
  Vue.js 3引入了Composition API，这为计算属性提供了更灵活的选项。在Vue.js 2中，计算属性必须定义在computed对象中，而在Vue.js 3中，你可以在任何地方使用computed()函数创建计算属性，这使得组织和重用代码更加方便。

• 3.3响应式数据：
  在Vue.js 2中，计算属性的依赖会在组件渲染时被自动收集。而在Vue.js 3中，计算属性需要显式声明它们的依赖，这可以提高性能并减少不必要的重渲染。

总结：Vue.js 3中的计算属性相比Vue.js 2具有更好的性能和更灵活的API，特别是在使用Composition API时