vue3 学习笔记08 -- computed 和 watch

vue3 学习笔记08 – computed 和 watch

computed

computed 是 Vue 3 中用于创建计算属性的重要 API，它能够根据其它响应式数据动态计算出一个新的值，并确保在依赖数据变化时自动更新。

1. 基本用法

   squaredCount 是一个计算属性，它依赖于 count 的值，并且会在 count 变化时自动更新

   import { ref, computed } from 'vue';
    // 定义一个响应式数据
    const count = ref(1);
   
    // 定义一个计算属性
    const squaredCount = computed(() => count.value * count.value);
   
    console.log(squaredCount.value); // 输出：1
   
    // 修改 count，触发计算属性更新
    count.value = 2;
    console.log(squaredCount.value); // 输出：4
   
   

2. 缓存和计算属性的惰性求值

   computed 默认会缓存计算结果，只有在它的依赖项变化时才会重新计算。这样可以确保在性能上的优化，避免不必要的计算

        import { ref, computed } from 'vue';
   
        const count = ref(1);
   
        // 定义一个计算属性，使用 getter 函数
        const squaredCount = computed(() => {
        console.log('computed squaredCount'); // 仅在首次获取或依赖变化时输出
        return count.value * count.value;
        });
   
        console.log(squaredCount.value); // 输出：1
        count.value = 2;
        console.log(squaredCount.value); // 输出：4
   
   

3. 计算属性的 setter

   在某些情况下，可能需要通过计算属性设置值。Vue 3 允许定义计算属性的 get 和 set 方法，使其可以作为双向绑定的源。

    import { ref, computed } from 'vue';
   
    const firstName = ref('John');
    const lastName = ref('Doe');
   
    const fullName = computed({
    get: () => `${firstName.value} ${lastName.value}`,
    set: (value: string) => {
        const names = value.split(' ');
        firstName.value = names[0];
        lastName.value = names[names.length - 1];
    }
    });
   
    console.log(fullName.value); // 输出：John Doe
   
    fullName.value = 'Jane Smith';
    console.log(firstName.value); // 输出：Jane
    console.log(lastName.value); // 输出：Smith
   
   

4. 在 Vue 组件中使用

   在 Vue 组件中，可以将计算属性直接用于模板中，而不需要额外的 .value 访问方式。

   <template>
    <div>
        <p>Count: {{ count }}</p>
        <p>Squared Count: {{ squaredCount }}</p>
    </div>
    </template>
   
    <script setup>
    import { ref, computed } from 'vue';
   
    const count = ref(1);
    const squaredCount = computed(() => count.value * count.value);
    </script>
   
   

watch

watch 函数用于监听一个响应式数据的变化，它可以用来执行一些副作用操作，比如异步请求、处理复杂逻辑或者更新状态

1. 监听响应式数据的变化

  import { ref, watch } from 'vue';

  const count = ref(0);
  // 通过 watch 函数监听 count 的变化。每当 count 发生变化时，回调函数会被调用，同时传入新值 newValue 和旧值 oldValue。
  watch(count, (newValue, oldValue) => {
    console.log(`count changed from ${oldValue} to ${newValue}`);
  });

2. 监听多个数据的变化

     import { ref, watch } from 'vue';
   
    const firstName = ref('John');
    const lastName = ref('Doe');
   
    watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
       console.log(`Name changed from ${oldFirst} ${oldLast} to ${newFirst} ${newLast}`);
    });
   
   

3. 异步处理和立即执行

  import { ref, watch } from 'vue';

  const count = ref(0);

  watch(count, async (newValue, oldValue) => {
     console.log(`count changed from ${oldValue} to ${newValue}`);
      // 异步操作示例
      try {
          await someAsyncOperation(newValue);
      } catch (error) {
          console.error('Async operation failed:', error);
      }
  }, { immediate: true }); // 立即执行回调函数

4. 停止监听

   watch终止监听，只需要将watch赋值给一个变量，当达到条件调用watch赋值的那个变量就可以终止监听了

     import { ref, watch } from 'vue';
   
    const count = ref(0);
   
    const stopWatching = watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });
   
    // 停止监听
    stopWatching();