vue2知识点————(监听器，计算属性)

vue2的知识点，更多前端知识在主页，还有其他知识会持续更新

监听器

Vue.js 2 中，监听器（Watchers）是一种机制，用于在数据发生变化时执行特定的操作。监听器允许你监视 Vue 实例中的数据变化，并在数据变化时执行自定义的逻辑。

监听器的创建和使用：

在 Vue 实例中，你可以通过 watch 选项或者 vm.$watch 方法来创建监听器。

语法：
 watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      },
      变量名: {
        handler(newVal, oldVal){

        },
        deep: true, // 深度侦听(对象里面层的值改变)
        immediate: true // 立即侦听(网页打开handler执行一次)
      }
    }

    // newVal: 当前最新值
    // oldVal: 上一刻值

 deep: true, // 深度侦听(对象里面层的值改变)
  immediate: true // 立即侦听(网页打开handler执行一次)
Handle :watch中需要具体执行的方法
// 当需要数据变化时执行异步或开销过大时，这个方式是最有用的

监听器的功能：

• 监听数据变化： 监听器用于监听指定数据的变化，一旦数据变化，就会执行指定的回调函数。

• 处理数据变化： 通过监听器，你可以对数据变化做出响应，执行一些自定义逻辑，例如更新 UI、发送网络请求等。

• 深度监听： 监听器默认情况下是浅层监听，只能监听对象的第一层属性的变化。但是你可以通过设置 deep: true 选项来深度监听对象内部属性的变化。

• 立即执行： 通过设置 immediate: true 选项，可以在监听器初始化时立即执行一次回调函数，而不必等待数据变化。

总结：

• 监听器是 Vue.js 中用于监听数据变化的重要机制之一。
• 监听器可以在数据变化时执行自定义的逻辑。
• 你可以通过 watch 选项或 vm.$watch 方法来创建监听器。
• 监听器可以处理深层对象的变化，也可以选择立即执行。
• 使用监听器可以帮助你更好地响应数据的变化，从而实现更灵活的应用逻辑。

计算属性

Vue.js 2 中的计算属性（Computed Properties）是一种便利的特性，允许你在 Vue 实例中声明计算属性，这些属性的值会根据依赖数据的变化而变化，同时具有缓存机制，只有在相关依赖数据发生改变时才会重新计算。

计算属性的创建和使用：

格式：
computed: {
    "计算属性名" () {
        return "值"
    }
}

可写式计算属性
computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

计算属性的特点：

• 响应式更新： 计算属性会根据它们的依赖进行响应式更新。当依赖数据发生变化时，计算属性会重新计算，并且在依赖数据没有变化时，会返回之前缓存的结果，提高了性能。

• 缓存机制： 计算属性具有缓存机制，只有在相关依赖数据发生改变时才会重新计算。这意味着在多次访问计算属性时，如果依赖数据没有发生改变，计算属性会直接返回之前的计算结果，而不会重新执行计算函数。

• 简洁易用： 计算属性的声明方式简洁明了，能够帮助你轻松地处理复杂的计算逻辑，并且能够将这些逻辑封装在属性中，使得代码更加清晰易懂。

计算属性的应用场景：

• 对数据进行转换： 当需要对原始数据进行某种转换或处理时，可以使用计算属性。例如，将原始数据转换为特定格式、进行大小写转换等。

• 依赖多个数据计算属性： 当一个属性的值依赖于多个数据的计算结果时，可以使用计算属性。这样可以避免在模板中重复计算，提高代码的复用性和可维护性。

• 复杂逻辑的封装： 当需要进行一些复杂的逻辑计算时，可以使用计算属性来封装这些逻辑，使得代码更加清晰易懂，同时也更易于维护和测试。

总结：

• 计算属性是 Vue.js 中的一种便捷特性，用于声明基于依赖数据的计算属性。
• 计算属性具有响应式更新和缓存机制，能够根据依赖数据的变化而自动更新，并且在依赖数据不变时具有高效的缓存。
• 计算属性适用于各种场景，包括对数据进行转换、依赖多个数据计算属性、以及复杂逻辑的封装等。
• 使用计算属性能够使代码更加清晰易懂，并且提高了代码的可维护性和复用性。

计算属性 VS 监听器

1. 数据变化的触发方式：

• 计算属性： 计算属性是基于依赖数据的值进行计算的，只有当依赖数据发生变化时，计算属性才会重新计算。计算属性会自动缓存计算结果，只有在相关依赖发生变化时才会重新计算，以提高性能。

• 监听器： 监听器则是在某个数据发生变化时执行特定的回调函数。你可以手动设置需要监听的数据，并在数据变化时执行指定的逻辑，而不像计算属性那样自动进行计算和缓存。

2. 使用场景：

• 计算属性： 适用于根据一个或多个响应式数据进行计算，并且该计算的结果会被多次使用的情况。通常用于模板中的数据展示、数据转换等场景。

• 监听器： 适用于需要在特定数据发生变化时执行一些自定义的逻辑的情况。可以监听数据的变化，并在数据变化时执行一些异步操作、更新非响应式数据等。

3. 声明方式：

• 计算属性： 在 Vue 实例中通过 computed 选项声明计算属性，计算属性的值是一个函数，该函数会根据相关依赖数据的变化而自动计算。

• 监听器： 可以通过 watch 选项或 vm.$watch 方法来创建监听器，监听器需要手动设置需要监听的数据，并且指定数据变化时执行的回调函数。

4. 缓存机制：

• 计算属性： 计算属性具有缓存机制，只有在相关依赖数据发生改变时才会重新计算。这意味着在多次访问计算属性时，如果依赖数据没有发生改变，计算属性会直接返回之前的计算结果，而不会重新执行计算函数。

• 监听器： 监听器每次数据变化都会执行回调函数，不具有缓存机制，每次都会重新执行逻辑。

5. 性能：

• 计算属性： 由于具有缓存机制，计算属性在相同依赖数据的情况下只会计算一次，并且在依赖数据不变的情况下会直接返回缓存结果，因此具有较高的性能。

• 监听器： 监听器每次数据变化都会执行回调函数，不具有缓存机制，因此在多次数据变化时可能会存在性能开销。