计算属性 computed

在Vue.js中，computed属性是一种便捷的方式来声明响应式的计算属性。它们是基于依赖的属性，也就是说它们会根据其依赖的属性进行自动更新。
通过在Vue组件的computed对象中定义属性，可以创建computed属性。每个computed属性都包含一个getter函数，它用于计算属性的值，并返回结果。当依赖的属性发生变化时，Vue会自动重新计算computed属性的值。
vue不推荐在视图中写太多逻辑，如果写太多的逻辑，视图就会很胖逻辑尽量写在js中

示例：

<template>
  <div>
    <p>{{ fullName }}</p>
    <p>{{ reversedFullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
    reversedFullName() {
      return this.fullName.split('').reverse().join('');
    }
  }
};
</script>

在上面的示例中，我们有两个computed属性：fullName和reversedFullName。fullName属性依赖于firstName和lastName属性，并返回它们的合并结果。reversedFullName属性依赖于fullName属性，并返回将其字符反转后的结果。
computed属性的好处是它们具有缓存机制。这意味着只有当依赖的属性发生变化时，在多个地方多次使用computed属性时，它们只会计算一次，然后缓存mputed属性才会重新计算。在起来，直到依赖的属性发生变化。

侦听器 watch

在Vue.js中，你可以使用侦听器（watcher）来监测和响应Vue实例中数据的变化。侦听器提供了一种在数据变化时执行自定义逻辑的方式。
通过在Vue组件的watch选项中定义侦听器，你可以监听一个或多个数据的变化，并在数据变化时执行相应的操作。每个侦听器都包含一个被监听的数据属性和一个回调函数。当被监听的数据发生变化时，回调函数将被触发。
watch它一般是用于侦听data中数据的一个变化，然后变化之后我们可以去做一些事情，一般是异步的操作

示例1：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello',
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log('Message changed from', oldValue, 'to', newValue);
    },
  },
  methods: {
    updateMessage() {
      this.message = 'Hello World';
    },
  },
};
</script>

在上面的示例中，我们定义了一个侦听器来监听message属性的变化。当message属性发生变化时，侦听器中的回调函数将被调用，并且会打印出变化前后的值。
通过点击"Update Message"按钮，我们更新了message属性的值，从而触发了侦听器。在控制台中可以看到打印的信息。
侦听器不仅可以监听简单的数据属性，还可以监听嵌套属性、数组变动、对象属性等。你可以在侦听器中执行任意逻辑，比如异步操作、调用方法等。
需要注意的是，侦听器不会立即执行回调函数，而是在被监听的数据发生变化后才执行。并且，侦听器可以监听多个数据属性，你可以在watch选项中定义多个侦听器。

deep

深度监听。
在Vue.js的侦听器（watcher）中，你可以使用deep选项来深度观察（deep watch）一个数据属性的变化。当你需要监听一个对象或数组的内部属性或元素的变化时，deep选项非常有用。
对象是复杂数据类型，引用地址没有变，所以没法监听,使用deep就可以监听复杂数据类型。

immediate

示例2：

watch:{
            // 对象是复杂数据类型，引用地址没有变 ，所以没法监听
            // 监听对象本身的变化，需开启深度监听，高级写法
            obj:{
                handler(){
                    console.log(11)           
                },
                deep : true,   // deep = 深   开启深度监听
                immediate: true  // immediate = 立即 一开始运行就会侦听  // 立即侦听
            }    
        }
      })

立即执行。
你可以使用immediate选项来在侦听器被创建时立即执行回调函数，而不仅仅在被监听的数据发生变化时执行。
默认情况下，侦听器在被监听的数据发生变化后才会执行回调函数。但是，有时你可能需要在侦听器被创建时立即执行一次回调函数，无论数据是否发生了变化。这时可以使用immediate选项。

计算属性和侦听器区别

计算属性（computed）和侦听器（watch）是Vue.js中用于响应数据变化的两种不同的方式，它们有以下区别：

语法和使用方式：

计算属性使用computed选项来定义，而侦听器使用watch选项来定义。计算属性是一个函数，返回计算结果作为属性值；
侦听器是一个对象，包含一个或多个被监听的属性和相应的回调函数。

用途和计算方式：

计算属性适用于对已有的数据进行计算、衍生或转换，并返回计算结果。它们在模板中以属性的形式使用，类似于普通的数据属性。计算属性具有缓存机制，只有当依赖的属性发生变化时才会重新计算。
侦听器用于监听一个或多个数据的变化，并在数据变化时执行相应的操作。侦听器中的回调函数可以执行任意逻辑，比如异步操作、调用方法等。侦听器可以对数据的变化做出更细粒度的响应。

依赖关系：

计算属性是基于依赖进行自动更新的。Vue会追踪计算属性所依赖的数据属性，并在依赖属性变化时重新计算计算属性的值。这意味着只有当计算属性依赖的数据属性发生变化时，才会触发计算属性的重新计算。
侦听器可以监听一个或多个数据属性的变化，并在这些数据属性发生变化时执行相应的操作。侦听器可以监听简单的数据属性、嵌套属性、数组变动、对象属性等。

应用场景：

计算属性适合用于需要对数据进行复杂计算或衍生的场景。它们可以提高代码的可读性和可维护性，避免重复计算，以及将复杂的计算逻辑封装成可复用的属性。
侦听器适用于需要在特定数据变化时执行自定义逻辑的场景。它们可以用于观察特定数据的变化并做出相应的响应，例如发送网络请求、更新其他数据等。

总结：

计算属性和侦听器在使用方式、用途和计算方式等方面有所不同。计算属性适合对已有数据进行计算和衍生，而侦听器适合监听数据变化并执行自定义的操作。在选择使用哪种方式时，可以根据具体的需求和场景来决定。

计算属性 和 侦听器

计算属性 computed

示例：

侦听器 watch

示例1：

deep

immediate

示例2：

计算属性和侦听器区别

总结：

计算属性和侦听器